本文主要介绍 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. LeetCode算法一题型一以及解答。

    题目: 给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 分析: 普遍方法是直接遍历两遍数组,第一遍用target-nums[i],第二遍找 ...

  2. 十分钟释疑Oracle中“小表超慢”之谜（SQL调优/SQL优化）

    前几天,一个用户找到我,说查一个小表的时候非常慢,我问有多慢,他说最快也得半个小时才能出结果,有时干脆不出结果,我说小表多大,他说就几十兆,有点疑惑,让他帮忙获取了相关信息,一看就明白了,原来所谓的小 ...

  3. 201621123040《Java程序设计》第3周学习总结

    1.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 面向对象的思想 对象 类 1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来. 掌握的还不够深 ...

  4. python中使用flask时遇到的markupsafe._compat包缺失的问题与解决

    环境:windows7 + python3.6.0 在尝试使用python的flask时,按照flask的tutorial操作,装好flask.venv后,对tutorial中的hello.py进行运 ...

  5. Swift - 使用导航条和导航条控制器来进行页面切换并传递数据

    转自:http://www.hangge.com/blog/cache/detail_586.html

  6. 单向链表在O(1)时间内删除一个节点

    说删链表节点,第一时间想到就是遍历整个链表,找到删除节点的前驱,改变节点指向,删除节点,但是,这样删除单链表的某一节点,时间复杂度就是O(n),不符合要求: 时间复杂度是O(n)的做法就不说了,看看O ...

  7. 点击tableViewCell,调用打电话的功能

    对于点击tableViewCell,调用打电话的功能,按照一般的方法,使用Appdelegate的OpenUrl的方法,使用前先使用UIAlertView展示,让用户选择是否拨打,但是发现了个简单的方 ...

  8. java unicode和字符串间的转换

    package ykxw.web.jyf; /** * Created by jyf on 2017/5/16. */ public class unicode { public static voi ...

  9. Spring-Data-JPA整合MySQL和配置

    一.简介 (1).MySQL是一个关系型数据库系统,是如今互联网公司最常用的数据库和最广泛的数据库.为服务端数据库,能承受高并发的访问量. (2).Spring-Data-Jpa是在JPA规范下提供的 ...

  10. django + nginx + uwsgi + websocket

    最近使用django框架做了一个简单的聊天机器人demo, 开发的过程中使用了django自带的websocket模块,当使用django框架自带的wsgi服务去启动的话,没有什么问题.如果要使用uw ...