本文實(shí)例講述了CKeditor4 字體顏色功能配置方法。分享給大家供大家參考，具體如下：

今天動(dòng)手ckeditor編輯器的時(shí)候發(fā)現(xiàn)工具欄上并沒(méi)有可以更改字體顏色和背景顏色的按鈕，所以我上網(wǎng)搜了下，網(wǎng)上特別多config.js文件配置的代碼了，看得眼花繚亂的我選擇把全部代碼都復(fù)制下來(lái)。結(jié)果當(dāng)然是沒(méi)用的……一開(kāi)始我還能有文本框、工具欄，到后來(lái)就變成什么都沒(méi)有了。

后來(lái)我找到了ckeditor的文檔：https://ckeditor.com/docs/index.html，找到里面的指南

在搜索框里搜索text color ，然后就出現(xiàn)我想要的東西了

點(diǎn)擊color button 來(lái)到https://ckeditor.com/cke4/addon/colorbutton頁(yè)面，會(huì)跳出下面這個(gè)東西，滑到下面download它

注意 這下面有兩個(gè)需要添加的依賴（面板按鈕和UI按鈕），然后點(diǎn)進(jìn)去依樣照葫蘆的下載另外兩個(gè)依賴 ，解壓縮，放在ckeditor目錄下的plugins目錄里

這里有個(gè)注意的點(diǎn)：你要確定你一點(diǎn)開(kāi)目錄就能看到.js的配置文件，要不然是網(wǎng)頁(yè)看不到文本框的

然后 在config.js文件里加上：

config.extraPlugins = 'button,panelbutton,colorbutton';

大功告成！這就有我要的設(shè)置文本顏色和背景顏色的工具了

補(bǔ)充：

官方給出的Demo在線演示，配置字體顏色擴(kuò)展是在當(dāng)前頁(yè)面的js調(diào)用中實(shí)現(xiàn)的（而不是config.js文件中實(shí)現(xiàn)），代碼如下：

<script data-sample="1">  CKEDITOR.replace( 'editor1', {    height: 250,    extraPlugins: 'colorbutton,colordialog'  } );</script><script data-sample="2">  CKEDITOR.replace( 'editor2', {    height: 250,    extraPlugins: 'colorbutton',    colorButton_colors: 'CF5D4E,454545,FFF,CCC,DDD,CCEAEE,66AB16',    colorButton_enableAutomatic: false  } );</script>

希望本文所述對(duì)大家CKEDitor富文本編輯器開(kāi)發(fā)有所幫助。