本文章的Demo工程
最近需要制作一个类似发微博的界面，支持“@用户”以及“#话题#”等格式高亮，并且可输入展示自定义表情图片。期间写了个demo，截图如下：
首先关于这种富文本展示就不造轮子了，直接使用了YYText ，可以省不少时间。
1 分析
首先效果大体效仿微博，"@用户"与"#热门话题#"并非绑定字符串，用户可以随时在其中插入编辑并高亮展示。
关于图片样式，这里随便用了几个表情作为示例，实现是利用图片替换纯文本中指定的字符串（比如“[大笑]” ），删除时图片整体删除，复制时复制对应的字符串，粘贴或者用户打出对应字符自动转换为表情图片。
首先很容易想到用正则来匹配关键字符串，转换为attribute string着色展示；利用NSTextAttachment插入图片并替换字符。如果只是展示已经足够，但如果展示之后需要再次编辑，那么实现起来会很复杂（可以想到每增删字符后都要重新匹配全文并重新赋予attribute string）。
其实在YYText的demo中实现的markdown语法解析，和本需求实现如出一辙，其实目的就是做一个“语法解析器” 。所以接下来参照YYTextSimpleMarkdownParser 自定义一个对象实现YYTextParser协议，并将对象复制给YYTextView的实例即可。
2 实现
首先创建自定义解析器并准守协议
#import <Foundation/Foundation.h>
#import "YYTextParser.h"
@interface TextParser : NSObject<YYTextParser>
@end
关于YYTextView的创建不再赘述，创建完成后赋值textParser属性
self.textView.textParser = [[TextParser alloc]init];
接下来就该实现TextParser的.m文件了，查阅YYTextParser类发现只有一个require方法：
/**
When text is changed in YYTextView or YYLabel, this method will be called.
@param text The original attributed string. This method may parse the text and
change the text attributes or content.
@param selectedRange Current selected range in `text`.
This method should correct the range if the text content is changed. If there's
no selected range (such as YYLabel), this value is NULL.
@return If the 'text' is modified in this method, returns `YES`, otherwise returns `NO`.
*/
- (BOOL)parseText:(nullable NSMutableAttributedString *)text selectedRange:(nullable NSRangePointer)selectedRange;
这里注释已比较清楚，需要配合YYTextView/YYLabel来使用，并会在text改变的时候调用，所以在这个方法里面对文本进行解析再合适不过了。
首先在此之前，需要定义对应的正则以及字体颜色等，这里说下正则这部分申明以及赋值：
NSRegularExpression *_regexAt;
NSRegularExpression *_regexPoundSign;
_regexAt = [NSRegularExpression regularExpressionWithPattern:@"@[\u4e00-\u9fa5a-zA-Z0-9_-]{2,30}" options:0 error:NULL];
_regexAt = [NSRegularExpression regularExpressionWithPattern:@"#[^#]+#" options:0 error:NULL];
这里的正则匹配了@之后2~30位长度的字符，以及#之间的字符。
接下来单独处理图片相关的匹配
NSRegularExpression *_regexImage;
NSDictionary *_imageMapper;
这里的_imageMapper字典就是为了保存一份对应关系，就是字符与图片文件的映射，下面的代码初始化字典，然后遍历字典的key构造匹配的正则字符串，最后赋值给_regexImage，需要注意的是iOS中需要对特殊字符进行转义。
_imageMapper = @{
@"[嘻嘻]" : [UIImage imageNamed:@"yb001"],
@"[呆]" : [UIImage imageNamed:@"yb002"],
@"[色]" : [UIImage imageNamed:@"yb003"]
};
NSMutableString *pattern = @"(".mutableCopy;
NSArray *allKeys = _imageMapper.allKeys;
NSCharacterSet *charset = [NSCharacterSet characterSetWithCharactersInString:@"$^?+*.,#|{}[]()\\"];
for (NSUInteger i = 0, max = allKeys.count; i < max; i++) {
NSMutableString *one = [allKeys[i] mutableCopy];
// escape regex characters
for (NSUInteger ci = 0, cmax = one.length; ci < cmax; ci++) {
unichar c = [one characterAtIndex:ci];
if ([charset characterIsMember:c]) {
[one insertString:@"\\" atIndex:ci];
ci++;
cmax++;
}
}
[pattern appendString:one];
if (i != max - 1) [pattern appendString:@"|"];
}
[pattern appendString:@")"];
_regexImage = [[NSRegularExpression alloc] initWithPattern:pattern options:kNilOptions error:nil];
剩下的就是协议方法的实现了
- (BOOL)parseText:(NSMutableAttributedString *)text selectedRange:(NSRangePointer)range {
__block BOOL changed = NO;
if (text.length == 0) { return NO; }
text.yy_font = _normalFont;
text.yy_color = _normalColor;
// @用户
[_regexAt enumerateMatchesInString:text.string options:NSMatchingWithoutAnchoringBounds range:text.yy_rangeOfAll usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
NSRange range = result.range;
[text yy_setColor:_atTextColor range:range];
changed = YES;
}];
// #话题#
[_regexPoundSign enumerateMatchesInString:text.string options:NSMatchingWithoutAnchoringBounds range:text.yy_rangeOfAll usingBlock:^(NSTextCheckingResult * _Nullable result, NSMatchingFlags flags, BOOL * _Nonnull stop) {
NSRange range = result.range;
[text yy_setColor:_atTextColor range:range];
changed = YES;
}];
// 图片
if (_imageMapper.count){
NSArray *matches = [_regexImage matchesInString:text.string options:kNilOptions range:NSMakeRange(0, text.length)];
if (matches.count) {
NSRange selectedRange = range ? *range : NSMakeRange(0, 0);
NSUInteger cutLength = 0;
for (NSUInteger i = 0, max = matches.count; i < max; i++) {
NSTextCheckingResult *one = matches[i];
NSRange oneRange = one.range;
if (oneRange.length == 0) continue;
oneRange.location -= cutLength;
NSString *subStr = [text.string substringWithRange:oneRange];
UIImage *emoticon = _imageMapper[subStr];
if (!emoticon) continue;
CGFloat fontSize = kNormalFontSize;
CTFontRef font = (__bridge CTFontRef)([text yy_attribute:NSFontAttributeName atIndex:oneRange.location]);
if (font) fontSize = CTFontGetSize(font);
NSMutableAttributedString *atr = [NSAttributedString yy_attachmentStringWithEmojiImage:emoticon fontSize:fontSize];
[atr yy_setTextBackedString:[YYTextBackedString stringWithString:subStr] range:NSMakeRange(0, atr.length)];
[text replaceCharactersInRange:oneRange withString:atr.string];
[text yy_removeDiscontinuousAttributesInRange:NSMakeRange(oneRange.location, atr.length)];
[text addAttributes:atr.yy_attributes range:NSMakeRange(oneRange.location, atr.length)];
selectedRange = [self _replaceTextInRange:oneRange withLength:atr.length selectedRange:selectedRange];
cutLength += oneRange.length - 1;
}
if (range) *range = selectedRange;
changed = YES;
}
}
return changed;
}
上面有关图片的代码由于发生了文本替换会比较长，替换前后的range、光标位置等内容的重设，需要把控细节有很多，可以下载demo来看（_replaceTextInRange方法就是重新设置选择区域(光标位置) 包含在demo中）。
3 其他细节
3.1 上面的图片实现:
NSMutableAttributedString *atr = [NSAttributedString yy_attachmentStringWithEmojiImage:emoticon fontSize:fontSize];
其实这代码设置的是表情图片，其尺寸是通过传入的fontSize计算而成，倘若图片并非整套表情而是一个长宽不等的矩形图片，则需要修改下这段代码：
NSMutableAttributedString *atr = [NSAttributedString yy_attachmentStringWithContent:emoticon contentMode:UIViewContentModeCenter attachmentSize:emoticon.size alignToFont:_normalFont alignment:YYTextVerticalAlignmentCenter];
这样就可以将不规则图片插入文本中了。
3.2 关于YYTextBackedString 默认情况下AttributedString中插入图片然后log是没有任何图片的文本信息的，复制图片后粘贴也是空字符串，但如果设置了YYTextBackedString就可以赋值文本属性给图片了。
[atr yy_setTextBackedString:[YYTextBackedString stringWithString:subStr] range:NSMakeRange(0, atr.length)];
3.3 本文为了尽量少贴不必要的代码，去掉了一些判空判断，字符串数组字典的值使用前尽量判断是否为空。
3.4有关线程安全，本文用到的存有字符与图片映射的字典_imageMapper由于非线程安全，在频繁的编辑下是容易发生同时读写的情况，假如是固定的表情自初始化完毕后不会增删就没啥问题，但非这种情况就需要声明”锁“(NSLock, 信号量等控制均可) 来防止多线程同时访问，并设置为默认的atomic属性，这里可以参照YYText中的YYTextParser.m文件有关实现。
4 To do
写本文时，其实还有一种格式需求没有搞定，如下图
微博里非常常见的一种格式，想简单些就是左边图片与“查看图片”四个字共属一图，将图片url复制给整张图片，但会造成“查看图片”四字无法折行的bug(其实算不算bug要看产品)，接下来就是解决这个问题了。
Update 17-5-17 上面问题的解决
今天优化这块代码，其中上面样式也做了出来，如下图：
其中核心实现是将图片与文字拼接成一个NSAttributedString，之后对拼接结果进行binding与backed处理。
NSMutableAttributedString *atr = [NSMutableAttributedString yy_attachmentStringWithEmojiImage:emoticon fontSize:fontSize];
NSAttributedString *checkText = [[NSAttributedString alloc] initWithString:@"查看图片"
attributes:@{
NSFontAttributeName: _normalFont,
NSForegroundColorAttributeName :_atTextColor }];
[atr appendAttributedString:checkText];
YYTextBinding *binding = [YYTextBinding bindingWithDeleteConfirm:YES];
[atr yy_setTextBinding:binding range:NSMakeRange(0, atr.length)];
[atr yy_setTextBackedString:[YYTextBackedString stringWithString:subStr] range:NSMakeRange(0, atr.length)];
[text replaceCharactersInRange:oneRange withAttributedString:atr];
这里还有一步，和之前只加图片不同，当协议方法调用并替换后，再次调用协议方法会发现传入的text变成了\U0000fffc查看图片 并非是赋值的YYTextBackedString，而在控制器打印textView.text没问题，所以这里会造成“查看图片”这四个字失去了设置的颜色，而被设置上了普通文字的颜色。
不过解决起来很简单，像匹配@标记一样增加一条正则：
_regexImageCheck = regexp("\U0000fffc查看图片", 0);
然后再次匹配重设颜色即可。这里会有一个小bug，YYText会把图片统一处理成\U0000fffc字符所以任意图片后的“查看图片”四字都会被重设高亮，目前还没有更好的方案，未来再做优化。
本文章的Demo工程
