在我們開發過程中，經常用到的文本輸入框，常用的是input/textarea。然而在有些情況下，input/textarea可能滿足不了我們的業務需求，textarea/input大部分是處理純文本，不能附加一些自定義樣式，文本域內業務操作空間也不怎么大，但是富文本，即可以編輯的HTML，可以針對輸入內容做任意自定義處理，因此，在特定業務需求下，富文本編輯更符合我們的實際業務要求。
富文本基本使用：只需要給HTML標簽添加一個contenteditable=‘true’即可完成普通HTML與富文本的轉換，效果如下：
<section> <h3>富文本編輯器</h3> <div style="height: 300px;width: 300px;background: #eee;" contenteditable="true"></div> </section>
當我們輸入的時候，是輸入普通的文本，具體樣式以我們設置的css為准。當我們復制文本的時候，默認會把所有的樣式復制進去，如下所示：
這一點有時候也是比較繁瑣的，可能我們並不需要這些默認樣式，我們只想要復制的文本，按照我們的要求進行轉換，此時可能就要用到強大的Selection和Range對象了，可以解決我們開發中很多常見的問題。下面就簡介下Selection 和 Range對象：
借用MDN上的解釋：Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區，可能橫跨多個元素。文本選區由用戶拖拽鼠標經過文字而產生。要獲取用戶檢查或修改的Selection對象，請調用window.getSelection()。
Range則是每個具體的選區，對於富文本的復制文本格式過濾，我們主要就是借助Range對象中某些具體的屬性和方法，從而來操作選區內容，具體實現代碼如下：
1 document.addEventListener('paste', e => { 2 // 阻止默認的復制事件 3 e.preventDefault() 4 let txt = '' 5 let range = null 6 // 獲取復制的文本 7 txt = e.clipboardData.getData('text/plain') 8 // 獲取頁面文本選區 9 range = window.getSelection().getRangeAt(0) 10 // 刪除默認選中文本 11 range.deleteContents() 12 // 創建一個文本節點，用於替換選區文本 13 let pasteTxt = document.createTextNode(txt) 14 // 插入文本節點 15 range.insertNode(pasteTxt) 16 // 將焦點移動到復制文本結尾 17 range.collapse(false) 18 })
參考資料：