本文主要介绍 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. Algorithm --> 棋盘中求出A到B的最小步数

    求出A到B的最小步数 给定象棋盘,以及位置A和B, 求出从A到B的最小步数 代码: #include <cstdio> #include <iostream> #include ...

  2. java 对象和封装

    软件出现的目的     面向对象设计和开发程序的好处用计算机语言描述现实世界    交流更加流畅用计算机解决现实世界的问题   提高设计和开发效率 面向对象的思想    描述→ 面向对象的世界     ...

  3. 根据IO流源码深入理解装饰设计模式使用

    一:摘要 通过对java的IO类中我们可以得出:IO源码中使用装饰设计模式频率非常高, 对装饰设计模式而言,他能够避免继承体系的臃肿,同时也可以动态的给一个对象添加一些额外的功能,如果要扩展一个功能, ...

  4. [福州大学]W班平时成绩排名

    评分链接 个人作业 第一次作业 http://www.cnblogs.com/1qazse4/p/7506448.html 第二次作业 http://www.cnblogs.com/1qazse4/p ...

  5. Python2.x的编码问题

    1. 计算机编码历史 ASCII Python的默认编码,其是一种单字节的编码.刚开始计算机世界里只有英文,而单字节可以表示256个不同的字符.最开始ASCII只定义了128个字符编码,包括96个文字 ...

  6. 201621123060 《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...

  7. networkx 学习

    import networkx as nx import pylab import numpy as np #自定义网络 row=np.array([,,,,,,]) col=np.array([,, ...

  8. android数据库持久化框架, ormlite框架,

    前言 Android中内置了SQLite,但是对于数据库操作这块,非常的麻烦.其实可以试用第3方的数据库持久化框架对之进行结构上调整, 摆脱了访问数据库操作的细节,不用再去写复杂的SQL语句.虽然这样 ...

  9. 400多个开源项目以及43个优秀的Swift开源项目-Swift编程语言资料大合集

    Swift 基于C和Objective-C,是供iOS和OS X应用编程的全新语言,更加高效.现代.安全,可以提升应用性能,同时降低开发难度. Swift仍然处于beta测试的阶段,会在iOS 8发布 ...

  10. java关于for循环。

    众所周知,JAVA中for循环的基本格式为: for(初始化表达式:布尔表达式:循环后更新表达式){循环体} 举个例子来说可以写成 (1)for (int x=1;x<10;x++){ Syst ...