原文：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. 关于linux中的system函数

    Linux下使用system()函数一定要谨慎 https://blog.csdn.net/senen_wakk/article/details/51496322 system()正确应用 https ...

  2. elasticsearch mapping demo

    curl -XPUT localhost:9200/local -d '{ "settings" : { "analysis" : { "analyz ...

  3. code block自动生成makefile

    安装插件 http://developer.berlios.de/projects/cbmakegen/  然后会在project菜单下面有一个Generate Makefile的选项 点击就行了 如 ...

  4. text clf rnn

    #!/usr/bin/env python # coding=utf- import numpy as np import pandas as pd import re from bs4 import ...

  5. [UE4]机器人射击逻辑行为树

    1.寻找敌人 2.如果没有找到,等待2秒,跳转到1 3.如果找到了,走向敌人 4.走向敌人的过程中,如果看见敌人了,则射击 5.如果敌人没有了,则跳转到1

  6. CRM 2016 设置字体颜色

    作者:卞功鑫 ,转载请保留http://www.cnblogs.com/BinBinGo/p/7402809.html setTimeout("window.parent.document. ...

  7. js第四天学习小结：

    (1)函数的四种形式小结: 无参无返回值 function tellstory(){     console.log("从前有座山");     console.log(" ...

  8. Windows server 2008 R2充当路由器实现网络的互联

    1．路由器的工作原理 当IP子网中的一台主机发送IP分组给同一IP子网的另一台主机时,它将直接把IP分组送到网络上,对方就能收到.而要送给不同IP子网上的主机时,它要 选择一个能到达目的子网上的路由器 ...

  9. 网络编程socket，详细讲述osi七层协议

    一 网络编程 源方: 我们首先来说下数据在两台计算机之间的传递:操作系统控制着除应用层以外的四层 对于用户来说我们发数据一般都是在应用层,也就是我们是直接操作应用软件的,那么应用层要把数据传给传输层就 ...

  10. html里面，没有内容，要高度占满页面

    html { height:100%; margin:0; } body{ width: 100%; height: 100%; background-color: rgb(52,175,245); ...