关于javascript:通用组件支持插入自定义表情的评论组件

可插入表情的评论框 git 地址：，通用版本 Vue 版本

技术细节请看：思否地址，

因为技术点基本一致，所以就不过多的记录技术点，次要讲下用法，想看技术点的麻烦移步下面掘金地址。

最近是因为有一个是后端同学在保护的基于 layui 我的项目须要用到评论组件，之前写的评论组件是基于 Vue 的他们用不了，总不能用 vue 帮他们重构吧，但也不至于只有一个评论组件就去引入整个富文本的组件吧，所以特意给他们写了一个通用版的评论组件。

demo 地址

字数的限度都是基于字符长度进行判断
不兼容 IE 低版本
评论中会带有标签，例如回车会转为 div 标签, 表情包是利用 img 标签插入，空格为 &nbsp
表情会被解析为 4 个字符，空格与回车尽管会被转换，然而解析的时候回车会被转换成 2 个字符，空格转换成 1 个
若要起始状态为暗藏，请设置完 initStatus 为 false 后在 el 节点上设置 display：none，不然将会有闪动景象
尽量不要一次性显示多个评论框，最好每次一个
款式能够自行笼罩，节点也可自行添加，然而根本模板节点必须有，不然会找不到节点导致报错

el: 某个元素下（必须，且为 id）
emoticon：表情包列表（必须，临时只反对数组模式）
limtText：评论字节长度限度，传入 0 为不限度（留神是字节长度！！！默认为 0，换行为 2 个字节，空格为 1 个字节，表情为 4 个字节）
iconWidth：插入的表情宽度，默认是 30px
iconHeight：插入的表情高度，默认是 30px
initStatus：起始状态 true 显示 false 暗藏
info: 携带信息（可用于 id 传递）
changeEvent: 监听输出办法，有一个参数为以后输出内容
submitEvent：提交办法，有 4 个参数 1）是否出错 2）错误信息 3）输出内容 4) 携带信息对应 info

show：显示该评论框
hide：暗藏该评论框

把 js 与 css 文件下载下来后，引入相应的 js 与 css 下载地址
```
<link rel="stylesheet" href="./cmt.css">
<script src="./cmt.js"></script>
```

引入根底的 html 模版 (最外层 id 可随便指定，外面 html 构造需如下)

     <div id="cmt_wapper" >
       <div class="cmt_box">
         <p class="content_edit"></p>
         <div class="handle_list">
           <img class="em_icon" src="//www1.pconline.com.cn/20200929/pgc/cmt/icon.png" />
           <div class="btn_submit"> 公布 </div>
         </div>
       </div>
     </div>

创立评论组件（每个评论组件需实例化一次，实例化时需传递一个对象作为参数，对象属性请看上方参数阐明）

<script >
  new PgcCmt({
       el: 'cmt_wapper',
       initStatus: false,
       emoticon: imgList,
       changeEvent: (text) => {console.log('输入 text', text)
       },
       submitEvent: (err, msg, text, info) => {console.log('提交', err, msg, text, info)
           if(err){alert('提交失败，请关上 F12 控制台查看')
           }else{alert('提交胜利，请关上 F12 控制台查看')
           }
       }
   })
</script>

有改良倡议，欢送斧正交换~

关于javascript:通用组件支持插入自定义表情的评论组件

成果展现

组件阐明

实例参数阐明

实例办法

应用办法