代码备忘录
只实现了tab增加4个空格功能的极简富文本,其他功能日后会不断完善
<template>
<div class="edit-line">
<div contenteditable="true" class="edit-content" placeholder="吐槽一下.." ref="edit" @keydown.tab.stopdefault="tab"></div>
</div>
</template>
<script>
export default {
data() {
return {
name: "editor"
};
},
methods: {
tab(event) {
// 阻止默认切换元素的行为
if (event && event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
// 获取光标的range对象 event.view 是一个window对象
let range = event.view.getSelection().getRangeAt(0);
// 光标的偏移位置
let offset = range.startOffset;
// 新建一个span元素
let span = document.createElement("span");
// 四个 表示四个空格
span.innerHTML = " ";
// 创建一个新的range对象
let newrange = document.createRange();
// 设置新的range的位置,也是插入元素的位置
newrange.setStart(range.startContainer, offset);
newrange.setEnd(range.startContainer, offset);
newrange.collapse(true);
newrange.insertNode(span);
// 去掉旧的range对象,用新的range对象替换
event.view.getSelection().removeAllRanges();
event.view.getSelection().addRange(range);
// 将光标的位置向后移动一个偏移量,放到加入的四个空格后面
range.setStart(span, 1);
range.setEnd(span, 1);
}
}
};
</script>
<style lang="less" scoped>
.edit-line {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.edit-content {
transition: width 400ms ease-in;
width: 80%;
height: 45px;
outline: 0;
padding: 0 4%;
border: 1px solid #dddddd;
border-radius: 12px;
margin: 0 2%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.4);
font-size: larger;
/*!*保证只能写入文本信息,不能是富文本*!*/
/*-webkit-user-modify: read-write-plaintext-only*/
}
.edit-content:empty {
width: 35%;
color: lightgray;
}
.edit-content:empty::before {
content: attr(placeholder);
}
.edit-content:focus {
background-color: white;
width: 80%;
}
</style>
以后其他功能会不断完善
参考 踩坑小王子