- 在您的 Angular 项目中安装 CKEditor 5 和自定义插件。您可以使用以下命令进行安装:
npm install --save @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-angular
npm install --save ckeditor5-custom-class
- 在您的组件中导入和定义您的 CKEditor 编辑器:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CustomClassPlugin } from 'ckeditor5-custom-class';
@Component({
selector: 'app-editor',
template: ''
})
export class EditorComponent {
public Editor = ClassicEditor;
public config = {
plugins: [ CustomClassPlugin ],
toolbar: [ 'customClass' ]
};
// ... your event handlers
}
- 在您的编辑器工具栏中添加自定义类的按钮。您可以使用
customClass
工具栏按钮来启用自定义类插件:
public config = {
plugins: [ CustomClassPlugin ],
toolbar: [ 'customClass' ]
};
- 在点击自定义类按钮时动态给选中内容添加自定义类。您可以在
CustomClassPlugin
中添加代码以在按钮点击时应用自定义类:
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export class CustomClassEditing extends Plugin {
static get requires() {
return [ CustomClassUI ];
}
init() {
const editor = this.editor;
editor.editing.view.document.on( 'click', ( evt, data ) => {
const target = evt.target;
if ( target.is( 'element' ) ) {
const ui = editor.plugins.get( CustomClassUI );
ui.selectClass( target );
}
} );
}
}
export class CustomClassUI extends Plugin {
static get pluginName() {
return 'CustomClassUI';
}
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'customClass', locale => {