所謂的富文字編輯器就是內嵌在瀏覽器上、所見即所得的文字編輯器，它的形式如下：

layui框架中內建了layedit模組，該模組就是富文字編輯器模組，在最近兩天中我自己使用原生js實現了簡易的富文字編輯器，具體效果如下：

首先說說這個demo的組織結構：

在這個demo中，整體是一個IIFE，使用window物件將其建構函式暴露出去，想要使用這個demo，需要建立一個容器設定id屬性為ueditor，其實demo需要做的幾個關鍵點如下

• 構建文字編輯器的主體html結構
• 繫結工具欄的每個工具的事件繫結
• 如何獲取選擇的文字
• 如何給選擇的文字應用樣式
• 如何插入圖片

對於1和2這兩個問題就是動態建立節點並追加到指定元素下，並使用addEventListener(就不考慮IE了)來繫結事件。

下面就來說說我對於下面3個關鍵點的處理：

• 獲取文字，先來說說獲取文字的動作，滑鼠按下、拖動、鬆開、點選具體工具的過程，所以我對於內容區繫結mouseout事件。
  當選擇文字後離開目標點時觸發事件處理程式，使用window.getSelection()方法來獲取被選擇區域物件獲取其文字，該方法存在相容問題，感興趣的同學可以具體看看。
• 如何給選擇的文字應用樣式：
  我的做法是新增標籤新增指定class類來實現，對於對齊的樣式，需要改變包含文字的元素為塊狀元素，應用text-align樣式
• 如何插入圖片：
  實際上還是新增img標籤，獲取點選的表情的src屬性值，新增到內容區

實現過程中的問題：

• 剛開始打算使用textarea來作為內容區的，但是有一個問題就是插入的html標籤不被識別，只能是文字，所以就使用div+contentEditable來實現

該demo的問題：

• 體驗性不好，整體操作給人感覺不自然不流暢
• 樣式沒有好好設計，彈出效果生硬，沒有應用動畫效果
• 文字選擇的時候，感覺不自然
• 應用樣式重複問題，沒有做處理優化

富文字編輯器demo的實現差強人意吧，以後會將其作為獨立專案重新編寫。

下面就分析下layui框架中富文字編輯器模組，該內建模組的組織結構圖如下所示：

從上圖中可見，作者將建立文字編輯器的方法作為api暴露了出來，在使用過程中需要手動呼叫來實現文字編輯器的建立工作。

關於該內建模組具體的執行邏輯如下圖所示：

在分析了該內建模組的原始碼過程中，作者實現文字樣式的應用是通過document.execCommand()：方法來實現的，該方法的功能就是用於操作可編輯區域的文字，可以對於改變文字大小字型等，實際上該方法也是新增標籤來實現，但是對於重複性標籤做了處理。當然該內建模組還提供了其他的功能，我會對其原始碼做詳細的註釋，具體可以檢視我的