Customize CKEditor Classic

Posted 2023-01-31

如何自定义CKEditor Classic

<ckeditor [editor]="Editor" id="Editor" [data]="editorData"></ckeditor>

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
public Editor = ClassicEditor;

这似乎不起作用，我正在尝试根据其文档使用以下语法，但似乎不起作用-

ClassicEditor.create(document.querySelector('#Editor'), 
      toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
      heading: 
        options: [
           model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' ,
           model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' ,
           model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' 
        ]
      ,
    ).then(newEditor => 
        this.Editor= newEditor;

      );

答案

如果要获取数据，有两个选择：

[1） @ViewChild装饰器

在组件中定义@Viewchild：

@ViewChild("myEditor",  static: false ) myEditor: any; 

然后在您的html中：

<ckeditor #myEditor [editor]="editor" [data]="data" [(ngModel)]="data"></ckeditor>

现在，您可以使用以下代码获取数据：

this.myEditor.data

[2）更改事件

将以下行导入您的组件中：

import  ChangeEvent  from "@ckeditor/ckeditor5-angular/ckeditor.component";

在组件中定义名为retrieveddata的变量以存储数据

retrieveddata: string = null;

将以下方法作为chagneEvent放入组件中>

public onChange( editor : ChangeEvent) 
 const data = editor.getData();
 this.retrieveddata=data;

然后在您的HTML中：

<ckeditor [editor]="editor" [data]="data" [(ngModel)]="data" (change)="onChange($event)"></ckeditor>
现在，您的数据存储在retrieveddata变量中。控制台查看。

StackBlitz Here。

[DEMO（检查浏览器的控制台）]