Ueditor富文本

Ueditor富文本。

注:第三方小部件默认并未注册,细节见定制小部件

如何使用

安装依赖

由于Tinymce编辑器依赖第三方插件ngx-ueditor,所以使用时应首先安装依赖

yarn add ngx-ueditor

导入模块

  • 使用最新脚手架搭建出的项目提供了第三方控件注册入口: src/app/shared/json-schema/json-schema.module.ts

  • 需将UeditorWidgetJsonSchemaModule中进行声明

export const SCHEMA_THIRDS_COMPONENTS = [UeditorWidget];

@NgModule({
  declarations: SCHEMA_THIRDS_COMPONENTS,
  imports: [
    SharedModule,
    DelonFormModule.forRoot(),
    UEditorModule.forRoot({
      js: [`./assets/ueditor/ueditor.config.js`, `./assets/ueditor/ueditor.all.min.js`],
      // 默认前端配置项
      options: {
        UEDITOR_HOME_URL: './assets/ueditor/'
      }
    }),
  ],
  exports: SCHEMA_THIRDS_COMPONENTS
})
export class JsonSchemaModule {
}

控件注册

  • 将控件注册到WidgetRegistry注册表中

export class JsonSchemaModule {
  constructor(widgetRegistry: WidgetRegistry) {
    widgetRegistry.register(UeditorWidget.KEY, UeditorWidget);
  }
}

导入静态资源

Tinymce大致相同,Ueditor也需要导入一些静态资源文件才可正常运行

  • 根据需要可从 Ueditor Release 下载

  • 将静态资源文件放入config可访问的路径中即完成配置

源代码

源代码

代码演示

基础样例

最简单的用法。

expand codeexpand code
import { Component } from '@angular/core';
import { SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-ueditor-simple',
  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`,
})
export class FormUeditorSimpleComponent {
  schema: SFSchema = {
    properties: {
      remark: {
        type: 'string',
        title: '描述',
        ui: {
          widget: 'ueditor',
        },
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

ui 属性

成员说明类型默认值
[config]前端配置项说明,见官网object-
[loading]初始化提示文本string加载中...
[delay]延迟初始化UEditor,单位:毫秒number300
[change]编辑器内容发生改变时会触发该事件(html: string) => void-