一款支持插入表情的编辑器实现代码(简单思路挺重要)
下面是一个表情列表,为了简单我直接在li里面放图片的文件名称，而class 属性用来存放对应的标记
代码如下:
<ul id="faceList">
<li class="wx">0.gif</li>
<li class="pz">1.gif</li>
<li class="se">2.gif</li>
</ul>
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 id="Edit" frameborder="0"></iframe>
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);
}
});
}
其实还有很多问题没有处理，俺也只是一知半解。把代码贴出来希望能帮助一些朋友解决问题。
相关推荐
-
Android输入框添加emoje表情图标的实现代码
前言 再次写聊天的时候才发现,代码积累是一件非常重要的事情,就如这篇博客的意图其实就是代码积累的目的,其实没什么难度,但是一件很琐碎的事情真的也需要时间去完成和调试,所以,获取你在写一个功能的时候会觉得并没有多难,但是如果可以最好把代码整理/积累下来. demo描述 demo的功能其实就是仿照微信的 聊天 emoje 选择,采用了 viewpager+gridView 的方案,不过有空我会补上 recyclerView 的方案,目前还是先把功能实现了再说.另外在 TextView 和 EditT
-
完整的Android表情功能处理方案
Android表情功能处理方案概述 1.原理和实现思路 2.表情图片显示 3.表情面板 4.表情的输入框插入和删除 5.表情添加脚本 Android中表情功能,一般都不是用ImageView去设置图片实现的,表情一般会嵌套在文本之中,那么如何实现呢,这里就介绍一下其中的原理,此外还有相关功能的实现思路和具体代码. 先看下良心动态图 1.原理和思路 a.表情内容的数据格式 表情看上去是图片,但是在数据传输的时候本质上是一个特殊文本: 比如QQ表情就是一个 "/表情字母"的结构,比如害羞的
-
基于Android开发支持表情的实现详解
最近项目需要支持表情,表情的添加和解析实现基本上是参照Android自身的SmileyParser,具体就不多讲了,直接贴上代码: 复制代码 代码如下: public class SmileyParser {private static SmileyParser sInstance = null; private Context mContext = null;private Pattern mPattern = null;private HashMap<String, Integer> mS
-
Android编程开发之EditText实现输入QQ表情图像的方法
本文实例讲述了Android编程开发之EditText实现输入QQ表情图像的方法.分享给大家供大家参考,具体如下: 实现效果如下: 将QQ表情图像放到res下的drawable-hdpi文件夹下: 布局文件: <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:
-
使MySQL能够存储emoji表情字符的设置教程
MySQL 需要支持 emoji 表情符号版本需要大于5.5.3,且字符集需要设置为utf8mb4 字符集. utf8mb4和utf8到底有什么区别呢?原来以往的mysql的utf8一个字符最多3字节,而utf8mb4则扩展到一个字符最多能有4字节,所以能支持更多的字符集. 将Mysql的编码从utf8转换成utf8mb4. 需要 >= MySQL 5.5.3版本.从库也必须是5.5的了.低版本不支持这个字符集.复制报错 停止MySQL Server服务 修改 my.cnf或者mysql.ini
-
Android高仿微信表情输入与键盘输入详解
最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大
-
Android开发技巧之像QQ一样输入文字和表情图像
EditText和TextView一样,也可以进行图文混排.所不同的是,TextView只用于显示图文混排效果,而EditText不仅可显示,也可混合输入文字和图像,让我们先回顾一下图5.2所示的QQ聊天输入框,在输入框中可以同时输入文字和表情图像.实际上,这种效果在Android SDK中只需要几行代码就可以实现.为了使读者更有学习的冲动,先来欣赏一下即将实现的效果,如图5.16所示. 图5.16 在EditText控件中输入文字和图像 为了实现这个程序,首先来准备一些要用到的素材,也就是要在
-
基于jQuery实现的QQ表情插件
不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j
-
Android编程开发实现TextView显示表情图像和文字的方法
本文实例讲述了Android编程开发实现TextView显示表情图像和文字的方法.分享给大家供大家参考,具体如下: 从这个案例中我们可以学到当我们美化图片美化界面的时候可以在某一区域输入图片和文字混搭信息,第三张图片按比例缩小,第四张图像有超链接 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro
-
Android编程实现QQ表情的发送和接收完整实例(附源码)
本文实例讲述了Android编程实现QQ表情的发送和接收.分享给大家供大家参考,具体如下: 在自己做一个聊天应用练习的时候,需要用到表情,于是就想着模仿一下QQ表情,图片资源完全copy的QQ.apk,解压就可以得到,这里不细说. 下面将该应用中的表情模块功能抽离出来,以便自己以后复习回顾.. 先看一下效果图: 首先进入界面:(完全仿照QQ) 点击一下上面的表情图标: 选择一些表情,输入一些文字混合: 点击发送: 可以看到文字和表情图片都一起显示出来了. 下面列出一些关键代码: 表情工具类Exp