本文主要介绍 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. 怎样把Linux的私钥文件id_rsa转换成putty的ppk格式

    在Linux VPS下产生的私钥文件putty是不认识的,putty只认识自己的ppk格式,要在这两种格式之间转换,需要PuTTYgen这个程序. puttygen是putty的配套程序,putty的 ...

  2. 源码实现 --> strrev

    字符串的顺序反序 函数 char *strrev(char *string); 将字符串string中的字符顺序颠倒过来. NULL结束符位置不变. 返回调整后的字符串的指针. 源码 //其基于的思想 ...

  3. Ajax教程（转载）

    第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是一 ...

  4. JDBC（通俗易懂）简单的操作（增、删、改、查）

    项目所写的类: 说明:①.DButil 动态加载数据库驱动,以及获取java.sql.Connection的对象. ②.Personmodel 数据库列(栏位)所对应的字段,定义了相应的set和get ...

  5. javaScript设计模式-创建型设计模式

    我们大家一听到设计模式就感觉设计模式是一个高端的东西,到底什么是设计模式呢?其实设计模式也就是我们的前辈在写代码的时候遇到的问题,提出的解决方案,为了方便人与人之间的交流,取了个名字,叫做设计模式. ...

  6. python全栈学习--day5

    字典 特点:字典是python中唯一的映射类型,采用键值对(key-value) 的形式存数据. 存储大量的数据,是关系型数据,查询数据快. 字典初始说明: 遍历字典从列表开始,列表是从头便利到尾的. ...

  7. 『练手』手写一个独立Json算法 JsonHelper

    背景: > 一直使用 Newtonsoft.Json.dll 也算挺稳定的. > 但这个框架也挺闹心的: > 1.影响编译失败:https://www.cnblogs.com/zih ...

  8. javascript抛物投栏（抛物线实践）

    平面内,到定点与定直线的距离相等的点的轨迹叫做抛物线.水平抛物线就是水平匀速,垂直加速的运动. 抛物线的性质:面内与一个定点F和一条定直线l 的距离相等的点的轨迹叫做抛物线. 定点F叫做抛物线的焦点. ...

  9. CDH:5.14.0 中 Hive BUG记录

    CDH5.14.0使用的HIVE版本: 自建表log: +----------------------------------------------------+--+ | createtab_st ...

  10. 让linux远程主机在后台运行脚本

    后台挂起:python xxx.py & 在脚本命令后面加入"&"符号就可以后台运行.结束进程:kill -9 sidps -ef | grep ... 查询sid