vue中可编辑div添加@功能

简介1.有默认值情况下，光标自动定位到最后2.按@键，或者@+shift组合键，可添加被@姓名3.可整体删除@姓名4.在光标位置插入指定html元素如图所示源码（复制另存txt，修改.html直接运行）<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name=

刘白超

2042人浏览 · 2022-04-19 13:13:34

刘白超 · 2022-04-19 13:13:34 发布

简介

1.有默认值情况下，光标自动定位到最后
2.按@键，或者@+shift组合键，可添加被@姓名
3.可整体删除@姓名
4.在光标位置插入指定html元素

如图所示

在这里插入图片描述

源码（复制另存txt，修改.html直接运行）

<!DOCTYPE html>
<html lang="zh">
<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>vue中可编辑div添加@功能</title>
    <style>
    .box{
        border: 1px solid red;
        margin-bottom: 10px;
        height: 100px;
        border-radius: 8px;
        padding:10px;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" contenteditable id='box' @keydown="onKeyDownInput($event)">
            <span contenteditable='false'>我是可整体删除得元素</span>
            我是可编辑的div
        </div>
        <button @click="pasteHtmlAtCaret('我是插入的内容')">插入元素</button>
        <button @click="del()">删除所有插入元素</button>
        <p>按@键，或者@+shift组合键，可添加被@姓名</p>
    </div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return { 
                bgColor:'#19AEF7',
            }
        },
        mounted(){
            // 如果需要自动聚焦，调用
            this.autoToEnd()
        },
        methods: {
            // 自动获取焦点，光标定位到最后
            autoToEnd(){
                let box = document.getElementById('box')
                // 自动获取焦点，单纯获取焦点
                box.focus()
                // 有默认内容，获取焦点，需要加上后面代码，否则光标停留在开始位置，需要把光标移动到最后位置。
                let range = document.createRange();
                range.selectNodeContents(box);
                range.collapse(false);
                let sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
                console.dir(box)
            },
            //删除
            del(){
                let box = document.getElementById('box')
                let zi = document.getElementById('box').getElementsByTagName("span")
                while (zi.length>0) {
                    zi[0].parentElement.removeChild(zi[0]);
                }
                console.log('你瞅瞅你都写了些啥：',box.innerText)
            },
            //@调用
            onKeyDownInput(e) {
                // 中文输入法的时候@的code是 229 英文code是 50， 判断是否按住shift + @键
                // 无论keydown还是keyup都只有pc端有效，移动端无论输入什么keycode都是229！！！史诗级浏览器bug
                if (e.keyCode === 229 || e.keyCode === 50) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
                    console.log('-------你按了@吗')
                    this.pasteHtmlAtCaret('@刘斩仙')
                }
            },
            //div插入内容
            pasteHtmlAtCaret(html) {
                let sel, range;
                if (window.getSelection) {
                    // IE9 and non-IE
                    sel = window.getSelection();
                    if (sel.getRangeAt && sel.rangeCount) {
                        range = sel.getRangeAt(0);
                        range.deleteContents();
                        console.log('1')
                        // Range.createContextualFragment() would be useful here but is
                        // only relatively recently standardized and is not supported in
                        // some browsers (IE9, for one)
                        let el = document.createElement("div");
                        el.innerHTML = `<span contenteditable="false">${html}</span> `//html;
                        let frag = document.createDocumentFragment(), node, lastNode;
                        while ( (node = el.firstChild) ) {
                            lastNode = frag.appendChild(node);
                        }
                        range.insertNode(frag);

                        // Preserve the selection
                        if (lastNode) {
                            range = range.cloneRange();
                            range.setStartAfter(lastNode);
                            range.collapse(true);
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
                } else if (document.selection && document.selection.type != "Control") {
                    // IE < 9
                    document.selection.createRange().pasteHTML(html);
                    console.log('2')
                }
            }
        }
    })
</script>
</html>