IOS - 富文本解决方案(上)

作者: 囧rg | 来源:发表于2016-09-08 01:57 被阅读2392次

    概述

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

    需求

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

    调研

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

    1. 使用UIWebView来实现
    2. 使用内嵌js编辑器实现
    3. 使用html解析后,原生控件实现
    4. 使用Markdown语法实现
    5. 使用第三方富文本库来实现
    6. 基于TextKit,自己写套富文本编辑器

    分析


    1、使用UIWebView来实现

    实现原理:
    在显示的html文件中加入 contenteditable = "true"
    可使UIWebView支持编辑。
    如:

    <html contenteditable="true" ></html> 
    

     <body contenteditable="true" ><!--content--></body>
    

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

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

    结论:
    只适合进行页面展示,和简单的编辑。


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

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

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

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

    结论:
    如果对交互和体验的要求不高,推荐使用。

    例如:
    百度UEditor
    kindeditor


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

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

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

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

    结论:
    技术难度大,不推荐使用。


    4. 使用Markdown语法实现

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

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

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

    结论:
    主要看使用者年龄段,如果面向年轻人,推荐使用。


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

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

    优点:
    功能强,操作简单,交互好,集成方便。

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

    结论:
    推荐使用,不过自定义难度较大。

    例如:
    ZSSRichTextEditor 是个漂亮的iOS富文本WYSIWYG所见即所得的编辑器


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

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

    IOS - 富文本解决方案(中)
    IOS - WebView富文本开发

    相关文章

      网友评论

      • 爱的播放:推荐一款写富文本非常好用的控件:NudeIn,你完全不用去学习这些蛋疼的原生写法,可以像masonry那样写富文本控件
        github地址:https://github.com/hon-key/Nudeln
      • ducks:ZSSRichTextEditor 是个漂亮的iOS富文本WYSIWYG所见即所得的编辑器

        对应的安卓第三方有吗 我们需要和安卓同步
        囧rg:@ducks 同步方便设计的问题非常多,如果使用基础html的编辑器,同步起来比较简单。但是基于原生的开发,就需要自己定格式及样式适配问题。
        你可以看下《 富文本解决方案(中)》,有一套基于html解析成Span的第三方,可以尝试下。
      • 布袋的世界:下集呢
      • 没梦想的咸鱼2:下集呢
        囧rg:@施孝达 下集之前写了一半,后来就没有写完。

      本文标题:IOS - 富文本解决方案(上)

      本文链接:https://www.haomeiwen.com/subject/znhsettx.html