原文：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. C++11--随机数引擎和随机数分布<random>

    /* 随机数引擎: * 有状态的随机数发生器,生成在预定义的最大小值之间的随机数 * 不是真正的随机数--伪随机 */ int main () { std::default_random_engine ...

  2. 固态硬盘使用简要手册——windows平台

    第一步,请安装它. 第二步,请关闭磁盘整理功能,如图 详细:控制面板--管理工具--任务计划程序 打开界面,设置如下 图1 第三步:预读(Superfetch)和快速搜索(Windows Search ...

  3. 一个简单的springmvc例子 入门（1）

    一直是从事棋牌游戏,平常用的东西 大多数只是使用一些javase的一些 api对spring 这方面 用到的比较少,每次学了都忘,始终记不住.为了 更轻松学习springboot,从新学习了sprin ...

  4. Flume监听文件目录sink至hdfs配置

    一:flume介绍 Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能 ...

  5. Java NIO系列教程（十一） Pipe

    Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示: 创建管道 通过Pi ...

  6. ROS-MikroTik-RouterOS-培训认证各种证书

    官方原文: https://mikrotik.com/training/about MikroTik certified training programs MTCNA - MikroTik Cert ...

  7. sqlserver in 和 exist 子查询

    1 in 子查询 use StudentManageDB go --select StudentName from Students --where StudentId=(select Student ...

  8. 通过mysqlclient操作MySQL数据库

    一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的l ...

  9. 基于Linux命令行KVM虚拟机的安装配置与基本使用

    背景 由于生产环境的服务器并不会安装桌面环境,简单操作的图形化安装也不适合批量部署安装.因此,我还是更倾向于在命令下安装配置KVM虚拟机.结合了一些资料和个人使用的状况,我大致列出了一些基本和常用的使 ...

  10. redis如何随系统启动

    Redis可以通过命令redis-server启动,但这种启动方式适用于开发环境,对于生产环境来说,配置好redis的配置文件,并使redis随linux启动则更加方便些,下面则记录下redis如何随 ...