ios加载html富文本编辑器,IOS - 富文本解决方案（上）

概述

针对富文本来说，一直都是移动端的痛。虽然网上的解决方案很多，但是大多数都是基于展示，真正可以进行编辑的，却很少。而这些少数的实现中，适合我使用就没有了。

所以我决定自己研究，并实现。

需求

需求说起来很简单，就是要设计一款IOS、Androd、PC端通用的富文本编辑器。模仿新浪微博中-头条文章。

调研

经过多次的分析和调研，有过这么几套方案。

使用UIWebView来实现

使用内嵌js编辑器实现

使用html解析后，原生控件实现

使用Markdown语法实现

使用第三方富文本库来实现

基于TextKit，自己写套富文本编辑器

分析

1、使用UIWebView来实现

实现原理：

在显示的html文件中加入 contenteditable = "true"

可使UIWebView支持编辑。

如：

或

优点：

实现起来很简单，功能简单，而且与服务端的数据传输，只需要获得html的内容即可。

缺点：

操作、体验、功能、性能都是非常不爽的，依赖于网络，无法扩展更多的功能。而且UIWebView也是非常消耗性能的，就算换成UIWkWebview虽然能好些，但是一样不推荐使用。

结论：

只适合进行页面展示，和简单的编辑。

2、使用内嵌js编辑器实现

实现原理：

把一套js富文本编辑器，放到app中，在打开编辑器的时候，调用本地的资源进行加载。

优点：

实现简单，功能强大，加载速度快，而且与服务端的数据传输，只需要获得html的内容即可，还可以实现本地图片的显示(不用先把图片上传到服务端)，就算没有网，也可以编写。

缺点：

需要根据机型来进行兼容性测试、编辑器更新比较麻烦，部分操作不太流畅，体验一般，扩张性不强。

结论：

如果对交互和体验的要求不高，推荐使用。

3. 使用html解析后，原生控件实现

实现原理：

获取html文本，进行解析后，转换成NSMutableAttributedString，加载到对应的原生控件中；编辑完成后，再转成html文本，传给服务器。

优点：

交互和体验很好，因为使用原生控件，性能消耗不多，操作可以自定义，较为方便。

缺点：

需要IOS、Android分别做开发，而且开发难度很大，主要问题就是解析html 和 转换成html，虽然也有一些第三方库来辅助，但是效果不是很理想。

结论：

技术难度大，不推荐使用。

4. 使用Markdown语法实现

实现原理：

传输Markdown格式的字符串，IOS、Android客户端进行解析展示，修改完，在把Markdown格式的字符串，传给服务器。需要都支持Markdown的解析

优点：

比较流行，传输内容少，速度快，可以实时预览。有第三方的类库，开发相对简单些。

缺点：

有一定的学习成本，还没有完全普及，扩展新功能很难。

结论：

主要看使用者年龄段，如果面向年轻人，推荐使用。

5. 使用第三方富文本库来实现

实现原理：

网上有一些基于CoreText来实现的第三方库，但是交互需要自定义标签，才能进行。

优点：

功能强，操作简单，交互好，集成方便。

缺点：

IOS、Android都需要独立开发，还需要与服务端有一套自定义的标签。如果想自定义一些功能，需要修改底层，比较麻烦。

结论：

推荐使用，不过自定义难度较大。

6.基于TextKit，自己写套富文本编辑器

最后一种方式，会在下一个章节介绍，除了功能，还有代码，及服务端交互的数据结构等。