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。