CKEditor 5工具栏指定按钮缺失原因及安装方法咨询

原因分析 #

• CKEditor 5 的预构建编辑器包（比如你使用的 decoupled-document）仅默认包含核心和高频使用的插件，Code、SpecialCharacters、CodeBlock 这类属于可选功能的插件，并未被包含在基础预构建包中。
• 工具栏配置里的按钮必须对应已加载的插件，未加载插件的按钮会被编辑器自动忽略，所以这些按钮不会在工具栏中显示。

解决办法 #

方法一：使用CDN加载额外插件（快速验证场景） #

方案1：切换到包含全量插件的预构建包

直接替换CDN链接为super-build版本，该包包含绝大多数常用插件，无需额外配置即可显示你需要的按钮：

<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/super-build/ckeditor.js"></script>

方案2：单独加载缺失的插件

如果不想切换到全量包，可以单独加载每个所需插件的CDN资源（注意版本必须和主编辑器版本一致，这里为38.1.1）：

<!-- 主编辑器核心 -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/decoupled-document/ckeditor.js"></script>
<!-- 加载Code插件 -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/code/ckeditor.js"></script>
<!-- 加载SpecialCharacters插件 -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/special-characters/ckeditor.js"></script>
<!-- 加载CodeBlock插件 -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/code-block/ckeditor.js"></script>

然后在编辑器配置中注册这些插件：

DecoupledEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ 
            MyCustomUploadAdapterPlugin,
            CKEditor5.code.Code,
            CKEditor5.specialCharacters.SpecialCharacters,
            CKEditor5.specialCharacters.allSpecialCharacters, // 加载全量特殊字符集
            CKEditor5.codeBlock.CodeBlock
        ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code',
                '|', 'alignment', 'specialCharacters',
                'link', 'uploadImage', 'blockQuote', 'codeBlock', 'mediaEmbed', 'insertTable',
                '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent'
            ]
        }
    } )
    .then( editor => {
        const toolbarContainer = document.querySelector( '#editor-toolbar-container' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );
    } );

方法二：自定义构建编辑器（生产环境推荐） #

如果需要精确控制插件集合，减少打包体积，推荐使用CKEditor5的构建工具自定义编辑器：

1. 打开CKEditor5官方构建工具，选择基础编辑器（如DecoupledEditor），添加Code、SpecialCharacters、CodeBlock等所需插件。
2. 下载生成的自定义构建包，替换项目中的CDN资源为本地构建文件。
3. 按照自定义构建包的文档配置编辑器，此时工具栏中配置的按钮即可正常显示。

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