代码备忘录
只实现了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>以后其他功能会不断完善
参考 踩坑小王子
