html文本框怎么写表情,js文本框插入表情支持解析代码

特效描述：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 : [email protected]',

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;

}