管理资源吧首页>>>教程>>>编程>>>网页编辑器教程>>>

一款支持插入表情的编辑器实现代码(简单思路挺重要)

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

　　

复制代码 代码如下:

　　<ul id="faceList">

　　<li class="wx">0.gif</li>

　　<li class="pz">1.gif</li>

　　<li class="se">2.gif</li>

　　</ul>

　　接下来把上面的 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 = faceDir+$(this).html();

　　this.innerHTML = "";

　　this.appendChild(node);

　　});

　　放一个 iframe 用来做编辑器

　　

复制代码 代码如下:

　　<iframe id="Edit" frameborder="0"></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("<html><body style=\"word-wrap:break-word;text-align: left; background-color: #fff; border:1px solid #CCC; margin:0px; padding:0px;overflow:hidden;\"></body></html>");

　　下面实现，在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 = $thisImg.attr("src");

　　r.surroundContents(node);

　　}

　　});

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

　　

复制代码 代码如下:

　　function GeteEditData()

　　{

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

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

　　var str = new String(edit);

　　var $content = $("<div>"+str+"</div>");

　　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);

　　}

　　});

　　}

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

教程首页 更多教程