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);
    }
}