原文：https://blog.csdn.net/smartsmile2012/article/details/53642082

createDocumentFragment()用法： https://blog.csdn.net/qiao13633426513/article/details/80243058

html

<iframe id="editor"  width="600px" height="400px" style="border:solid 1px;"></iframe>

<input type="txt" onclick="alert(getPosition(event.target))"/>

js

    //初始化编辑器

    function init() {

        var ifr = document.getElementById("editor");

        var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE

        doc.open();

        doc.designMode="on";

        doc.contentEditable = true;

        doc.write('<html><head><style>body{margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>');

        doc.close();

        doc.addEventListener('paste',function(e){

            e.preventDefault();

            posInsertTxt(e,'插入的内容!');

        });

    }

    init();

    //在光标位置插入内容

    var  posInsertTxt = (event, txt) => {

        var element = event.target ?  event.target : event;

        var doc = element.ownerDocument || element.document;

        var win = doc.defaultView || doc.parentWindow;

        var sel;

        if (typeof win.getSelection != "undefined") {//谷歌、火狐

            sel = win.getSelection();

            if (sel.rangeCount > ) {//选中的区域

                var range = win.getSelection().getRangeAt();

                range.deleteContents();

                var el = document.createElement("div");

                el.innerHTML = txt;

                //createDocumentFragment 创建虚拟的节点对象，在创建之初是空的，在把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点

                var frag = document.createDocumentFragment(), lastNode;

                if (el.firstChild) {

                        //这里在虚拟节点位置加入的是 文本节点,不是元素节点

                        lastNode = frag.appendChild(el.firstChild);

                }

                //在范围初插入节点

                range.insertNode(frag);

                if (lastNode) {

                    range = range.cloneRange();

                    range.setStartAfter(lastNode);

                    range.collapse(true);

                    sel.removeAllRanges();

                    sel.addRange(range);

                }

            }

        } else if ((sel = doc.selection) && sel.type != "Control") {//IE < 9

            var textRange = sel.createRange();

            textRange.pasteHTML(txt);

        }

    }

js 在光标位置插入内容的更多相关文章

  1. js在光标处插入内容

    //场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createText ...

  2. JQuery在光标位置插入内容

    (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...

  3. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  4. js获取光标位置并插入内容

    先来几个网上找的参考资源,我爱互联网,互联网使我变得更加强大. https://blog.csdn.net/mafan121/article/details/78519348 详细篇,该作者很用心的解 ...

  5. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  6. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  7. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  8. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  9. 利用RandomAccessFile类在指定文件指定位置插入内容

    package File; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

随机推荐

  1. STL基础--算法（修改数据的算法）

    修改元素的算法 copy, move, transform, swap, fill, replace, remove vector<int> vec = {9,60,70,8,45,87, ...

  2. Android兼容包之MultiDex

    一.MultiDex的产生背景 当Android系统安装一个应用的时候,有一步是对Dex进行优化,这个过程有一个专门的工具来处理,叫DexOpt.DexOpt的执行过程是在第一次加载Dex文件的时候执 ...

  3. vue聊天功能之滚动条自动定位到底部

    一.问题描述 首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部. 二.解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底 ...

  4. MATLAB的一些小技巧

    写论文要将图片保存为tiff格式,还要求dpi,还要标注,真是麻烦,下面的命令是最方便的程序化处理方式了 MATLAB text标注后 保存为 tiff 图片,图片到边框间无空白 clear all; ...

  5. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  6. Centos 7.4 安装samba服务

    # See smb.conf.example for a more detailed config file or # read the smb.conf manpage. # Run 'testpa ...

  7. sqlite之多线程总结

    12.android 多线程数据库读写分析与优化 11.多线程操作Sqlite? ==== 11.android 多线程数据库读写分析与优化 最新需要给软件做数据库读写方面的优化,之前无论读写,都是用 ...

  8. core 部署

    perfmoneventvwr 1.yum install mysql2.yum install libgdiplus-devel3.COMPlus_ThreadPool_ForceMinWorker ...

  9. Google App Engine10年，支持更多你喜欢的编程语言

    2008年4月7日google推出Google App Engine(GAE),时间过得真快,10年过去了,2010年3月google退出中国,一转眼也过去7年了.早在2009年的时候GAE就在中国内 ...

  10. Windows 2016 无域故障转移群集部署方法 超详细图文教程 (一)

    故障转移群集是一个很实用的功能,而windows在2016版本开始,终于支持不用域做故障转移群集. 在群集中,我们可以设定一个"群集IP" 而客户端只需要根据这个"群集I ...