简介
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>