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