在手机上进行文本编辑的场景越来越多的出现在日常生活中,而原生的实现要比H5编辑器体验上要强上不少,本文提供了iOS上原生编辑器实现的一个思路。
编辑器参数有三个:分别为占编辑器最大区域的编辑区、编辑器工具栏、已经选中并使用的样式。
@property (nonatomic, strong) UITextView *contentTextView; // 编辑区
@property (nonatomic, strong) EditTab *toolTab; // 编辑器工具栏
@property (nonatomic, strong) NSMutableDictionary *attributes; // 已使用的样式
EditTab是自定义的视图,用于展示可提供的样式按钮,按钮们添加在一个UICollectionView之中,点击按钮,会通过代理返回按钮所代表的样式。
EditTab.h
@protocol EditTabDelegate <NSObject>
- (void)setAttribute:(NSDictionary *)dic;
@end
@interface EditTab : UIView
@property (nonatomic, weak) id <EditTabDelegate>delegate;
@end
编辑器中点击样式按钮时,分为已选中部分内容与未选中内容两种情况,前者需要实根据所选样式改变选中部分的内容,后者则表示之后输入的内容要符合所选样式。
下面是相关部分的核心逻辑代码
- (EditTab *)toolTab
{
if(!_toolTab)
{
EditTab *toolTab = [EditTab new];
toolTab.delegate = self;
toolTab.backgroundColor = self.backgroundColor;
[self addSubview:toolTab];
_toolTab = toolTab;
}
return _toolTab;
}
#pragma mark EditTabDelegate
- (void)setAttribute:(NSDictionary *)dic
{
for (NSString *key in dic.allKeys)
{
[self.attributes setValue:dic[key] forKey:key];
}
NSUInteger selectedRangeLength = self.contentTextView.selectedRange.length;
if (selectedRangeLength)
{
[self resetContentInRange:self.contentTextView.selectedRange];
}
else
{
self.contentTextView.typingAttributes = self.attributes;
}
}
#pragma mark PrivateMethod
- (void)resetContentInRange:(NSRange)range
{
NSMutableAttributedString *contentText = [[NSMutableAttributedString alloc] initWithAttributedString:self.contentTextView.attributedText];
[contentText setAttributes:self.attributes range:range];
self.contentTextView.attributedText = contentText;
self.contentTextView.selectedRange = range;
}
至此一个文字功能较为完整的iOS编辑器就可以完成了,再结合图文混排的功能,在手机上也可以使用原生编辑器编写内容形式丰富的文章了。