[小技巧]如何增減CEditor的表情碼

上一篇的【更簡易使用的HTML Editor–CKEditor】,小喵提到這個簡單好用的HtmlEditor:CKEditor。其中要使用表情碼的時候,覺得內建的表情碼似乎少了些。心想如果能夠自己增減表情碼,對於使用上應該會更活潑生動。於是小喵來研究如何增減表情碼。他總共要修改兩個東西,一個是把使用的表情碼圖形放入指定的資料夾,另一個則是修改設定檔案。以下來詳細介紹如何處理。


緣起

上一篇的【更簡易使用的HTML Editor–CKEditor】,小喵提到這個簡單好用的HtmlEditor:CKEditor。其中要使用表情碼的時候,覺得內建的表情碼似乎少了些。心想如果能夠自己增減表情碼,對於使用上應該會更活潑生動。於是小喵來研究如何增減表情碼。他總共要修改兩個東西,一個是把使用的表情碼圖形放入指定的資料夾,另一個則是修改設定檔案。以下來詳細介紹如何處理。

 

表情碼來源

在介紹如何放表情碼之前,先來提一下一個不錯的表情碼收集網站。這網站中收集各式各樣的表情碼,並且分門別類的整理起來。有興趣的請參考以下的連結自行前往

MSN即時通小圖網

表情符號王

 

圖檔存放位置

準備好要用的表情圖檔後,接著就來找存放的位置。這邊要特別說明一下,由於這些圖未來要在網頁中呈現,建議不要使用中文,請使用英數字來作圖檔的檔名。

表情碼的資料夾,是下載ckeditor解壓縮後,在ckeditor\plugins\smiley\images

因此要對表情碼做增減,第一件事就是把表情碼圖形放在這個資料夾中(要的放進去,不要的刪掉)

 

設定檔修改

除了要把表情碼圖形放上去之外,另外還要修改設定檔,這樣表情碼才會有作用,這個設定檔是:【ckeditor\ckeditor.js】這個檔案。

在檔案中,搜尋【i.smiley_images】,這個是設定有哪些表情碼的圖檔。把您剛剛留在【ckeditor\plugins\smiley\images】的檔名,一一的放在這裡面,如下的設定:

i.smiley_images = ['onion001.gif', 'onion002.gif', 'onion003.gif', 'onion004.gif', 'onion005.gif']

另外,還需要修改第二個變數的內容,請搜尋【i.smiley_descriptions】(應該在剛剛那個變數的隔壁。這裡面要放的是針對表情符號的描述。修改內容如下:

i.smiley_descriptions = ['微笑', '狂笑', '哭哭', '傷心', '我的天']

有了以上的設定後,就扣可以再次去CKEditor的畫面,使用表情符號試試看了。


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat