原文：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. LeetCode——7. Reverse Integer

    一.题目链接:https://leetcode.com/problems/reverse-integer/ 二.题目大意: 给定一个整数,要求反转该整数之后再返回:如果归返回的整数超过了int型整数的 ...

  2. C++进阶--Named Parameter Idiom

    //############################################################################ /* Named Parameter Id ...

  3. C++进阶--处理拷贝赋值运算符中自赋值的情况

    //############################################################################ /* * 处理拷贝赋值运算符=中自赋值的情 ...

  4. Javascript之数组遍历

    一.遍历数组的几种方式      1.for...in遍历数组,会遍历数组的索引和数组原型上的对象      2.for循环直接遍历      3.迭代器:forEach(遍历数组中所有的值,并忽略回 ...

  5. 学习笔记之Lazy evaluation

    Lazy evaluation - Wikipedia https://en.wikipedia.org/wiki/Lazy_evaluation In programming language th ...

  6. 在docker宿主机上查找指定容器内运行的所有进程的PID

    转载 https://www.cnblogs.com/keithtt/p/7591097.html 找到指定容器的所有进程的PID可以更方便的对容器进程进行管理,特别是在某些容器卡住无法连接的场景. ...

  7. [UE4]响应鼠标点击

  8. CyclicBarrier循环屏障相关

    简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会 ...

  9. gulp_css2js

    var gulp = require('gulp'); var rename = require('gulp-rename'); var concat = require('gulp-concat') ...

  10. route

    route   添加/删除一条到192.168.3.0/24的路由,网关为192.168.1.254? route add/del  -net 192.168.3.0 netmask 255.255. ...