一款支持插入表情的编辑器实现代码(简单思路挺-自学php网

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

来源：自学PHP网时间：2014-12-14 21:28 作者：阅读:次

[导读] 先说做的是什么哈。一个发言框，功能不多。要求能插入表情，最终得到的代码表情不是img标记，而是类似 /:haha 的表情代码。项目做的时候有些部分用了Jquery直接上代码了...

下面是一个表情列表,为了简单我直接在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 用来做编辑器

复制代码代码如下:

先得到 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); 
} 
}); 
} 

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

页面嵌入Windows Media Player播放器代码需要注意的

FCKEditor+jQuery+PHP实现分页代码_网页编辑器

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论