本文主要介绍 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. centos7 nginx安装/启动/进程状态/杀掉进程

    1.安装     下载RPM:wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.10.0-1.el7.ngx.x86_64.rpm ...

  2. 四十六、android中的Bitmap

    四十六.android中的Bitmap: http://www.cnblogs.com/linjiqin/archive/2011/12/28/2304940.html 四十七.实现调用Android ...

  3. shiro（三），使用第三方jdbcRealm连接数据库操作

    这里采用第三方实现好的JdbcRealm连接数据库:首先来看一下源码: 接着前面的说:就把这个类当做我们自己写的就好了,我们需要实例化它,然后给他注入一个数据源 下面是ini文件配置 [main] # ...

  4. Beta 凡事预则立

    写在Beta冲刺前 关于组长是否重选的议题和结论 总体结论 组长无需更换 队内无人替代 理由 当前组长能够较好的号召和组织团队成员进行工作 当前组长能够对项目有合理的规划 当前组长被大家一致认可可以继 ...

  5. C语言数据类型作业

    一.PTA实验作业 题目1:7-4 打印菱形图案 1. 本题PTA提交列表 2. 设计思路 1.定义m,n(用于计算空格数,输出"* "数),i,j,k(用于循环) 2.输入n,并 ...

  6. 洛谷P2894 [USACO08FEB]酒店Hotel

    P2894 [USACO08FEB]酒店Hotel https://www.luogu.org/problem/show?pid=2894 题目描述 The cows are journeying n ...

  7. Ubuntu安装使用latex

    TeX Live is a TeX distribution to get up and running with the TeX document production system. To ins ...

  8. 遍历JSON

    第一种: each,不做详细说明,太常用了 第二种:我用来遍历单个组,实现前端界面绑定 for(var item in person){ alert("person中"+item+ ...

  9. thinkphp框架的大D方法应用

    大D方法中需要传递一个模型,比如UserModer,就传递D('User'),而数据库中存在一个表比如think_user,其中think就是前缀. 在UserModel里面存在自动验证.自动完成可以 ...

  10. mysql数据库的三范式的设计与理解

    一般的数据库设计都需要满足三范式,这是最基本的要求的,最高达到6NF,但是一般情况下3NF达到了就可以 一:1NF一范式的理解: 1NF是关系型数据库中的最基本要求,就是要求记录的属性是原子性,不可分 ...