ckeditor4添加字体颜色功能

发布日期： 2025-01-16 11:29 阅读量： 122 来源： 互联网

今天碰到个问题，需要修改原有的ckeditor，添加字体颜色和字体背景颜色功能，这个也不可能自己写，

所以百度吧，找到几个直接改config的，试过都不行，

再找到以下的文章，按照要求操作了，结果ckeditor.js报错，缺少一个函数，运行不了

完蛋，没办法从官网找新版下载重整，看首页有一个lts版本，下个stand版，结果颜色按纽出来了，但是运行不全，控制台报错说没有授权？这个不好搞了，再找，发现还有一个非lts版的，再试试呗，结果可行，出来了，运行也正常，但是弹出提示要求升级为lts最新版，这个不好办，lts版刚试过要求授权，以为无法解决了，按照这个提示再百度一下，可以通过配置把升级提示关闭，2个小时过去了，到此达到目标，任务完成。

以下是操作步骤，

1. **下载插件**：访问CKeditor4的官方网站（https://ckeditor.com/cke4/addon/colorbutton）并下载`colorbutton`插件。同时，由于`colorbutton`依赖于`button`和`panelbutton`，你也需要下载这两个插件。将下载的zip文件解压，并将解压后的文件夹移动到CKeditor4的`plugins`目录下。 2. **配置`config.js`**：打开`config.js`文件，这是CKeditor4的全局配置文件。在此文件中，你需要添加`extraPlugins`配置项，将`colorbutton`、`button`和`panelbutton`列入其中，如下所示： ```javascript config.extraPlugins = 'button,panelbutton,colorbutton'; ``` 这行代码告诉CKeditor4加载这三个插件，使字体颜色功能可用。 3. **配置颜色选择**：除了上述基本配置，你还可以自定义颜色选择。例如，如果你想限制用户只能选择特定的颜色，可以在`config.js`中设置`colorButton_colors`属性，如下： ```javascript config.colorButton_colors = 'CF5D4E,454545,FFF,CCC,DDD,CCEAEE,66AB16'; ``` 这里的颜色值是十六进制颜色代码，每个代码代表一种颜色。 4. **禁用自动填充颜色**：如果你希望禁用自动填充颜色功能，可以通过设置`colorButton_enableAutomatic`为`false`来实现： ```javascript config.colorButton_enableAutomatic = false; ``` 5. **在页面中配置**：如果你不希望在`config.js`中全局配置，也可以在每个CKeditor实例的创建代码中进行配置，如官方Demo所示。在HTML中添加如下JavaScript代码： ```html <script> CKEDITOR.replace('editor1', { height: 250, extraPlugins: 'colorbutton,colordialog' }); CKEDITOR.replace('editor2', { height: 250, extraPlugins: 'colorbutton', colorButton_colors: 'CF5D4E,454545,FFF,CCC,DDD,CCEAEE,66AB16', colorButton_enableAutomatic: false }); </script> ``` 这里，我们创建了两个CKeditor实例，第一个实例使用默认颜色选择，第二个实例则进行了自定义颜色和自动填充的配置。通过以上步骤，你可以在CKeditor4中成功启用和配置字体颜色功能。理解并实践这些配置方法将有助于你在实际项目中更好地定制CKeditor4，以满足不同场景的需求。记住，始终参考CKeditor4的官方文档，因为它是获取最新信息和解决问题的最可靠来源。

上一篇：: tp 接收request中header信息配置

ckeditor4添加字体颜色功能

随便看看