IOS - WebView富文本开发

Posted 2023-04-12

参考技术A 最近开发基于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），使得输入始终是在已有的区域范围内的，然后在键盘弹起和收回的时候，设置编辑内容和footer的高度。

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

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

参考文章：
document.execCommand API文档
HTML6种空格的区别  ；&ensp；&emsp；&thinsp；&zwnj；&zwj；
利用contenteditable属性与execCommand()方法制作简易富文本编辑器
iOS的webview下的一个bug
基于 UIWebView 的富文本编辑器实践

iOS 富文本编辑器（插入图片，设置字体）

参考技术A 前言：

公司需要做一个日记本类型的APP，要求可插入图片，有行间距，调整字体大小，颜色等功能。

效果：

思路：

1.webView 实现（不会，pass）

2.使用富文本

实现：

1. 使用textView 的富文本属性

2.每次文字发生变化 使用数组记录 文字的所有属性

3.当退出时保存所有属性

4. 刷新首页页面数组

5.再次进入时，使用保存的属性

参考：

https://github.com/songguolin/RichTextView （可以输入中文，如果没记错，图片改大后，输入文字会出现跳屏的bug）

https://github.com/576410448/SJTextViewDemo （功能挺多，but 不能输入中文。。。）

我是把这两个demo 的功能整合了一下，外加修改了一些细节和bug。

大家也可也参考参考。

源码： LHRichEditor