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,自己写套富文本编辑器

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

你可能感兴趣的:(ios加载html富文本编辑器)