contenteditable 插入及粘贴纯文本内容

  本文主要介绍 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>

 

posted @ 2018-04-18 11:18  晨の风  阅读(5297)  评论(2编辑  收藏  举报