CKeditor4 字體顏色功能配置方法教程
本文實(shí)例講述了CKeditor4 字體顏色功能配置方法。分享給大家供大家參考,具體如下:
今天動(dòng)手ckeditor編輯器的時(shí)候發(fā)現(xiàn)工具欄上并沒有可以更改字體顏色和背景顏色的按鈕,所以我上網(wǎng)搜了下,網(wǎng)上特別多config.js文件配置的代碼了,看得眼花繚亂的我選擇把全部代碼都復(fù)制下來。結(jié)果當(dāng)然是沒用的……一開始我還能有文本框、工具欄,到后來就變成什么都沒有了。
后來我找到了ckeditor的文檔:https://ckeditor.com/docs/index.html,找到里面的指南
在搜索框里搜索text color ,然后就出現(xiàn)我想要的東西了
點(diǎn)擊color button 來到https://ckeditor.com/cke4/addon/colorbutton頁面,會(huì)跳出下面這個(gè)東西,滑到下面download它
注意 這下面有兩個(gè)需要添加的依賴(面板按鈕和UI按鈕),然后點(diǎn)進(jìn)去依樣照葫蘆的下載另外兩個(gè)依賴 ,解壓縮,放在ckeditor目錄下的plugins目錄里
這里有個(gè)注意的點(diǎn):你要確定你一點(diǎn)開目錄就能看到.js的配置文件,要不然是網(wǎng)頁看不到文本框的
然后 在config.js文件里加上:
config.extraPlugins = 'button,panelbutton,colorbutton';
大功告成!這就有我要的設(shè)置文本顏色和背景顏色的工具了
補(bǔ)充:
官方給出的Demo在線演示,配置字體顏色擴(kuò)展是在當(dāng)前頁面的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>
希望本文所述對大家CKEDitor富文本編輯器開發(fā)有所幫助。
- 詳解Laravel5.6 Passport實(shí)現(xiàn)Api接口認(rèn)證
- 在Laravel5.6中使用Swoole的協(xié)程數(shù)據(jù)庫查詢
- 淺析Laravel5中隊(duì)列的配置及使用
- Laravel5框架自定義錯(cuò)誤頁面配置操作示例
- Laravel5中Cookie的使用詳解
- Laravel5中contracts詳解
- Laravel5權(quán)限管理方法詳解
- Laravel5中防止XSS跨站攻擊的方法
- laravel5.4+vue+element簡單搭建的示例代碼
- 手把手教你 CKEDITOR 4 擴(kuò)展插件制作
- CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
- Laravel5.6框架使用CKEditor5相關(guān)配置詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊復(fù)制功能具體代碼(JS訪問剪貼板相關(guān))
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)點(diǎn)擊復(fù)制功能(JS訪問剪貼板相關(guān))的相關(guān)資料,復(fù)制功能指的是將一個(gè)文本或者圖片等資源從一個(gè)位置通過復(fù)制的方式再次拷貝到另一個(gè)位置,需要的朋友可以參考下2023-10-10js replace替換字符串同時(shí)替換多個(gè)方法
這篇文章主要介紹了js replace替換字符串同時(shí)替換多個(gè)方法 的相關(guān)資料,需要的朋友可以參考下2018-11-11基于 Immutable.js 實(shí)現(xiàn)撤銷重做功能的實(shí)例代碼
這篇文章主要介紹了基于 Immutable.js 實(shí)現(xiàn)撤銷重做功能及一些需要注意的地方,需要的朋友可以參考下2018-03-03JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能分析
這篇文章主要介紹了JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了JS基于正則表達(dá)式的表單驗(yàn)證功能原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式
這篇文章主要介紹了js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換...2007-07-07JavaScript數(shù)組reduce()方法的語法與實(shí)例解析
js函數(shù)中有三個(gè)在特定場合很好用的函數(shù):reduce(),map(),filter(),這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce()方法的相關(guān)資料,需要的朋友可以參考下2021-07-07