目的:使用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。