摘要:以上版本的內的清除加粗問題。大多數命令影響文檔的選擇粗體,斜體等,而其他命令插入新元素添加鏈接或影響整行縮進。具體的命令列表可以參看文檔,一般編輯器內常見的樣式有加粗,斜體,下劃線和刪除線。這個具體表現在,調用第二次取消之后再次輸入仍在內。
本文僅記錄本人工作中遇到的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)一次后,所選文本或是當前光標處被包含,調用第二次則取消。
這個bug具體表現在,調用第二次取消之后再次輸入仍在內。
以下為解決方案的代碼,通過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); } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89048.html
摘要:安全安全是很重要的,現在有些實現中使用了,而在之前,存在任意代碼執行漏洞,這就會導致嚴重的安全問題。 showImg(https://segmentfault.com/img/bV4k9Q?w=719&h=372); 什么是JS Bridge 在大多數APP開發過程中,都會通過H5來實現部分功能,而Hybird APP基本90%以上都是H5?,F在很少有純原生的APP。但是,由于H5頁面...
閱讀 1319·2021-11-24 09:38
閱讀 3256·2021-11-22 12:03
閱讀 4158·2021-11-11 10:59
閱讀 2317·2021-09-28 09:36
閱讀 1032·2021-09-09 09:32
閱讀 3412·2021-08-05 10:00
閱讀 2528·2021-07-23 15:30
閱讀 2973·2019-08-30 13:12