@reskin/ueditor

基于百度 UEditor 封装的 Angular 富文本编辑器组件。

特性

• ✅ 完整支持 Angular 响应式表单 (ControlValueAccessor)
• ✅ 支持模板驱动表单 (ngModel)
• ✅ 自定义文件上传接口集成
• ✅ 灵活的配置选项
• ✅ 禁用状态支持
• ✅ TypeScript 类型定义完整
• ✅ 自动资源管理和清理

安装

npm install @reskin/ueditor

配置

在 angular.json 中添加 UEditor 静态资源：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/@reskin/ueditor/static/",
                "output": "/assets/ueditor/"
              }
            ]
          }
        }
      }
    }
  }
}

使用

导入模块

import { RkUeditorModule } from '@reskin/ueditor';

@NgModule({
    imports: [RkUeditorModule]
})
export class YourModule { }

基础用法

import { Component } from '@angular/core';

@Component({
    selector: 'app-example',
    template: `<rk-ueditor [(ngModel)]="content"></rk-ueditor>`
})
export class ExampleComponent {
    content = '<p>初始内容</p>';
}

响应式表单

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-example',
    template: `
        <form [formGroup]="form">
            <rk-ueditor formControlName="content"></rk-ueditor>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    form!: FormGroup;

    constructor(private fb: FormBuilder) {}

    ngOnInit(): void {
        this.form = this.fb.group({
            content: ['<p>初始内容</p>']
        });
    }
}

自定义配置

import { Component } from '@angular/core';
import { UEditorConfig } from '@reskin/ueditor';

@Component({
    selector: 'app-example',
    template: `
        <rk-ueditor
            [(ngModel)]="content"
            [width]="'80%'"
            [contentHeight]="500"
            [options]="editorConfig">
        </rk-ueditor>
    `
})
export class ExampleComponent {
    content = '';
    
    editorConfig: UEditorConfig = {
        toolbars: [[
            'bold', 'italic', 'underline', '|',
            'insertimage', 'link', '|',
            'fullscreen'
        ]],
        autoHeightEnabled: true
    };
}

API

输入属性

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | width | 编辑器宽度 | string | '100%' | | contentHeight | 编辑器内容区域高度（像素） | number | 300 | | options | UEditor 配置选项 | UEditorConfig | - | | disabled | 是否禁用编辑器 | boolean | false |

类型定义

import {
    UEditorConfig,
    UEditorInstance,
    UEditorGlobal,
    UploadResult
} from '@reskin/ueditor';

注意事项

1. 必须在 angular.json 中正确配置 UEditor 静态资源路径
2. 首次加载 UEditor 脚本需要时间，编辑器会在加载完成后才可用
3. 显示用户输入的富文本内容时，注意 XSS 防护
4. 避免在同一页面创建过多编辑器实例

相关链接

• 完整文档
• UEditor 官方文档

License

MIT