CKEditor添加colorbutton插件报错、按钮不显示文本区消失如何解决？

1. 你当前使用的CKEditor安装包默认没有内置colorbutton插件，也没有手动将插件文件放置到指定加载路径下，所以请求插件文件时返回404错误。
2. textarea消失是CKEditor初始化的正常逻辑：执行CKEDITOR.replace()时会默认隐藏原textarea元素，再渲染富编辑器界面。但因为依赖的colorbutton插件加载失败，编辑器初始化流程中断，最终既没有渲染出编辑器组件，原textarea也处于隐藏状态，就出现了文本框消失的现象。

• 首先确认colorbutton的依赖插件panelbutton、floatpanel也一起准备好，colorbutton无法独立运行，缺少依赖也会导致加载失败。
• 将colorbutton、panelbutton、floatpanel三个插件文件夹放置到CKEditor的插件目录下，对应你报错中的路径为http://localhost/your_recipes_app3/assets/js/ckeditor/plugins/，需保证每个插件文件夹的命名和内部结构正确，文件夹下直接存在plugin.js文件，不要嵌套多余的层级。
• 若你自定义了CKEditor的工具栏配置，需要额外将颜色按钮配置到工具栏中，示例配置如下：

CKEDITOR.replace( 'recipe_description', {
  extraPlugins: 'colorbutton',
  toolbar: [
    // 此处保留你原有的其他工具栏配置
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
  ]
} );

• 部署完成后可以直接在浏览器地址栏输入报错中的colorbutton的plugin.js访问路径，确认可以正常加载文件，排除文件夹权限、路径拼写错误问题。
• 更稳妥的方案是直接自定义构建CKEditor安装包，构建时勾选colorbutton插件，会自动打包所有依赖，替换现有CKEditor目录即可，无需手动处理插件依赖问题。

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