tinymce Tinymce富文本

Tinymce富文本。

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

源代码

源代码

代码演示

tinymce Tinymce富文本 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { SFSchema } from '@delon/form';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5. selector: 'form-tinymce-simple',
  6. template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`
  7. })
  8. export class FormTinymceSimpleComponent {
  9. schema: SFSchema = {
  10. properties: {
  11. remark: {
  12. type: 'string',
  13. title: '描述',
  14. ui: {
  15. widget: 'tinymce'
  16. }
  17. }
  18. }
  19. };
  20. constructor(public msg: NzMessageService) { }
  21. submit(value: any) { this.msg.success(JSON.stringify(value)); }
  22. }

API

ui 属性

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