一款支持插入表情的编辑器实现代码(简单思路挺重要)（可以在表情包上编辑文字的软件）原创

随心笔谈2年前发布编辑

143 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

下面是一个表情列表,为了简单我直接在li里面放图片的文件名称，而class 属性用来存放对应的标记

复制代码代码如下:

0.gif

1.gif

2.gif

接下来把上面的 li 变成 img

复制代码代码如下:

var faceDir=”images/”; //配置表情目录

var iframeDocument=null;

var iframeWindow=null;

var isIe=false;

$.each($(“#faceList>li”), function(){ //展现表情

var node=document.createElement(“img”);

node.className=$(this).attr(“class”);

node.src=https://www.jb51.net/article/faceDir+$(this).html();

this.innerHTML=””;

this.appendChild(node);

});

放一个 iframe 用来做编辑器

复制代码代码如下:

先得到 ifame

复制代码代码如下:

iframeWindow=document.getElementById(“Edit”).contentWindow;iframeDocument=document.getElementById(“Edit”).contentWindow.document; iframeDocument.designMode=”On”; //打开iframe 编辑模式

.designMode=”On”; 这个方法还是蛮常见的。刚开始做的时候还想用 textarea 但是textarea不能显示图片。这里在实际过程中发现与 textarea 的一个差异，iframe 内不会自己换行，所以为iframe 添加了一个body设置了一个word-wrap属性

复制代码代码如下:

iframeDocument.write(“”);

下面实现，在iframe 插入图片表情的过程(代码内有注释)

复制代码代码如下:

$(“#faceList>li”).click(function(){

var $this=$(this);

var $thisImg=$(this).find(“img:eq(0)”); //当前点击的表情（IMG标记）

document.getElementById(“Edit”).contentWindow.focus(); //使编辑区域得到焦点

var r=null;

if(document.selection) //处理兼容性问题

{

//把表情放入iframe

r=iframeDocument.selection.createRange();

iframeDocument.selection.empty();

r.pasteHTML($thisImg[0].parentNode.innerHTML.toString());

}

else if(window.getSelection)

{

r=iframeWindow.getSelection().getRangeAt(0);

iframeWindow.getSelection().removeAllRanges();

var node=document.createElement(“img”);

node.className=$thisImg.attr(“class”);

node.src=https://www.jb51.net/article/$thisImg.attr(“src”);

r.surroundContents(node);

}

});

到这里，就完成了插入表情的过程。还有最后一件事情：翻译img 标记

复制代码代码如下:

function GeteEditData()

{

var edit=iframeDocument.getElementsByTagName(“body”)[0].innerHTML;

//在内存中Copy一个该节点副本，以保全文档流格式

var str=new String(edit);

var $content=$(“

“+str+”

“);

var imgNode=$(“#faceList img”);

$.each(imgNode, function(){

var mark=”/:”+$(this).attr(“class”).toString();

var fs=$content.find(“.”+$(this).attr(“class”).toString());

if(fs!=null&&fs[0]!=undefined)

{

fs.replaceWith(mark);

}

});

}

其实还有很多问题没有处理，俺也只是一知半解。把代码贴出来希望能帮助一些朋友解决问题。

您可能感兴趣的文章:Android输入框添加emoje表情图标的实现代码Android高仿微信表情输入与键盘输入详解Android编程开发之EditText实现输入QQ表情图像的方法Android编程开发实现TextView显示表情图像和文字的方法Android编程实现QQ表情的发送和接收完整实例(附源码)基于Android开发支持表情的实现详解Android开发技巧之像QQ一样输入文字和表情图像使MySQL能够存储emoji表情字符的设置教程基于jQuery实现的QQ表情插件完整的Android表情功能处理方案