iOS图文混排的技术实现方案探索

现在很多app都有图文混排的需求,而且需要支持app端和web端,在这里分享一下自己在做这些方面的探索。

方案一 webview

web的富文本区别于iOS原生富文本内容,是html内容

优势:使用webview实现富文本是一种比较简单的方式,创建webview加载富文本字符串即可,而且可以保持不同iOS端、Android端、web端的高度统一

劣势:webview加载比较消耗性能,如cell中要也要显示富文本,则需要创建多个webview,这样开销较大

具体实现:
1. 由web端文本编辑器生成富文本内容,APP端则用UIWebview或WKWebview加载显示;
2. app端的编辑,如app端支持的编辑格式有限,可自己将编辑内容拼成html富文本格式,如需丰富的编辑样式,可采用三方框架:ZSSRichTextEditor,可自动生成html富文本

优化方案:使用三方框架:DTCoreText,DTCoreText会对HTML文件进行解析,并自动关联相对应的css样式,输出带有排版样式的NSAttributedString
官方文档
DTCoreText使用总结

方案二 CoreText

优势:CoreText 是用于处理文字和字体的底层技术,具有高速的排版效果
劣势:需要处理编辑的内容结构,如果需要兼容更多web样式,则需要定义更多的内容结构

具体实现:web端和app端定义一套统一的内容结构,app端,可按照内容结构顺序转换成NSAttributedString,进行显示,这里可以使用YYText

[
 {//文字
 "type": "text",
 "content": "平凡"
 },
 {//图片
 "type": "image",
 "url": "http://www.baidu.com",
 "width":100,
 "height":100
 },
 {//链接
 "type": "link",
 "url": "http://www.baidu.com"
 }
]

注:编辑的时候,把文本,图片,链接等样式按照顺序组装成一个数组,转换成富文本的时候就可以根据数组顺序解析

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,955评论 1 180
  • 时间:2016年12月3日 内容: 1.晨起:九点 2.健身:马甲线练习一次 3.工作:推出工作室微信公众号原创文...
    river王阅读 1,371评论 0 0
  • 12.17 5页 (发现制定的时间不是想象的那么容易,用有突发事件) 01 用写日记的方法记录自己的事情, 02 ...
    进击的升升阅读 1,378评论 2 1
  • 拟一把疏狂,沉醉一场, 把水果的芬芳从金秋谱向远方, 是绿水晶,是紫玛瑙,是朱红点点。 从九天洒下,舞动霓裳羽衣,...
    春余清歌阅读 2,967评论 2 6
  • 结构思考力相当于金字塔原理的中国化版本,内容基本和金字塔原理一致。基本结构是*** 结论先行,以上统下,归类分组,...
    曲误周郎顾阅读 1,657评论 0 0