原文：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. Feign api调用方式

    Feign使用简介 基本用法 基本的使用如下所示,一个对于canonical Retrofit sample的适配. interface GitHub { // RequestLine注解声明请求方法 ...

  2. 服务网关zuul之五：熔断

    路由熔断 当我们的后端服务出现异常的时候,我们不希望将异常抛出给最外层,期望服务可以自动进行一降级.Zuul给我们提供了这样的支持.当某个服务出现异常时,直接返回我们预设的信息. 如果没有配置fall ...

  3. 【原创】虚拟机上实现绑定固定IP扩主机容器互访

    Docker绑定固定IP/跨主机容器互访 https://blog.csdn.net/qq_34021712/article/details/75948566 服务器IP   容器分配网段   启动容 ...

  4. TextView-- 测量文字宽度

    https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; ...

  5. Mybatis 系列5-结合源码解析TypeHandler

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  6. Oracle SQL：select各类查询语句总结

    SQL查询语句总结 数据查询语言:即DML(Data Mannipulation Language)数据操纵语言,用于查询.操纵数据表资料行 本手册所有示例引用表均以TIPTOP GP  ERP数据库 ...

  7. 第9章 应用层（5）_文件传输协议FTP

    6. 文件传输协议FTP 6.1 FTP主动和被动模式 (1)FTP协议 ①与其他协议不同,FTP协议在客户端访问FTP服务器时需要建立两个TCP连接.一个用来传输FTP命令,一个用来传输数据. ②在 ...

  8. ubuntu下 net core 安装web模板

    ---恢复内容开始--- 今天想试试在Linux用C#开发WebAPI,查了下,要用: dotnet new -t Web 来建立工程,结果我试了下,出来这段: Invalid input switc ...

  9. BOM跟DOM的区别和关联

    BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...

  10. 2-scala集合

    1.集合的数据结构: array.seq .set .map(映射) 2.集合分类 集合分为可变集合和不可变集合(除元组外,元组没有可变和不可变) scala.collection.immutable ...