一款支持插入表情的编辑器实现代码(简单思路挺重要)_网页编辑器教程-查字典教程网
一款支持插入表情的编辑器实现代码(简单思路挺重要)
一款支持插入表情的编辑器实现代码(简单思路挺重要)
发布时间:2016-12-29 来源:查字典编辑
摘要:下面是一个表情列表,为了简单我直接在li里面放图片的文件名称,而class属性用来存放对应的标记复制代码代码如下:0.gif1.gif2.g...

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

复制代码 代码如下:

<ul id="faceList">

<li>0.gif</li>

<li>1.gif</li>

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

}

});

}

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新网页编辑器学习
    热门网页编辑器学习
    编程开发子分类