富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection

在近期项目中，需要在一个实时通信软件中，在发送消息时支持发送加粗的消息，现在总结一下使用心得。

需求：
在发送消息时，点击加粗图标，图标添加选中效果，输入的文字、添加的文字表情、@人员都需要显示为加粗效果。点击加粗图标，图标取消选中效果，输入的文字、添加的文字表情、@人员都需要显示为正常。在删除的时候，文字表情、@人员需要整块删除（因为添加消息加粗前用的是textarea，表情只在输入框中只能显示文字表情，添加消息加粗后，需求没说要把表情改为图片显示，所以继续使用文字表情）。

实现：

需要加粗消息，就需要使用到加粗b标签，所以一般的输入框input，textarea无法满足，经查询最后选择使用可编辑的div。将div设置属性contentEditable为true令div可编辑，通过document.execCommand('bold', false, null)命令可将光标设置加粗、取消加粗，命令使用详情见MDN的document.execCommand
插入文字表情、@人员：需要用到var selection = window.getSelection()，var range = selection.getRangeAt(0)来获取光标，getSelection和getRangeAt的使用详情见选择（Selection）和范围（Range）。
**注意：**插入到文档的内容既可以是元素节点，也可以是文本节点，如果插入的是元素节点，通过鼠标随意点击输入的内容，或是按delete键删除，将无法获取正确的光标位置，这就导致随意点击后无法将内容插入到正确的位置，所以采用的是插入文本节点。内容插入示例如下：

 // \u2005是Unicode编码的空格var atStr = data + '\u2005'var selection = window.getSelection()// 如果是文本节点则先获取光标对象// @时因为点击人员光标对象发生了改变，所以需要在输入@时提前记录光标对象var range = this.range;// 获取光标对象的范围界定对象，一般就是textNode对象var textNode = range.startContainer;// 获取光标位置var rangeStartOffset = range.startOffset;// 文本节点在光标位置处插入 @textNode.insertData(rangeStartOffset, atStr)// 光标移动到到原来的位置加上新内容的长度range.setStart(textNode, rangeStartOffset + atStr.length)// 光标开始和光标结束重叠range.collapse(true)// 清除选定对象的所有光标对象selection.removeAllRanges()// 插入新的光标对象selection.addRange(range)

整块删除文字表情（如：[呲牙]）、@人员（如：@张三）：文字表情以“[”开头、以“]”结尾，@人员以“@”开头、以“\u2005”结尾（\u2005是Unicode编码的空格），按下delete键，获取光标所在的文字对象以及位置，如果光标位置是“]”，则获取“]”前面最后一个“[”的下标，或者如果光标位置是“\u2005”，则获取“\u2005”前面最后一个@的下标，根据开头字符的下标和字符串的长度，删除整块内容。

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var textNode = range.startContainer;
var rangeStartOffset = range.startOffset;
var deleteStartPos = rangeStartOffset - deleString.length;
textNode.deleteData(deleteStartPos + 1, deleString.length);

加粗图标的选中效果，不会自动根据光标是否加粗而选中、取消选中，因此监听div输入框的点击事件、keyup事件（清除输入框内容时，在加粗、非加粗之间连续删除时需要改变加粗图标的选中效果），根据光标是否设置加粗，来给加粗图标进行选中、取消选中效果设置。使用命令document.queryCommandState(‘bold’)来查询光标是否设置加粗效果，如果为加粗命令会返回true，否则返回false。
点击加粗后，不输入内容直接添加表情，此时输入框没有添加加粗的b标签，需要手动为表情内容添加加粗的b标签。

实现效果如下图：

富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection相关推荐

关于可编辑div contentEditable=true 添加表情光标设置问题
web版的聊天室对与前端来说真的是一个头疼的问题,特别是输入框显示表情,需要contentEditable属性来显示,但是contentEditable又有光标问题,插入的表情无法在光标下插入,会自动 ...
如何写一个简便的富文本编辑器
如何写一个简便的富文本编辑器目的使用div创建编辑器的输入框使用到的DOM API 目的仅是学习过程中的记录,发着玩的.如果是使用富文本编辑器投入使用,现成有很多富文本编辑器可供选择. 使用d ...
js基础-富文本编辑器
富文本编辑器 1.富文本编辑器简介富文本编辑(WYSIWYG(What You See Is What You GET,所见即所得)). 最先的富文本编辑,就是在页面中嵌入一个包含空HTML页面的i ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
UEditor富文本编辑器不显示问题
项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
layui富文本编辑器(layedit)的使用
效果图: 1.html页面使用文本域标签承载富文本编辑器<textarea></textarea><div class="layui-form-item&qu ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...

富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection

富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection相关推荐

最新文章

热门文章