wangeditor 自定义表情

女爷i 2022-05-13 08:14 520阅读 0赞

## 目的：使用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()

**最终效果：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]**

## 第二步 ：解释说明 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1][]

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

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2][]**

给大家一个找 图片 的地址  [https://www.qqtn.com/article/article\_254186\_1.html][https_www.qqtn.com_article_article_254186_1.html]  直接右键 **另存为** 就好了

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220513/9c2b379ea8ed40939fc53db68d98a6a5.png
[https_www.kancloud.cn_wangfupeng_wangeditor3_460259]: https://www.kancloud.cn/wangfupeng/wangeditor3/460259
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220513/3e1346f1ba0642209ec126c306c13c3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20220513/0160a3bf5bd24762a09706b2c86053c5.png
[https_www.qqtn.com_article_article_254186_1.html]: https://www.qqtn.com/article/article_254186_1.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20220513/3c3933c6656c43c892ce823ff9d50031.png