說到編輯器，不得不多嘮叨幾句。免費(fèi)編輯器可是數(shù)不勝數(shù)，ckeditor是其中做的比較好的一款。今天主要講解下如何在ckeditor中自定義模板實(shí)現(xiàn)快速編輯文章的煩煩噶。示例見圖片。

因目前項(xiàng)目需求，有幾類經(jīng)常用到的發(fā)文格式，比如通知、公示等。為了方便網(wǎng)站實(shí)際使用者的用戶體驗(yàn)，特定制幾個(gè)發(fā)文模板出來，提高工作效率。

聽起來很cool，其實(shí)很簡單。

ckedtior中有plugin機(jī)制，默認(rèn)的下載包中會(huì)有一個(gè)插件叫做“templates”，具體路徑在ckeditor/plugins下邊。你會(huì)找到一個(gè)“templates”的文件夾，里邊包含了兩個(gè)文件夾dialogs和templates。

dialogs文件夾包包含的文件是彈出框的必須文件，這個(gè)主要用來做彈出層，具體見示例圖片。

另外一個(gè)文件夾是我們關(guān)注的重點(diǎn)。打開templates文件夾，images是預(yù)覽圖，你可以定制一個(gè)預(yù)覽圖。為了不影響dialogs(彈出框的css等，當(dāng)然你也可以定制這個(gè))，建議將你要放的image設(shè)置為100x70(寬x高)像素。另外一個(gè)文件是default.js，我們需要修改這個(gè)文件。先備份一下文件。隨便找一個(gè)編輯器，打開這個(gè)js文件。js的結(jié)構(gòu)還是蠻清晰的——關(guān)注這么幾個(gè)變量：title、image、description、html。我詳細(xì)說一下這幾個(gè)變量的用處：

title：標(biāo)題，你可以更改為你需要的標(biāo)題，比如“通知”;

image：圖片，填寫你的圖片所在的路徑;因js函數(shù)方法中寫好了默認(rèn)的路徑為templates/images/，所以你只需要寫上圖片的名字即可，比如 tongzhi.png;

description：描述，這個(gè)模板是干什么用的，簡單描述一下;

html：這個(gè)是預(yù)定義模板的html代碼;將你設(shè)計(jì)好的html代碼比如一個(gè)“定制內(nèi)容”加入進(jìn)去;同時(shí)注意一件事，最好是將html代碼壓縮一下。

保存你修改后的文件，進(jìn)入后臺(tái)添加文章頁面，點(diǎn)擊template按鈕，就可以看到你自定義的模板啦。