IOS - WebView富文本开发

最近开发基于Web版的富文本，要实现PC与移动端互通，而且还有一些基础的 *** 作，故而参考了许多开源框架和富文本JS框架。

实现富文本技术主要分为三类：ceretext、textkit、webview。这三类各有优劣，开发的难度、方式、用户体验也是有非常大的不同，这里不详细说明，具体的可以找度娘。

这里我主要使用的基于webview富文本框架：ZSSRichTextEditor，再此基础上进行的改造和开发。

在ZSSRichTextEditor框架中，有很多的文件，猛地一看有些不知所措。仔细阅读后才发现，主要的文件只有4个，其他的基本都是UI及一些交互。

技术实现并不复杂，对于一个不懂得js的移动开发人员来说，看几天也能明白个大概，也可以上手调试及修改。

我的建议是不要完全照搬，还是根据自己的需求，进行适当的改动。

众所周知，wkwebview的性能要比前者高很多，我在开发的时候，也是首选它，但是在个别的js方法中，会遇到兼容性的问题。

例如：插入的视频不能显示，插入的图片不能使用file:///来显示，只能通过转base64才可以，及其他。

这些问题会给你带来很多的困扰，不止是显示，还有后续的缓存 *** 作，导出HTML，删除 *** 作等。

为了更简单的开发，我选择了UIWebView，虽然牺牲一些性能，但是 *** 作体验也是ok的，没有明显的差距。

通过分类的方法可以删除工具条，UIWebView和WKWebView都可以，具体可以参考文章：

ios - 删除WebView键盘上的工具条

字体加粗：document.execCommand('bold', false, null)

具体的问题是这样的：对字体“加粗”后，再次调用“加粗”，使用英文和数字是没有任何问题的，字体变成不加粗的状态；使用中文输入法时，没有确认之前，字体都是正常的，当选中确认的文字后，字体就会跟前面的样式走，还是加粗。

这个问题不止是 加粗，斜体，下划线也是如此，可能是webview的一个bug，要解决这个问题，就需要在输入的前方增加一个'&zwnj；'字符。

'&zwnj；'：放在电子文本的两个字符之间，抑制本来会发生的连字，也就是不使用之前的样式。

具体的用法如下：

以上的方式虽然可以解决富文本中兼容性的bug，但是逻辑写起来特别麻烦，而且还存在其他的漏洞，今天无意间又发现了一种新的解决方案。

经过了一段时间的测试和开发，以上两种方式必须同时使用，才能解决webview中设置字体的bug

在 ZSSRichTextEditor 文件中，有一个方法：calculateEditorHeightWithCaretPosition 是通过计算文字的高度与当前偏移量做计算，然后进行滚动，达到跟随输入光标位置的现象，getCaretYPosition方法中，

我增加一个normalize() 方法，解决了一些兼容性的问题。

normalize() 方法移除空的文本节点，并连接相邻的文本节点。

在最后一行，换行到新的一行进行输入的时候，如果是汉字输入，会产生联想输入条，在还没有确定输入内容的时候，UIWebView是不知道你需要的高度的，这个时候，由于触发了selectionchange，会导致输入时候，整个界面不断的抖动，因此在webview的最后面，强制插入一个空白的div（footer），使得输入始终是在已有的区域范围内的，然后在键盘d起和收回的时候，设置编辑内容和footer的高度。

在进入编辑器时，调用js方法设置焦点，达到唤起键盘的目的，但是无论怎么调用，都是不管用。后来才发现UIWebView的一个属性，设置以后就ok了，但是d起的效果不太好看，不知道为什么。

Available in iOS 6.0 and later.默认是YES

如果设置为YES，用户必须明确的点击页面上的元素或者相关联的输入页面来显示键盘；如果设置为NO，一个元素的焦点事件导致输入视图的显示和自动关联这个元素。

参考文章：

document.execCommand API文档

HTML6种空格的区别 &nbsp；&ensp；&emsp；&thinsp；&zwnj；&zwj；

利用contenteditable属性与execCommand()方法制作简易富文本编辑器

iOS的webview下的一个bug

基于 UIWebView 的富文本编辑器实践

webview = [[UIWebView alloc] initWithFrame:CGRectMake(10, 60.f, 300.f, 500)]//下面两行协助 UIWebView 背景透明化，这两属性可以在 xib 中进行设置 webview.backgroundColor = [UIColor clearColor]//但是这个属性必须用代码设置

Web只是我们作为设计者和开发者所期待的一种理想化结果，开发成本低、轻松跨平台、迭代更新快，但是显然，现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Native。Web之于我们，只是一种趋势。在这个也许会非常久的过渡阶段，对复杂...

---