IOS - 富文本解决方案（中）

很多人评论，希望看到后续的章节，我之前一直再维护另一个blog，这个有点废了。我决定以后再把相关的文章给补上。

这章主要讲解的是一些原理实现，不涉及到具体的代码，勤奋的人，可以先自己琢磨写写。因为我的代码已经集成到项目中，需要往外摘，还需要花些时间，后续的章节，再把源代码贡献。

简介

移动端的富文本一直以来，都是一个比较复杂的功能，很多人为了更快速的进行集成和使用，牺牲一些操作性的体验，采用web的模式。
虽然也有很多基于web的富文本做的很好，但是还是很耗费精力的。
而我这里，采用的是基于UITableView+TextKit来实现的富文本，体验和操作是非常的流畅，而且开发的难度也不是很大，唯一的问题就是多端的数据传输和解析的问题。

原理

主要是使用UITableView的复用机制和TextKit的文字处理能力，来实现富文本的操作。
每段文字和图片都对应着一个UI组件。

123.png

数据解析流程图（关键）

image.png

（关键代码）HTML与NSAttributedString互转

主要在解析 和 tabviewcell中textview的操作上面
解析的方法：

// 将 html 转 attr
-(NSAttributedString *)htmlToAttribute
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"new" ofType:@"txt"];
NSString *content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

NSData *data = [content dataUsingEncoding:NSUnicodeStringEncoding];
NSDictionary *options = @{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType};
NSAttributedString *html = [[NSAttributedString alloc]initWithData:data
options:options
documentAttributes:nil
error:nil];
return html;
}

// 将 attr 转 html
-(NSString *)attributeToHtml:(NSAttributedString *)attributeString
{
NSString *htmlString;
NSDictionary *exportParams = @{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType,NSCharacterEncodingDocumentAttribute:[NSNumber numberWithInt:NSUTF8StringEncoding]};

NSData *htmlData = [attributeString dataFromRange:NSMakeRange(0, attributeString.length) documentAttributes:exportParams error:nil];

htmlString = [[NSString alloc] initWithData:htmlData encoding: NSUTF8StringEncoding];
return htmlString;
}

附赠一份android的解析方案：
https://github.com/guosen/TextViewForHTml

（关键代码）自定义标签与NSAttributedString互转

一、自定义标签 转 NSAttributedString

1. 首先定义自己的标签格式
2. 解析字符串，分别获得标签中文字的属性和内容
3. 根据属性，创建NSAttributedString

例如：

// [标签名称_粗细_字号_字体颜色_下划线_斜体_背景色_对其方式]
[custom_0_16_#004455_0_0_#000000_01]我是内容[/custom]

二、NSAttributedString 转 自定义标签

1. 获得NSAttributedString数据
2. 使用对应的方法，获取NSAttributedString中字符串的属性信息
3. 根据属性信息，定义自己的自定义标签

例如：

// 获取富文本中，每段字符串的属性信息
- (NSDictionary<NSString *, id> *)attributesAtIndex:(NSUInteger)location effectiveRange:(nullable NSRangePointer)range;

注

1、富文本使用的TextKit技术来实现的，所以IOS7以下的App不能使用。（还有支持IOS7一下的App吗？）
2、富文本采用UITableView来做显示和编辑的，效率方面是没有问题的。
3、图片和文字是分离的。就是说：如果在文字中间插入一张图片，就会把这段文字按照光标的位置，截取成2段，并插入一个显示图片的Cell。
4、UI部分实现逻辑并不复杂，就是交互挺多，请在设计初期选好对应的设计模型。

IOS - 富文本解决方案（上）
IOS - WebView富文本开发