CKEditor4工具栏字体颜色设置按钮不显示的问题咨询

云原生阿岚

2026-8-15

解决CKEditor4文本颜色按钮不显示的问题

问题出在你没有将文本颜色相关的插件添加到extraPlugins配置中。CKEditor4的TextColor和BGColor工具栏按钮依赖对应的textcolor和bgcolor插件，这两个插件并非默认加载，必须显式声明。

修正步骤：

在config的extraPlugins字段中，添加textcolor和bgcolor插件（注意插件名是小写）
保留工具栏配置中的['TextColor', 'BGColor']不变

修正后的完整代码：

import { CKEditor } from 'ckeditor4-react';
export default function Editor() {

let config={
    toolbar: [
        [ 'Source' ],
        [ 'Styles', 'Format', 'Font', 'FontSize' ],
        [ 'Bold', 'Italic' ],
        [ 'Undo', 'Redo' ],
        ['TextColor', 'BGColor'],
        [ 'About' ]
    ],
    extraPlugins: 'easyimage,textcolor,bgcolor', // 新增textcolor和bgcolor插件
    removePlugins: 'image',
    cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
    cloudServices_tokenUrl:
        'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt'
}
let hello=()=>{
    console.log("hoi");
}

return (
    <CKEditor
        config={config}
        initData="<p>Hello from CKEditor 4!</p>"
        onBlur={hello}
        onInstanceReady={() => {
            console.log('Editor is ready!');
        }}
    />
)
}