制作一个微博文本编辑器

本文章的Demo工程

最近需要制作一个类似发微博的界面,支持“@用户”以及“#话题#”等格式高亮,并且可输入展示自定义表情图片。期间写了个demo,截图如下:

制作一个微博文本编辑器
demo.png

首先关于这种富文本展示就不造轮子了,直接使用了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];
1 2 
下一页