html 富文本编辑器相关--向编辑器内部插入文字图片等各种dom元素 通用方法
有问题的插入方案
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#edit{height:500px;width:500px;border:1px solid red;}</style>
</head>
<body>
<div id="edit" contenteditable></div>
<input type="text" id="emojiInput">
<button id="sendEmoji">发送表情</button><script>var sendEmoji = document.getElementById('sendEmoji')// 定义最后光标对象var lastEditRange;// 编辑框点击事件document.getElementById('edit').onclick = function() {// 获取选定对象var selection = getSelection()// 设置最后光标对象lastEditRange = selection.getRangeAt(0)}// 编辑框按键弹起事件document.getElementById('edit').onkeyup = function() {// 获取选定对象var selection = getSelection()// 设置最后光标对象lastEditRange = selection.getRangeAt(0)}// 表情点击事件document.getElementById('sendEmoji').onclick = function() {// 获取编辑框对象var edit = document.getElementById('edit')// 获取输入框对象var emojiInput = document.getElementById('emojiInput')// 编辑框设置焦点
edit.focus()// 获取选定对象var selection = getSelection()// 判断是否有最后光标对象存在if (lastEditRange) {// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()selection.addRange(lastEditRange)}// 判断选定对象范围是编辑框还是文本节点if (selection.anchorNode.nodeName != '#text') {// 如果是编辑框范围。则创建表情文本节点进行插入var emojiText = document.createTextNode(emojiInput.value)if (edit.childNodes.length > 0) {// 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点for (var i = 0; i < edit.childNodes.length; i++) {if (i == selection.anchorOffset) {edit.insertBefore(emojiText, edit.childNodes[i])}}} else {// 否则直接插入一个表情元素
edit.appendChild(emojiText)}// 创建新的光标对象var range = document.createRange()// 光标对象的范围界定为新建的表情节点
range.selectNodeContents(emojiText)// 光标位置定位在表情节点的最大长度
range.setStart(emojiText, emojiText.length)// 使光标开始和光标结束重叠range.collapse(true)// 清除选定对象的所有光标对象
selection.removeAllRanges()// 插入新的光标对象
selection.addRange(range)} else {//debugger;// 如果是文本节点则先获取光标对象var range = selection.getRangeAt(0)// 获取光标对象的范围界定对象，一般就是textNode对象var textNode = range.startContainer;// 获取光标位置var rangeStartOffset = range.startOffset;// 文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset, emojiInput.value)// 光标移动到到原来的位置加上新内容的长度range.setStart(textNode, rangeStartOffset + emojiInput.value.length)// 光标开始和光标结束重叠range.collapse(true)// 清除选定对象的所有光标对象
selection.removeAllRanges()// 插入新的光标对象
selection.addRange(range)}// 无论如何都要记录最后光标对象lastEditRange = selection.getRangeAt(0)}
</script>
</body>
</html>View Code
插入时 应该考虑的问题，
第一 原来容器内 有文本内容，现在在文本内容中间插入dom元素， 以上方法未解决，
第二 插入后定位到新插入的元素的位置
另附 ：上面方法最有价值的地方在于 定义全局唯一range 和selection 对象，在每次变化时候记录下最新的range和selection
变化的时候包括
1） blur 事件 2） onclick 事件 3） onkeyup 事件 --这些事件都有可能会改变光标位置
4）代码触发时候 比如 用代码向输入框内插入一些节点时候 这时候应该也要记录最新的selection 和range
ok的方案
/*** 在输入区插入各种东东通用* @param html*/
function insertImg(html) {var dthis = $("#input-content")[0];var sel = getSelection();if (window.getSelection) {// IE9 and non-IEsel = window.getSelection();if (sel.getRangeAt && sel.rangeCount) {range = sel.getRangeAt(0);range.deleteContents();var el = document.createElement('div');el.innerHTML = html;var frag = document.createDocumentFragment(), node, lastNode;while ((node = el.firstChild)) {lastNode = frag.appendChild(node);}range.insertNode(frag);if (lastNode) {range = range.cloneRange();range.setStartAfter(lastNode);range.collapse(true);sel.removeAllRanges();sel.addRange(range);}}} else if (document.selection && document.selection.type != 'Control') {$(dthis).focus(); // 在非标准浏览器中 要先让你需要插入html的div 获得焦点ierange = document.selection.createRange();// 获取光标位置ierange.pasteHTML(html); // 在光标位置插入html 如果只是插入text 则就是fus.text="..."
$(dthis).focus();}
}转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6705428.html
html 富文本编辑器相关--向编辑器内部插入文字图片等各种dom元素 通用方法相关推荐
- ASP.NET一款免费富文本（RichText）编辑器KindEditor，实现在线排版编辑文章。这里简单介绍下如何使用
一般用到富文本编辑器的地方:留言板,论坛的发帖页以及回复页等. 所用软件VS2012旗舰版 KindEditor下载地址(本文实例中所用版本4.1.10): http://download.csdn. ...
- iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制
问题一 开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOption ...
- 移动光标到相应的文本（比如项目中，插入了图片之后，即在插入的地方显示光标）
在选定的文本框中,点击了光标,进行了额外的操作,比如说,进行图片的插入.表情的插入之后,如果是直接在改dom元素中进行focus操作的话,光标的位置会直接放置文本的最后,而不是我们期望的 ...
- vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计 写在前面 vue 富文本 quill / vue-quill-editor 如何使用 图片上传到服务器 实时字数统计 图片编 ...
- 富文本编辑器tinymce 自定义中文字号（四号，小四，五号，小五等）
富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等) 前因 探索 最终解决 最终效果 关键代码 前因 在写富文本编辑器转换word的过程中,因为所使用的富文本编辑器tinymce中的 ...
- ios开发 html编辑器,iOS实现富文本编辑器的方法详解
前言 富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor.但是这两个也有它的缺点:界面过于复杂.不够简洁.UI设计也比较落后.不够轻量化,这篇文章我们将给大 ...
- QT专业技能实训-富文本编辑器
目录 1 概述 1.1 专业技能实训目的与要求 1.2 项目背景 1.2.1 项目知识背景 1.2.2 项目设计背景 2 需求分析 2.1软件需求 2.1.1设计需求 2.1.2功能需求 2.2用户需 ...
- 百度富文本编辑器实现以及上传图片
1百度富文本关于整合java使用 版本1.4.3 UEditor jsp版本 下载地址:https://github.com/fex-team/ueditor jsp 与php版本 先 ...
- 记录React之富文本编辑器
主要知识点:contentEditable 以及 document.execCommand 日常使用的输入框,大多直接使用input,支持正常的文本操作,但是想要做复杂的内容输入,就需要一个富文本编辑 ...
最新文章
- Nature指数2021亚太区排名：7所中国高校挺进前10！看看有没有你的母校？
- 每天一个linux命令（14）：head 命令
- python写的游戏怎么给别人玩-一步步教你怎么用python写贪吃蛇游戏
- 三维重建学习(1)：基础知识：旋转矩阵与旋转向量
- 数组名加取地址符的理解
- Fiddler抓包原理解析
- Java 匿名存储过程_Java程序员的存储过程
- 设置XenServer中的Linux vm从光驱启动
- BootStrap笔记-文字排版
- Android 代码混淆(一)
- cdr三角形转化为圆角_CDR金属质感小图标图文解析
- HDU 2571（dp）题解
- linux .bashrc文件修改和生效
- 图片云存储（腾讯云 七牛云）
- php的sql什么意思,php sql删除语句是什么
- 移远 EC200S 模组（4G Cat.1 通信模组）AT指令测试 TCP/UDP 通信过程
- Review (Homography+Camera calibration) and others（Week 7 + Week 8）
- 电子商务系统设计经验分享
- HelloRobot【六足】机械蜘蛛
- 机器学习-人工智能大数据,公开的海量数据集下载