Question

在Angular中，如何在不加扰HTML的情况下直接在模板中配置CKEditor？

Answer 1

分享我的发现。我没有在互联网中找到这个解决方案

如果要在模板中直接在Angular 2/4/5中配置ckeditor，例如：当在textareas中异步加载数据时会遇到麻烦

模板：

<ckeditor [config]="editorConfig"
          [(ngModel)]="myModel">
</ckeditor>

然后在组件中添加一个配置变量。 e.g：

editorConfig: any = {
    language: this.yourLangService.getLang(),
    uiColor: '#c0c0c0',
    toolbarGroups: [
      { name: 'document', groups: ['mode', 'document', 'doctools'] },
      { name: 'clipboard', groups: ['undo', 'clipboard'] },
      { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
      { name: 'forms', groups: ['forms'] },
      { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
      { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
      { name: 'links', groups: ['links'] },
      { name: 'insert', groups: ['insert'] },
      '/',
      { name: 'styles', groups: ['styles'] },
      { name: 'colors', groups: ['colors'] },
      { name: 'tools', groups: ['tools'] },
      { name: 'others', groups: ['others'] },
      { name: 'about', groups: ['about'] },
    ],
    extraPlugins: 'divarea'
    ,
    removeButtons: 'Source,Save,NewPage,Print,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Image,Flash,
Iframe,About,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,CopyFormatting,RemoveFormat,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Unlink,Smiley,
PageBreak,Blockquote,Outdent,Indent,Superscript,Subscript,Styles,Format',
  }

那是

通过组件变量在HTML模板中设置ckeditor配置

1 个答案: