前端實現富文本的原理

前端實現富文本的原理

富文本編輯，之前一直感覺很神奇，翻到一篇文章介紹原理，自己試了下，突然就豁然開朗，記錄一下

首先編輯部分可以直接是一個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>