文章 - contenteditable插入及粘贴纯文本内容

contenteditable插入及粘贴纯文本内容

<!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>

</body>
<script>

document.getElementById('insert').onclick=function(){
    var content = prompt('请输入内容');
    document.getElementById('editor').focus();
    if(!!content){
        insertHtmlAtCaret('<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 insertHtmlAtCaret(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>

评论 ( 0 )

暂无评论

赶紧努力消灭 0 回复

contenteditable插入及粘贴纯文本内容

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码