利用HTML5的contenteditable写一个富文本增加图片的Test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [contenteditable]:focus{outline: none;}
        .QiunsEditor{
            width:800px;
            height:400px;
            border:1px solid #999;
            padding:15px;
            overflow:auto;
        }

        #tips {
            color:#999;
            position:absolute;
            top:15px;
            left:15px;
        }

        .QiunsEditorBody {
            position:relative;
        }

        .QiunsEditorNav {
            margin-top:15px;
        }

        .QiunsEditorImages {
            max-width:100%;
            margin:0 auto;
            display:block;
        }
    </style>
</head>
<body>
    <div class="QiunsEditorBody">
        <div class="QiunsEditor" id="QiunsEditor" contenteditable="plaintext-only" ></div>
        <div id="tips">点击这里输入内容...</div>
    </div>
    <div>
        <div onclick="insert()" style="margin-top:12px;cursor:pointer;">插入图片</div>
    </div>
    <script>
            // 编辑器
            var QiunsEditor = document.getElementById('QiunsEditor');
            // 光标位置
            var range;

            var cutitype = 0;

            /**
             * 编辑器点击事件
             * 每一次点击编辑器都要储存最新的光标所在位置
             **/
            QiunsEditor.onclick = function() {
                // 选择对象
                let selection = window.getSelection();
                // 重置光标位置
                range = selection.getRangeAt(0);
            }

            /**
             * 向编辑器植入新的元素节点
             **/
            function insert() {
                // 编辑框设置焦点
                QiunsEditor.focus();
                // 选择对象
                let selection = window.getSelection();
                // 判断是否有光标位置信息，如果没有光标位置信息就想方设法让用户点击一次编辑器就行
                if (range != undefined) {
                    // 创建元素节点
                    var newNode = document.createElement("img");
                    // 创建元素属性
                    newNode.className = "QiunsEditorImages";
                    newNode.src = "../cl.jpg";
                    // 植入元素节点
                    range.insertNode(newNode);
                    // 设置元素节点结束位置
                    range.setEnd(range.endContainer, range.endOffset);
                    // 取消选中，向元素节点末尾处折叠
                    range.collapse(false);
                    // 清除所有光标信息
                    selection.removeAllRanges()
                    // 更新新的光标对象
                    selection.addRange(range);
                }

            }

            
            /**
             * 编辑器失去焦点事件
             **/
            QiunsEditor.onblur = function() {
                // 判断是否开启提示
                focusTips(false);
                
                // 获取编辑器对象
                let sel = window.getSelection();
                if (sel.anchorNode.nodeName != '#text') {
                    // 储存对象
                    selection = sel;
                    // 重置光标位置
                    range = sel.getRangeAt(0);
                } else {
                    // 重置光标位置
                    range = sel.getRangeAt(0);
                }
            }

            /**
             * 编辑器失去焦点后提示
             **/
             function focusTips(type) {
                // 判断事件，true = 获取焦点; false = 失去焦点
                if (type) {
                    // 如果获取焦点则关闭提示
                    document.getElementById("tips").style.display="none";
                } else {
                    // 如果失去焦点则判断是否有内容
                    if (QiunsEditor.innerHTML.length <= 0) {
                        // 无内容，开启提示
                        document.getElementById("tips").style.display = "block";
                    } else {
                        // 有内容，关闭提示
                        document.getElementById("tips").style.display="none";
                    }
                }
             }

            /**
             * 编辑器获取焦点事件
             **/
            QiunsEditor.onfocus = function() {
                focusTips(true);
            }
    </script>
</body>
</html>