一款支持插入表情的编辑器实现代码(简单思路挺重要)
程序员文章站
2022-06-23 21:50:29
下面是一个表情列表,为了简单我直接在li里面放图片的文件名称，而class 属性用来存放对应的标记 复制代码 代码如下:
- ...
下面是一个表情列表,为了简单我直接在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);
}
});
}
其实还有很多问题没有处理，俺也只是一知半解。把代码贴出来希望能帮助一些朋友解决问题。
复制代码 代码如下:
<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);
}
});
}
其实还有很多问题没有处理，俺也只是一知半解。把代码贴出来希望能帮助一些朋友解决问题。