微博html怎么编辑器,制作一个微博文本编辑器

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

demo.png

首先关于这种富文本展示就不造轮子了，直接使用了YYText ，可以省不少时间。

1 分析

首先效果大体效仿微博，"@用户"与"#热门话题#"并非绑定字符串，用户可以随时在其中插入编辑并高亮展示。

关于图片样式，这里随便用了几个表情作为示例，实现是利用图片替换纯文本中指定的字符串(比如“[大笑]” )，删除时图片整体删除，复制时复制对应的字符串，粘贴或者用户打出对应字符自动转换为表情图片。

首先很容易想到用正则来匹配关键字符串，转换为attribute string着色展示；利用NSTextAttachment插入图片并替换字符。如果只是展示已经足够，但如果展示之后需要再次编辑，那么实现起来会很复杂(可以想到每增删字符后都要重新匹配全文并重新赋予attribute string)。

其实在YYText的demo中实现的markdown语法解析，和本需求实现如出一辙，其实目的就是做一个“语法解析器” 。所以接下来参照YYTextSimpleMarkdownParser 自定义一个对象实现YYTextParser协议，并将对象复制给YYTextView的实例即可。

2 实现

首先创建自定义解析器并准守协议

#import

#import "YYTextParser.h"

@interface TextParser : NSObject

@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

写本文时，其实还有一种格式需求没有搞定，如下图

image.png

微博里非常常见的一种格式，想简单些就是左边图片与“查看图片”四个字共属一图，将图片url复制给整张图片，但会造成“查看图片”四字无法折行的bug(其实算不算bug要看产品)，接下来就是解决这个问题了。

Update 17-5-17 上面问题的解决

今天优化这块代码，其中上面样式也做了出来，如下图：

image&textBinding.png

其中核心实现是将图片与文字拼接成一个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字符所以任意图片后的“查看图片”四字都会被重设高亮，目前还没有更好的方案，未来再做优化。