處理 paste 粘貼

在富文本編輯器中，粘貼效果默認采用如下規則：

如果是帶有格式的文本，則保留格式(格式會被轉換成html標簽的形式)
粘貼圖文混排的內容，圖片可以顯示，src 為圖片真實地址。
通過復制圖片來進行粘貼的時候，不能粘入內容
粘貼其他格式內容，不能粘入內容
為了能夠控制粘貼的內容，我們監聽 paste 事件。該事件的 event 對象中會包含一個 clipboardData 剪切板對象。我們可以利用該對象的 getData 方法來獲得帶有格式和不帶格式的內容，如下。

let plainText = event.clipboardData.getData("text/plain"); // 無格式文本
let plainHTML = event.clipboardData.getData("text/html"); // 有格式文本
之后調用 document.execCommand("insertText", false, plainText); 或 document.execCommand("insertHTML", false, plainHTML; 來重寫編輯上的paste效果。

然而對于規則 3 ，上述方案就無法處理了。這里我們要引入 event.clipboardData.items 。這是一個數組包含了所有剪切板中的內容對象。比如你復制了一張圖片來粘貼，那么 event.clipboardData.items 的長度就為2：
items[0] 為圖片的名稱，items[0].kind 為 ‘string’, items[0].type 為 ‘text/plain’ 或 ‘text/html’。獲取內容方式如下：

items[0].getAsString(str => {

// 處理 str 即可

})
items[1] 為圖片的二進制數據，items[1].kind 為’file’， items[1].type 為圖片的格式。想要獲取里面的內容，我們就需要創建 FileReader 對象了。示例代碼如下：

let file = items[1].getAsFile();
// file.size 為文件大小
let reader = new FileReader();
reader.onload = function() {

// reader.result 為文件內容，就可以做上傳操作了

}
if(/image/.test(item.type)) {

reader.readAsDataURL(file);   // 讀取為 base64 格式

}
處理完圖片，那么對于復制粘貼其他格式內容會怎么樣呢？在 mac 中，如果你復制一個磁盤文件，event.clipboardData.items 的長度為 2。 items[0] 依然為文件名，然而 items[1] 則為圖片了，沒錯，是文件的縮略圖。

輸入法處理

當使用輸入發的時候，有時候會發生一些意想不到的事情。 比如百度輸入法可以輸入一張本地圖片，為此我們需要監聽輸入法產生的內容做處理。這里通過如下兩個事件處理：

compositionstart: 當瀏覽器有非直接的文字輸入時, compositionstart事件會以同步模式觸發
compositionend: 當瀏覽器是直接的文字輸入時, compositionend會以同步模式觸發
修復移動端的問題

在移動端，富文本編輯器的問題主要集中在光標和鍵盤上面。我這里介紹幾個比較大的坑。

自動獲取焦點

如果想讓我們的編輯器自動獲得焦點，彈出軟鍵盤，可以利用 focus() 方法。然而在 ios 下，死活沒有結果。這主要是因為 ios safari 中，為了安全考慮不允許代碼獲得焦點。只能通過用戶交互點擊才可以。還好，這一限制可以去除：

[self.appWebView setKeyboardDisplayRequiresUserAction:NO]
iOS 下回車換行，滾動條不會自動滾動

在 iOS 下，當我們回車換行的時候，滾動條并不會隨著滾動下去。這樣光標就可能被鍵盤擋住，體驗不好。為了解決這一問題，我們就需要監聽 selectionchange 事件，觸發時，計算每次光標編輯器頂端距離，之后再調用 window.scroll() 即可解決。問題在于我們要如何計算當前光標的位置，如果僅是計算光標所在父元素的位置很有可能出現偏差(多行文本計算不準)。我們可以通過創建一個臨時 元素查到光標位置，計算元素的位置即可。代碼如下：

function getCaretYPosition() {

let sel = window.getSelection(),
    range = sel.getRangeAt(0);
let span = document.createElement("span");
range.collapse(false);
range.insertNode(span);
var topPosition = span.offsetTop;
span.parentNode.removeChild(span);
return topPosition;

}
正當我開心的時候，安卓端反應，編輯器越編輯越卡。什么鬼？我在 chrome 上線檢查了一下，發現 selectionchange 函數一直在運行，不管有沒有操作。
在逐一排查的時候發現了這么一個事實。range.insertNode 函數同樣觸發 selectionchange 事件。這樣就形成了一個死循環。這個死循環在 safari 中就不會產生，只出現在 safari 中，為此我們就需要加上瀏覽器類型判斷了。

鍵盤彈起遮擋輸入部分

網上對于這個問題主要的方案就是，設置定時器。局限與前端，確實只能這采用這樣笨笨的解決。最后我們讓 iOS 同學在鍵盤彈出的時候，將 webview 高度減去軟鍵盤高度就解決了。

CGFloat webviewY = 64.0 + self.noteSourceView.height;
self.appWebView.frame = CGRectMake(0, webviewY, BDScreenWidth, BDScreenHeight - webviewY - height);
插入圖片失敗

在移動端，通過調用 jsbridge 來喚起相冊選擇圖片。之后調用 insertImage 函數來向編輯器插入圖片。然而，插入圖片一直失敗。最后發現是因為早 safari 下，如果編輯器失去了焦點，那么 selection 和 range 對象將銷毀。因此調用 insertImage 時，并不能獲得光標所在位置，因此失敗。為此需要增加，backupRange() 和 restoreRange() 函數。當頁面失去焦點的時候記錄 range 信息，插入圖片前恢復 range 信息。

backupRange() {

let selection = window.getSelection();
let range = selection.getRangeAt(0);
this.currentSelection = {
    "startContainer": range.startContainer,
    "startOffset": range.startOffset,
    "endContainer": range.endContainer,
    "endOffset": range.endOffset
}

}
restoreRange() {

if (this.currentSelection) {
    let selection = window.getSelection();
        selection.removeAllRanges();
    let range = document.createRange();
    range.setStart(this.currentSelection.startContainer, this.currentSelection.startOffset);
    range.setEnd(this.currentSelection.endContainer, this.currentSelection.endOffset);
    // 向選區中添加一個區域
    selection.addRange(range);
}

}
在 chrome 中，失去焦點并不會清除 seleciton 對象和 range 對象，這樣我們輕輕松松一個 focus() 就搞定了。

重要問題就這么多，限于篇幅限制其他的問題省略了。總體來說，填坑花了開發的大部分時間。

其他功能
基礎功能修修補補以后，實際項目中有可能遇到一些其他的需求，比如當前光標所在文字內容狀態啊，圖片拖拽放大啊，待辦列表功能，附件卡片等功能啊，markdown切換等等。在了解了js 富文本的種種坑之后，range 對象的操作之后，相信這些問題你都可以輕松解決。這里最后提幾個做擴展功能時候遇到的有去的問題。

回車換行帶格式

前面已經說過了，富文本編輯器的機制就是這樣，當你回車換行的時候新產生的內容和之前的格式一模一樣。如果我們利用 .card 類來定義了一個卡片內容，那么換行產生的新的段落都將含有 .card 類且結構也是直接 copy 過來的。我們想要屏蔽這種機制，于是嘗試在 keydown 的階段做處理(如果在 keyup 階段處理用戶體驗不好)。然而，并沒有什么用，因為用戶自定義的 keydown 事件要在 瀏覽器富文本的默認 keydown 事件之前觸發，這樣你就做不了任何處理。
為此我們為這類特殊的個體都添加一個 property 屬性，添加在 property 上的內容是不會被copy下來的。這樣以后就可以區分出來了，從而做對應的處理。

獲取當前光標所在處樣式

這里主要是考慮 下劃線，刪除線之類的樣式，這些樣式都是用標簽類描述的，所以要遍歷標簽層級。直接上代碼：

function getCaretStyle() {

let selection = window.getSelection(),
    range = selection.getRangeAt(0);
    aimEle = range.commonAncestorContainer,
    tempEle = null;
let tags = ["U", "I", "B", "STRIKE"],
    result = [];
if(aimEle.nodeType === 3) {
    aimEle = aimEle.parentNode;
}
tempEle = aimEle;
while(block.indexOf(tempEle.nodeName.toLowerCase()) === -1) {
    if(tags.indexOf(tempEle.nodeName) !== -1) {
        result.push(tempEle.nodeName);
    }
    tempEle = tempEle.parentNode;
}
let viewStyle = {
    "italic": result.indexOf("I") !== -1 ? true : false,
    "underline": result.indexOf("U") !== -1 ? true : false,
    "bold": result.indexOf("B") !== -1 ? true : false,
    "strike": result.indexOf("STRIKE") !== -1 ? true : false
}
let styles = window.getComputedStyle(aimEle, null);
viewStyle.fontSize = styles["fontSize"],
viewStyle.color = styles["color"],
viewStyle.fontWeight = styles["fontWeight"],
viewStyle.fontStyle = styles["fontStyle"],
viewStyle.textDecoration = styles["textDecoration"];
viewStyle.isH1 = Util.findParentByTagName(aimEle, "h1") ? true : false;
viewStyle.isH2 = Util.findParentByTagName(aimEle, "h2") ? true : false;
viewStyle.isP = Util.findParentByTagName(aimEle, "p") ? true : false;
viewStyle.isUl = Util.findParentByTagName(aimEle, "ul") ? true : false;
viewStyle.isOl = Util.findParentByTagName(aimEle, "ol") ? true : false;
return viewStyle;

}