在评论输入框中插入表情

最近在做一个后台管理系统，要求可以对前台用户的作品进行评论，而评论要可以输入表情，常规的文字输入框都是用的文本域 textarea 来做的，但这种输入框只能输入文字，没有办法输入表情图标，这个时候可编辑div就能起到作用了，那么如何在可编辑的div中插入表情呢？

要完成这个功能得用到 selection 以及 range，selection 对象由 window.getSelection() 方法获得，它代表页面中的文本选区，选区对应的区域，而range对象，可由selection对象的 getRangeAt() 方法获得，实现在光标处插入图片后将光标移到图片后边，就是使用这两个对象中的方法。

基本的实现步骤是这样的，首先获得 selection 选区对象，再获得范围对象 range，创建图片节点，将图片节点插入到范围中，接着将范围收缩为它末端的一个点，最后将选区清除，将收缩后的范围重新添加到选区中即可，以下是核心的代码实现。

function insertImg(src) {if ('getSelection' in window) {var sel = window.getSelection();// 有sel对象，并且用户已经点击过页面，且点击的选区起点和终点在同一位置if (sel && sel.rangeCount === 1 && sel.isCollapsed) {// 获取范围var range = sel.getRangeAt(0);var img = new Image();img.src = src;// 插入图片range.insertNode(img);// 将选区折叠为一个插入点，为了兼容IE添加一个参数range.collapse(false);// 移除选区sel.removeAllRanges();// 添加选区sel.addRange(range);}} else if ('selection' in document) {// content为可编辑div的IDvar div = document.getElementById('content');// 获得焦点div.focus();// 创建范围对象var range = document.selection.createRange();// 插入图片range.pasteHTML('<img src="' + src + '">');// 如果要插入文本，请用range.text="XXXX"div.focus();}
}

在评论输入框中插入表情相关推荐

如何在富文本中插入表情，word文档，及数学公式？
前言互联网寒冬一直在持续,不知道大家过的还好吗?不过话说回来,技术过硬,你在哪里都是最靓的仔.今天就给大家补充一点弹药,如何在富文本中插入表情,word文档,及数学公式. 为什么是 TinyMCE ...
Android：TextView与EditText中插入表情图片
表情工具类,用于在TextView与EditText中插入表情图片: public class FaceUtil {public int[] faceIds;public String[] faceC ...
微信小程序，数据库中插入表情
微信小程序,数据库中插入表情错误提示使用的是django做的后台错误提示 django.db.utils.InternalError: (1366, "Incorrect string ...
输入框中-------禁止输入表情
最近遇到了一个需求,就是在设置账号名称中禁止输入表情,就把该知识点整理了一下,记录以便下次查找. 可能还有不完善之处,请各位补充. 方法1:此方法个别表情识别不出来比如我的华为手机电话表情不 ...
【小松教你手游开发】【系统模块开发】图文混排（在label中插入表情）
本身ngui是自带图文混排的,这个可以在ngui的Example里找到.但是为什么不能用网上已经说得很清楚,比如雨松momo的http://www.xuanyusong.com/archives/29 ...
文本域和输入框中的表情(emoji)处理
// 文本中的emoji表情处理 $(document).ready(function(){//$("textarea,input").on("keyup",f ...
在“Markdown”中插入表情包教程
让我们的文章变得有趣起来吧
NGUI聊天信息中插入动态表情
聊天系统中难免需要加入动态表情来增加表现力,而使用NGUI中自带的表情系统有些局限:一是只能使用静态表情,二是需要制作字体图集,不能使用动态图集.所以需要另外寻找方法实现聊天文字中插入动态表情的效果. ...
输入框插入表情的实现
输入框插入表情的实现 HTML5 在普通的 textarea 中,只能显示普通的文本.如果简单的输入文本,textarea 便足以胜任.但是实际情况往往要复杂得多. 简单版本的插入表情常见的版本一般 ...

在评论输入框中插入表情

在评论输入框中插入表情相关推荐

最新文章

热门文章