vue emoji编辑器

1.显示emoj

// WxTextList :["微笑", "撇嘴", "色", "发呆", "得意", "流泪"]；

//  图片放在images => wx 下   名称是 ‘QQ0001 QQ0002 ...’

for (let i in this.WxTextList) {
  let x = parseInt(i) + 1;
  let imgIndex = (x > 99 ? '0' + x : (x <= 99 && x >= 10 ? '00' + x : '000' + x));
  let url = require('../../../images/wx/QQ' + imgIndex + '.png');    //加载图片  直接放路劲加载失败
  let item = {
    img: url,
    title: this.WxTextList[i]
  };
  this.WXList.push(item)
}

 

2.编辑框 我使用的是 easyEditor.js
 a.首先是引用 js

 b.

//编辑框

 c. emoji的点击  

insertImg:function($even){    //emoji的点击
 let editor = easyEditor('easyEditor');  //easyEditor：编辑框ID
 editor.insertEmoji({
   src: $even.target.src,   //emoji的src
   remark: $even.target.title,  //emoji 的文字描述
   data : {
     id : 44
   }
 });
}

easyEditorClick：function(){    //编辑框的点击获得焦点

let editor = easyEditor('easyEditor');   

editor.focus();
}

 

submit:function(){  //提交时 转为 文字

var data = editor.getContent({
   emojiSign: ['[',']'], //表情分隔符
   blockSign: '%' //行块分隔符
});
var text = data.text
showBox.innerHTML = htmlEncode(text);

}

 

//正则转换
function htmlEncode(html) {
   var temp = document.createElement("div");
   (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
   var output = temp.innerHTML;
   temp = null;
   return output;
}