npm package: @reskin/ueditor
Description: 基于百度 UEditor 封装的 Angular 富文本编辑器组件。
Latest version: 0.1.0

# @reskin/ueditor

基于百度 UEditor 封装的 Angular 富文本编辑器组件。

## 特性

- ✅ 完整支持 Angular 响应式表单 (ControlValueAccessor)
- ✅ 支持模板驱动表单 (ngModel)
- ✅ 自定义文件上传接口集成
- ✅ 灵活的配置选项
- ✅ 禁用状态支持
- ✅ TypeScript 类型定义完整
- ✅ 自动资源管理和清理

## 安装

```bash
npm install @reskin/ueditor
```

## 配置

在 `angular.json` 中添加 UEditor 静态资源：

```json
{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/@reskin/ueditor/static/",
                "output": "/assets/ueditor/"
              }
            ]
          }
        }
      }
    }
  }
}
```

## 使用

### 导入模块

```typescript
import { RkUeditorModule } from '@reskin/ueditor';

@NgModule({
    imports: [RkUeditorModule]
})
export class YourModule { }
```

### 基础用法

```typescript
import { Component } from '@angular/core';

@Component({
    selector: 'app-example',
    template: `<rk-ueditor [(ngModel)]="content"></rk-ueditor>`
})
export class ExampleComponent {
    content = '<p>初始内容</p>';
}
```

### 响应式表单

```typescript
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>']
        });
    }
}
```

### 自定义配置

```typescript
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` |

### 类型定义

```typescript
import {
    UEditorConfig,
    UEditorInstance,
    UEditorGlobal,
    UploadResult
} from '@reskin/ueditor';
```

## 注意事项

1. 必须在 `angular.json` 中正确配置 UEditor 静态资源路径
2. 首次加载 UEditor 脚本需要时间，编辑器会在加载完成后才可用
3. 显示用户输入的富文本内容时，注意 XSS 防护
4. 避免在同一页面创建过多编辑器实例

## 相关链接

- [完整文档](../../web/src/assets/doc/extends/富文本框.md)
- [UEditor 官方文档](http://fex.baidu.com/ueditor/)

## License

MIT