本文主要介绍 div 标签设置  contenteditable = ' true ' 时，在光标位置插入输入的内容，或在光标位置粘贴纯文本内容。文中涉及知识，可参考以下： http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

http://www.jb51.net/article/57650.htm

https://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html

http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/

http://kjah.iteye.com/blog/422509

　　先搭好 html ，一个按钮用于插入操作，一个 div 实现 contenteditable 功能，及主要逻辑

<button type="button" id='insert'>插入标题</button>

<div contentEditable="true" id="editor">

    <h3>副标题</h3>

    <p>文本</p>

</div>

　　接着是实现 js 逻辑功能

document.getElementById('insert').onclick=function(){

    // 点击插入按钮时，系统弹框输入内容

    var content = prompt('请输入内容');

    // 防止编辑框没有获取焦点时点击，故加一个操作，使编辑框获取焦点

    document.getElementById('editor').focus();

    // 执行插入方法

    if(!!content){

        insertHtml('<h4>'+content+'</h4>');

    }

}

　　主要逻辑在 insertHtml 方法中

function insertHtml(html) {

    //Selection 对象，表示用户选择的文本范围或光标的当前位置。

    //在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象

    //anchor 选中区域的“起点”。

    //focus 选中区域的“结束点”。

    //range 是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。可以从selection中获得range对象，也可以使用document.createRange()方法获得。

    var sel = window.getSelection(),

        range;

    if (sel.getRangeAt && sel.rangeCount) {

        //getRangeAt(index) 从当前selection对象中获得一个range对象。

        range = sel.getRangeAt(0);

        //deleteContents()方法,range内容会被删除

        range.deleteContents();

        //将输入的内容写入并加载到 dom 中

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

        el.innerHTML = html;

        var frag = document.createDocumentFragment(), node, lastNode;

        while ( (node = el.firstChild) ) {

            lastNode = frag.appendChild(node);

        }

        //insertNode,在range的开始位置插入一 个节点

        range.insertNode(frag);

        //收尾

        if (lastNode) {

            range = range.cloneRange();

            range.setStartAfter(lastNode);

            range.collapse(true);

            sel.removeAllRanges();

            sel.addRange(range);

        }

    }

}

　　此时往编辑框里粘贴内容，会带上原本样式，显然不是我们要的结果，需对粘贴文本进行更改

document.getElementById('editor').onpaste=function(event){

    var e = event || window.event

    // 阻止默认粘贴

    e.preventDefault();

    // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问

    // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据

    var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');

    // 插入

    document.execCommand("insertText", false, text);

};

　　最后附上完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>contenteditable</title>

    <style>

        #insert{

            width: 90px;

            height: 30px;

            border: 1px solid #ccc;

            background-color: #fff;

            margin: 10px;

        }

        #editor{

            padding: 10px;

            overflow-y: auto;

            min-height:200px;

            border:1px solid #f33;

            outline: 0;

        }

        #editor h4{

            margin: 10px 0;

        }

    </style>

</head>

<body>

<button type="button" id='insert'>插入标题</button>

<div contentEditable="true" id="editor">

    <h3>副标题</h3>

    <p>文本</p>

</div>

</body>

<script>

document.getElementById('insert').onclick=function(){

    var content = prompt('请输入内容');

    document.getElementById('editor').focus();

    if(!!content){

        insertHtml('<h4>'+content+'</h4>');

    }

}

document.getElementById('editor').onpaste=function(event){

    var e = event || window.event

    e.preventDefault();

    var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');

    document.execCommand("insertText", false, text);

};

function insertHtml(html) {

    var sel = window.getSelection(),

        range;

    if (sel.getRangeAt && sel.rangeCount) {

        range = sel.getRangeAt(0);

        range.deleteContents();

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

        el.innerHTML = html;

        var frag = document.createDocumentFragment(), node, lastNode;

        while ( (node = el.firstChild) ) {

            lastNode = frag.appendChild(node);

        }

        range.insertNode(frag);

        if (lastNode) {

            range = range.cloneRange();

            range.setStartAfter(lastNode);

            range.collapse(true);

            sel.removeAllRanges();

            sel.addRange(range);

        }

    }

}

</script>

</html>

contenteditable 插入及粘贴纯文本内容的更多相关文章

  1. 小tip: 如何让contenteditable元素只能输入纯文本

    div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...

  2. 如何让contenteditable元素只能输入纯文本

    本文出自张旭鑫博客,要知详情,请戳右侧地址:http://www.zhangxinxu.com/wordpress/?p=5120 一.温故而知新 很多年以前,稍等,让我搜一下contentedita ...

  3. 转换 Html 内容为纯文本内容（html,文本互转）

    转自http://www.cnblogs.com/jyshi/archive/2011/08/09/2132762.html : /// <summary> /// 转换纯文本内容为 HT ...

  4. 【ASP.NET Core】从向 Web API 提交纯文本内容谈起

    前些时日,老周在升级“华南闲肾回收登记平台”时,为了扩展业务,尤其是允许其他开发人员在其他平台向本系统提交有关肾的介绍资料,于是就为该系统增加了几个 Web API. 其中,有关肾的介绍采用纯文本方式 ...

  5. Aspose.words Java基于模板生成word之纯文本内容

    一,创建word模板 1.新建一个word文档 2.分别给四个参数设置域 (1)将鼠标置于想要设置域的地方 (2)设置域名 (3)设置好之后如下图所示 二,项目 1,引入maven依赖 <dep ...

  6. richtextbox Ctrl+V只粘贴纯文本格式

    只能粘贴剪切板中的TXT内容 并且 不能改变 剪切板的内容1 当用户按下Ctrl+V屏蔽系统的粘贴功能,然后添加自己的功能2019年12月19日 19:34:38 private void richT ...

  7. DIV仿textarea文本域，contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  8. 限制可编辑div只能输入纯文本

    本博客转载自张鑫旭大神的一篇文章:小tip: 如何让contenteditable元素只能输入纯文本,原文地址:http://www.zhangxinxu.com/wordpress/2016/01/ ...

  9. EditText添加了ImageSpan后，在两者中间不能输入纯文本

    严格来说是连续插入两个ImageSpan之后,在其中间不能够输入纯文本内容. 最后发现问题出现在了SpannableString在设置ImageSpan的时候第四个参数flag的问题. spannab ...

随机推荐

  1. 数据库MySQL、redis主从切换shell脚本

    具体源码可找我领取

  2. 网络通信 --> Socket、TCP/IP、HTTP、FTP及网络编程

    Socket.TCP/IP.HTTP.FTP及网络编程 聊聊Socket.TCP/IP.HTTP.FTP及网络编程

  3. [jdoj1817]Drainage Ditches_网络流

    Drainage Ditches jdoj-1817 题目大意:网络流裸求最大流 注释:n(点数),m(边数)<=200. 想法:裸的网络流求最大流,用bfs+dfs,美其名曰dinic. 没有 ...

  4. Duplicate column name 'vocabulary'

    创建一个视图: 报错:Duplicate column name 'vocabulary' 意思是视图select的列名重复了,取别名 改成这样就ok了

  5. Django—urls系统：urls基础

    Django的urls系统简介 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映 ...

  6. Beta 第三天

    今天遇到的困难: 组员对github极度的不适应 github的版本控制和协同化编程确实操作起来需要一定的熟练度,我们缺乏这种熟练度 Android Studio版本不一致项目难以打开的问题仍然无法解 ...

  7. 第201621123043 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...

  8. bzoj千题计划108：bzoj1018: [SHOI2008]堵塞的交通traffic

    http://www.lydsy.com/JudgeOnline/problem.php?id=1018 关键点在于只有两行 所以一个2*m矩形连通情况只有6种 编号即对应代码中的a数组 线段树维护 ...

  9. jupyter notebook下python2和python3共存（Ubuntu）

    提示NOTICE 时间:2018/04/06 主题:Ubuntu 下CAFFE框架 主角:Jupyter Notebook 简介: Jupyter Notebook(此前被称为 IPython not ...

  10. Python内置函数(10)——float

    英文文档: class float([x]) Return a floating point number constructed from a number or string x. If the ...