iOS的webview下的一個bug

本文僅記錄本人工做中遇到的bug和解決方案。

iOS 10.3以上版本的webview內的document.execCommand('bold', false, null)清除加粗問題。
由於app內的富文本編輯器大多用webview的前端頁面與原生調用bridge方式實現，因而在現有的文本編輯器上進行了精簡和根據要求進行了必定功能的開發。
首先介紹一下document.execCommand。

當一個HTML文檔切換到設計模式(designMode)時，文檔對象暴露 execCommand方法，該方法容許運行命令來操縱可編輯區域的內容。大多數命令影響文檔的選擇（粗體，斜體等），而其餘命令插入新元素（添加連接）或影響整行（縮進）。當使用 contentEditable時，調用 execCommand() 將影響當前活動的可編輯元素。

詳細請看mdn的文檔：傳送門
這個方法基本上也就只有在文本編輯器中才會使用，其做用是根據傳入的第一個參數做爲命令，第三個參數做爲額外參數傳入，默認爲null，第二個參數是默認UI，因爲瀏覽器的兼容緣由，通常爲fasle。
具體的命令列表能夠參看文檔，通常編輯器內常見的樣式有加粗(bold)，斜體(italic
)，下劃線(underline)和刪除線(strikeThrough)。
調用兩次以後就爲默認取消，例如調用document.execCommand('bold', false, null)一次後，所選文本或是當前光標處被<b></b>包含，調用第二次則取消。

這個bug具體表如今，調用第二次取消以後再次輸入仍在<b></b>內。
如下爲解決方案的代碼，經過document.queryCommandState判斷當前選區或光標位置是有bold樣式，若是結果爲true，則在調用document.execCommand('bold', false, null)取消以後，利用insertHTML命令在當前位置後插入一個零寬不連字空格‌，阻斷其輸入時默認向前插入的現象，同時這個空格因爲零寬也不會影響到視覺效果。

function setBold(){
    if (document.queryCommandState('bold')) {
        document.execCommand('bold', false, null);
        document.execCommand('insertHTML', false, '‌');
    } else {
        document.execCommand('bold', false, null);
    }
}