前端实现富文本的原理

Posted 2021-02-06 wwt2026

前端实现富文本的原理

富文本编辑，之前一直感觉很神奇，翻到一篇文章介绍原理，自己试了下，突然就豁然开朗，记录一下

首先编辑部分可以直接是一个div,通过 contentEditable="true"属性设置能够编辑，设置后元素就变成类似textarea一样的文本域

接着通过下面方法实现选中文字的样式

https://www.cnblogs.com/leong-min/p/6483523.html

// 后两个基本固定，前一个可以为`cut`、`blod`等，将选中的文字改变样式
document.execCommand(aCommandName, false, null)

例子，选中

<input value="点击剪切" id="edit-btn" type="button">
<div contenteditable="true">asdasda</div>
<script>
  var btn = document.getElementById(‘edit-btn‘);
   btn.onclick = function() {
     var aa = document.execCommand("cut", false, null);
     console.log(aa);//若log输出true说明点击按钮后按钮生效；
   }
</script>