特效描述：js文本框 插入表情 支持解析代码。js文本框点击选择插入表情，支持代码解析输出。
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
easyEditor
@某某
获取内容Html
获取内容Text
var editor = new EasyEditor('easyEditor');
//表情
var emojiBtn = document.getElementById('emoji_btn');
var emojiBox = document.getElementById('emoji_list');
var emojiList = emojiBox.getElementsByTagName('img');
//辦定事件添加表情
for(var i = 0; i < emojiList.length; i++) {
addEvent(emojiList[i], 'click', function() {
var src = this.getAttribute('src');
editor.insertEmoji({
src : src,
remark : '笑脸'
}); //添加表情
emojiBox.style.display = 'none';
});
}
//At人
var atBtn = document.getElementById('atBtn');
addEvent(atBtn, 'click', function() {
//添加At人
editor.insertBlock({
text : [emailprotected]',
color : '#f00'
});
});
var showBox = document.getElementById('show');
//获取HTML
var htmlBtn = document.getElementById('getHtmlBtn');
addEvent(htmlBtn, 'click', function() {
showBox.innerHTML = htmlEncode(editor.getContent(false));
});
//獲取text
var textBtn = document.getElementById('getTextBtn');
addEvent(textBtn, 'click', function() {
showBox.innerHTML = htmlEncode(editor.getContent(true));
});
//表情面板顯示
addEvent(emojiBtn, 'click', function() {
emojiBox.style.display = 'flex';
});
//表情面板消失
maskClick(emojiBox, function() {
emojiBox.style.display = 'none';
});
function maskClick(el, func) {
var str = str == undefined ? 'maskClick' : str;
addEvent(document, 'mouseup', function(event) {
var event = event || window.event;
var target = event.target;
if(!isParent(target, el)) {
func && func();
}
});
}
function isParent(obj, parentObj) {
while(obj != undefined && obj != null && obj.tagName != 'HTML' && obj.tagName.toUpperCase() != 'BODY') {
if(obj == parentObj) {
return true;
}
obj = obj.parentNode;
}
return false;
}
//事件辦定
function addEvent(element, type, callback) {
if(element.addEventListener) {
element.addEventListener(type, callback, false);
} else if(element.attachEvent) {
element.attachEvent('on' + type, callback)
}
}
//正则转换
function htmlEncode(strHTML){
var strTem = "";
if(strHTML.length == 0) return "";
strTem = strHTML.replace(/&/g, ">");
strTem = strTem.replace(/
strTem = strTem.replace(/>/g, ">");
strTem = strTem.replace(/ /g, "");
strTem = strTem.replace(/\'/g, "'");
strTem = strTem.replace(/\"/g, """);
strTem = strTem.replace(/\n/g, "");
return strTem;
}
