ckeditor5：添加开发者工具

与ckeditor配套的有一个编辑器开发工具

安装

npm install --save-dev @ckeditor/ckeditor5-inspector

配置

CKEditorInspector.attach(editor);

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [Essentials, Paragraph, Bold, Italic],
    toolbar: ['bold', 'italic']
  })
  .then(editor => {
    console.log('Editor was initialized', editor);
    CKEditorInspector.attach(editor);
  })
  .catch(error => {
    console.error(error.stack);
  });

截图

参考

• https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html
• https://github.com/afeiship/ckeditor-notes/tree/master/03-editor-devtool