javascript - 在 Angular 2 中使用 CKEditor 的自定义配置文件

Question

我想在 Angular 2 中使用我自己的 CKEditor 配置文件。

执行此操作时

 CKEDITOR.replace('editor', {
            customConfig: '../../admin/app/js/scripts/ck-editor-config.js',
            extraPlugins: 'colorbutton,colordialog,embed'
});

CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

但是我如何在我的组件中获取 CKEDITOR 的实例？

我已经在我的 Angular 2 项目中集成了 CKEditor，但我想更改配置文件，我想添加我自己的自定义配置。请建议我可以做什么？我没有 CKEditor 的实例。

Answer 1

经过多次探索，我明白了:

在 HTML 中使用:

  <div>
       <ckeditor 
                 formControlName="contentBody" 
                 [(ngModel)]="content.contentBody" 
                 [config]="{uiColor: ''}" 
                 [readonly]="false" 
                 debounce="500">
       </ckeditor>
  </div>

将以下代码行添加到您正在使用此CKEditor的组件中。

将 CKEditorModule 和 CKEditorComponent 导入到您的组件中:

import { CKEditorModule, CKEditorComponent } from 'ng2-ckeditor';

创建默认内容:

  this.ckeditorContent = `<p>My HTML</p>`;

现在您可以在组件中的ngAfterViewChecked() Hook 中编写CKEditor的配置:

  ngAfterViewChecked() {

    if (this.contentForm.value.type == 'Html') {


      let editor = this.ckEditor.instance;

      editor.config.height = 200;

      // editor.config.toolbar = [
      //   // { name: 'document', items: ['Source', 'Templates'] },
      //   { name: 'colors', items: ['TextColor', 'BGColor'] }, '/',
      //   { name: 'insert', items: ['Image'] },
      //   { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
      //   // { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] }
      // ]

      editor.config.toolbar =[
          ['Source', '-', 'Bold', 'Italic']
        ];

      editor.config.removeButtons = 'Templates,Find,Replace,Scayt,SelectAll,Form,Radio';

      editor.config.removePlugins = 'elementspath,save,font,Undo,Redo';


    }

  }