CKEditor 5如何添加可视化/文本切换按钮实现HTML视图切换

你需要额外引入SourceEditing插件实现可视化编辑与HTML源码视图切换，该功能没有内置在ClassicEditor默认预设中，配置步骤如下：

步骤1：安装插件（npm包管理场景） #

执行安装命令：

npm install @ckeditor/ckeditor5-source-editing

如果使用预构建CDN版本，请确认引入的CDN资源包含SourceEditing模块。

步骤2：引入并注册插件 #

在代码中先引入插件：

import { Mention } from '@ckeditor/ckeditor5-mention';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';

然后在编辑器配置的plugins数组中加入该插件。

步骤3：添加工具栏项 #

在toolbar.items数组中加入sourceEditing项即可显示切换按钮。

修改后的完整配置参考：

ClassicEditor.create( document.querySelector( '.editor' ), {
    plugins: [ Mention, SourceEditing ],
    removePlugins:['Title'],
    toolbar: {
        items: [
            "sourceEditing",
            "alignment:left", "alignment:right", "alignment:center", "alignment:justify", "alignment", "undo", "redo", "blockQuote", "bold",  "link", "ckfinder", "selectAll", "heading", "horizontalLine", "htmlEmbed",  "indent", "outdent", "italic",  "numberedList", "bulletedList", "mediaEmbed", "pageBreak", "specialCharacters", "restrictedEditingException", "strikethrough", "subscript", "superscript", "insertTable", "tableColumn", "tableRow", "mergeTableCells", "tableCellProperties", "tableProperties", "textPartLanguage", "todoList", "underline"
        ],
        shouldNotGroupWhenFull: true,
    },
    mention: {
        feeds: [
            {
                marker: '@',
                feed: [ '@test' ],
            },
        ],
    },
    language: 'en',
} )
.then( editor => {
    window.editor = editor;
} )
.catch( error => {
    console.error( error );
} );

内容的提问来源于stack exchange，提问作者Heena Naaz