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

 更新时间:2010年07月17日 18:21:17   转载 作者:  
先说做的是什么哈。 一个发言框,功能不多。 要求能插入表情,最终得到的代码表情不是<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 用来做编辑器
复制代码 代码如下:

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

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

相关文章

  • js获取富文本中的第一张图片(正则表达式)

    js获取富文本中的第一张图片(正则表达式)

    这篇文章主要介绍了js获取富文本中的第一张图片url正则表达式及去除字符串里面的html标签的正则公式,需要的朋友可以参考下
    2020-02-02
  • asp.net 为FCKeditor开发代码高亮插件实现代码

    asp.net 为FCKeditor开发代码高亮插件实现代码

    昨天已经将BlogEngine的可视化编辑器换成了FCKeditor,作为一个程序员,在博客中插入代码是很重要的一块。网上现有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到InsertCode的目的。这个方法非常麻烦,当要使用FCKeditor新版本时都要重新修改这两个文件,非常影响我们的效率。
    2008-08-08
  • FCKEditor 自定义用户目录的修改步骤 (附源码)

    FCKEditor 自定义用户目录的修改步骤 (附源码)

    FCKEditor 自定义用户目录的修改步骤 (附源码) ,需要的朋友可以参考下。
    2010-03-03
  • SyntaxHighlighter 语法高亮插件的使用教程

    SyntaxHighlighter 语法高亮插件的使用教程

    现在做it编程类信息的网站,提供的源码如果能提供代码高亮对代码的阅读效果会提高不少。
    2010-02-02
  • Qzone编辑器QzoneEditor打包下载

    Qzone编辑器QzoneEditor打包下载

    从qq上弄下来了,觉得漂亮
    2008-08-08
  • KindEditor 4.x 在线编辑器常用方法小结

    KindEditor 4.x 在线编辑器常用方法小结

    要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
    2011-11-11
  • CKEditor网页编辑器 中文使用说明

    CKEditor网页编辑器 中文使用说明

    安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成。多测试。
    2010-04-04
  • asp.net FCKeditor 2.6.3 配置说明

    asp.net FCKeditor 2.6.3 配置说明

    FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务。
    2010-01-01
  • 彻底解决ewebeditor网站后台不能上传图片的方法

    彻底解决ewebeditor网站后台不能上传图片的方法

    随着windows操作系统和IE浏览器版本的不断推出,很多客户都渐渐放弃了IE6,IE7,使用上了IE8浏览器,但是突然发现自己网站后台里面的eWebEditor文本编辑器的插入图片等等按钮失效了,鼠标点击后什么反应都没有,IE浏览器左下角显示一个黄色的感叹号提示错误,就以为是网站空间、服务器中毒了呢,一时间纷纷都来找我们询问
    2012-03-03
  • FCK 编辑器焦点问题

    FCK 编辑器焦点问题

    在使用FCK编辑器的时候,我们经常会进行对FCK编辑器的赋值操作,赋值的操作有两个关键的地方,如果不清楚的话出了错还百思不得其解.
    2009-11-11

最新评论