從`v2.1.0`版本開始，wangEditor支持使用**表情包**的方式來配置表情圖片。此前需要一個一個配置表情圖片的方式，我自己都覺得很難受，好在現在已經OK了。 ---- **第一，表情包是什么鬼？** 這里的表情包，其實就是一段`js`代碼，總體看來是一個數組，數組內的每個元素都是一個對象，格式如下： ```js // 整體看來是一個數組，數組每個元素都是一個對象 [ { // icon 的屬性值時該表情的圖片地址，'icon'這個屬性名，也可以用'url'來代替 'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif', // value 的屬性值是表情的『值』，即通過這個『值』即可對應到某個特定的表情 'value': '[草泥馬]' }, { 'icon': '......', 'value': '...' }, { 'icon': '......', 'value': '...' } ] ``` 你還可以參考一下新浪的表情包：https://api.weibo.com/2/emotions.json?source=1362404091 ，還有這個：http://yuncode.net/code/c_524ba520e58ce30 下文中所說的『表情包』需要的就是上述的一段js代碼而已。 --- **第二，通過 `editor.config.emotions` 自定義配置表情** 代碼如下，注意看注釋 ```js var editor = new wangEditor('editor-trigger'); // 配置自定義表情，在 create() 之前配置 editor.config.emotions = { // 支持多組表情 // 第一組，id叫做 'default' 'default': { title: '默認', // 組名稱 data: './emotions.data' // 服務器的一個json文件url，例如官網這里配置的是 http://www.wangeditor.com/wangEditor/test/emotions.data }, // 第二組，id叫做'weibo' 'weibo': { title: '微博表情', // 組名稱 data: [ // data 還可以直接賦值為一個表情包數組 // 第一個表情 { 'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif', 'value': '[草泥馬]' }, // 第二個表情 { 'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif', 'value': '[神馬]' } // 下面還可以繼續，第三個、第四個、第N個表情。。。 ] } // 下面還可以繼續，第三組、第四組、、、 }; editor.create(); ``` ---- **第三，可以使用 `editor.config.emotionsShow` 來配置顯示方式** 編輯器默認情況下將`editor.config.emotionsShow`賦值為`icon`，你也可以將該配置修改為`value`，如下代碼： ```js var editor = new wangEditor('editor-trigger'); // 將顯示方式改為 value ，要在 create() 之前修改 editor.config.emotionsShow = 'value'; editor.create(); ``` 兩者有何區別呢？ 當`editor.config.emotionsShow = 'icon'`時，插入的表情會顯示真正的圖片，獲取編輯器的源碼時，也會是一個圖片，如下圖：   當`editor.config.emotionsShow = 'value'`時，插入的表情會顯示`value`，獲取編輯器的源碼時，也會是`value`值，如下圖：   ---- 如果配置的表情圖標取不到圖片，瀏覽器的控制臺會有錯誤提示，注意查看。