wangeditor 自定义 表情

目的：使用wangeditor编辑器，自定义表情

注：我使用的是vue + webpack 来做的。不过这个和我们这篇博客要说的没有任何关系。

第一步：先上代码（至于js自己导入）

1-1 html (这里使用了，菜单和内容区域分离，建议这样使用)

<div id="div1" class="toolbar"></div>

<div id="div2" class="text"><p>请输入内容</p></div>

1-2 js （这里有一点可能看不懂，下面我会解释）

 var editor = new E('#div1', '#div2') 
 editor.customConfig.emotions = this.emoji
 editor.create()

最终效果：

第二步 ：解释说明

2-1：从官方文档上 https://www.kancloud.cn/wangfupeng/wangeditor3/460259 我们可以看出来，所谓的表情，其实就是一个json，里面包含了 title type content 而这个content 里面又有src 和 alt。 既然这个值是等于json，那么为了代码的简洁我们可以把这个json提取出来，在去用js把它给读出来赋值在 api 的后面。 也就是上面的 this.emoji ,其实就是一个数组。

2-2：官方上面给了两个地址。当然我们还可以自定义任何表情比如 蘑菇头

给大家一个找 图片 的地址  https://www.qqtn.com/article/article_254186_1.html  直接右键 另存为 就好了

还要说明一点的是。如果你想使用gif 图片的话。是需要改变大小的，因为原始大小一般都很大。我这里是使用ps。