快捷導(dǎo)航

CKeditor4 字體顏色功能配置方法教程

更新時(shí)間：2019年06月26日 10:58:54 作者：Chueng_to

這篇文章主要介紹了CKeditor4 字體顏色功能配置方法,結(jié)合圖文與實(shí)例的形式分析了CKeditor4 添加字體顏色擴(kuò)展功能的相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下

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

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

您可能感興趣的文章:

相關(guān)文章

利用google提供的API(JavaScript接口)獲取網(wǎng)站訪問者IP地理位置的代碼詳解
利用google提供的API(JavaScript接口)獲取網(wǎng)站訪問者IP地理位置
2010-07-07
JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下
2019-02-02
JavaScript中使用正則匹配多條，且獲取每條中的分組數(shù)據(jù)
該問題在使用Ajax遠(yuǎn)程獲取某網(wǎng)頁(yè)數(shù)據(jù)時(shí)經(jīng)常遇見如果目標(biāo)頁(yè)面是XML，就好辦了，實(shí)用XMLDOM可以很輕松完成任務(wù)。
2010-11-11
JavaScript實(shí)現(xiàn)刪除,移動(dòng)和復(fù)制文件的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)刪除,移動(dòng)和復(fù)制文件的方法,涉及javascript使用ActiveXObject控件操作文件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
TypeScript之元組、數(shù)組及as?const的使用
TypeScript中的元組、數(shù)組和as?const關(guān)鍵字對(duì)于類型安全性和代碼可讀性非常重要,本文主要介紹了TypeScript之元組、數(shù)組及as?const的使用,感興趣的可以了解一下
2023-10-10
JS獲取URL中參數(shù)值（QueryString）的4種方法分享
今天碰到要在一個(gè)頁(yè)面獲取另外一個(gè)頁(yè)面url傳過來(lái)的參數(shù)，一開始很本能的想到了用 split("?")這樣一步步的分解出需要的參數(shù)。后來(lái)想了一下，肯定會(huì)有更加簡(jiǎn)單的方法的！所以在網(wǎng)上找到了幾個(gè)很又簡(jiǎn)單實(shí)用的方法，mark下。
2014-04-04
JavaScript實(shí)現(xiàn)隨機(jī)產(chǎn)生字符串的方法分享
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)隨機(jī)產(chǎn)生字符串的方法，文中的示例代碼簡(jiǎn)潔易懂，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-11-11
Chrome插件(擴(kuò)展)開發(fā)全攻略(完整demo)
Chrome插件是一個(gè)用Web技術(shù)開發(fā)、用來(lái)增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個(gè)由HTML、CSS、JS、圖片等資源組成的一個(gè).crx后綴的壓縮包，本文給大家分享一個(gè)Chrome插件(擴(kuò)展)開發(fā)全攻略完整demo，感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
2021-05-05
javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法,可實(shí)現(xiàn)顯示一些按鈕如果點(diǎn)擊了,按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼]點(diǎn)”的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05
javascript 一些用法小結(jié)
JavaScript的一些用法總結(jié)
2009-09-09