前言
最近用到富文本编辑,所以努力的写了一个。希望也能帮助到大家,不喜勿喷啊,不完善的地方也请大家见谅。想一起交流的QQ :1119164930。好了,题外话就说到这里。demo地址:https://github.com/songguolin/RichTextView。但是这个要分成两部分来讲:第一部分,当让是RichTextView。第二部分,列表展示,一般来说实现了富文本编辑,总会在某个地方展示出来吧。
简介
TextKit是iOS7新推出的文字排版技术,使用TextKit可以很方便的实现富文本、表情混排和图文混排等效果。TextKit中的几个关键的类:
NSAttributeString和NSMutableAttributeString:属性字符串和可变属性字符串,这个TextKit中最基础的类,文字中的所有富文本属性都是通过属性字符串来表现出来的
NSTextAttachment:字符串的附件,将图片,可以将图片等内容当做一个附件插入到属性字符串中,可以实现表情混排,链接等效果
RichTextView的实现
1.首先就说NSAttributeString和NSMutableAttributeString的使用:
通过一个普通字符串来初始化
- (instancetype)initWithString:(NSString *)str;
通过一个普通字符串来初始化,和一个属性字典来初始化
- (instancetype)initWithString:(NSString *)str attributes:(nullable NSDictionary*)attires;
通过一个属性符串来初始化
- (instancetype)initWithAttributedString:(NSAttributedString *)attrStr;
那么属性有哪些呢?
// NSFontAttributeName 设置字体属性,默认值:字体:Helvetica(Neue) 字号:12
// NSForegroundColorAttributeNam 设置字体颜色,取值为 UIColor对象,默认值为黑色
// NSBackgroundColorAttributeName 设置字体所在区域背景颜色,取值为 UIColor对象,默认值为nil, 透明色
// NSLigatureAttributeName 设置连体属性,取值为NSNumber 对象(整数),0 表示没有连体字符,1 表示使用默认的连体字符
// NSKernAttributeName 设定字符间距,取值为 NSNumber 对象(整数),正值间距加宽,负值间距变窄
// NSStrikethroughStyleAttributeName 设置删除线,取值为 NSNumber 对象(整数)
// NSStrikethroughColorAttributeName 设置删除线颜色,取值为 UIColor 对象,默认值为黑色
// NSUnderlineStyleAttributeName 设置下划线,取值为 NSNumber 对象(整数),枚举常量 NSUnderlineStyle中的值,与删除线类似
// NSUnderlineColorAttributeName 设置下划线颜色,取值为 UIColor 对象,默认值为黑色
// NSStrokeWidthAttributeName 设置笔画宽度,取值为 NSNumber 对象(整数),负值填充效果,正值中空效果
// NSStrokeColorAttributeName 填充部分颜色,不是字体颜色,取值为 UIColor 对象
// NSShadowAttributeName 设置阴影属性,取值为 NSShadow 对象
// NSTextEffectAttributeName 设置文本特殊效果,取值为 NSString 对象,目前只有图版印刷效果可用:
// NSBaselineOffsetAttributeName 设置基线偏移值,取值为 NSNumber (float),正值上偏,负值下偏
// NSObliquenessAttributeName 设置字形倾斜度,取值为 NSNumber (float),正值右倾,负值左倾
// NSExpansionAttributeName 设置文本横向拉伸属性,取值为 NSNumber (float),正值横向拉伸文本,负值横向压缩文本
// NSWritingDirectionAttributeName 设置文字书写方向,从左向右书写或者从右向左书写
// NSVerticalGlyphFormAttributeName 设置文字排版方向,取值为 NSNumber 对象(整数),0 表示横排文本,1 表示竖排文本
// NSLinkAttributeName 设置链接属性,点击后调用浏览器打开指定URL地址
// NSAttachmentAttributeName 设置文本附件,取值为NSTextAttachment对象,常用于文字图片混排
// NSParagraphStyleAttributeName 设置文本段落排版格式,取值为 NSParagraphStyle 对象
这么多一般也就够用了。
对于文字的处理如下:
2.NSTextAttachment的使用:
那么对于图片又是怎么设置的呢?
更多内容请看这篇文章:http://doc.okbase.net/qianglong/archive/119421.html
看到这里,也就基本学会富文本的生成了,那么来看如何与textview组合使用。
3.RichTextView的具体实现:
首先,有一些基本设置:
当进行文字输入的时候:
注意这里的 [self setStyle]方法的调用,保证了输入的文字属性的正确性:
看到这里,想必也会注意到setStyle里面 isDelete 这个东西,他就是控制删除的,这个判断在文字变化的代理
-(void)textViewDidChange:(UITextView *)textView 方法的开头,没注意的请重看上面。
好了,我们再来看看图片输入是怎样的:
不管你是选择系统相册也好,拍照也好,得到图片后调用这个方法,至于里面的[self appenReturn];是自动换行,这种换行有别于 点击输入键盘的return 换行,区别就在自动换行属性输出的linesapce=0,点击输入键盘的return 换行linesapce=你设置的linesapce;也提一下,图片属性的linesapce=0。
最后呢,就是生成能够与后台交互的数据了。
4.得到RichTextView数据内容:
这一部分我们分两种情况:
1.无属性字符串与图片搭配,也就是字符串不需要改变 颜色,大小,粗细什么。
2.属性字符串与图片的搭配,也就是字符串有颜色,大小,粗细等属性的区分。
我们先讲无属性字符串吧,这个实现简单些,而且数据量小,利于数据存储:
首先我们要知道如何能够获取到一个属性字符串里面的图片:
对NSAttributedString,系统提供了两个遍历方法。
这个是遍历属性字符串,得到属性字典。
- (void)enumerateAttributesInRange:(NSRange)enumerationRange options:(NSAttributedStringEnumerationOptions)opts usingBlock:(void (^)(NSDictionary*attrs, NSRange range, BOOL *stop))block NS_AVAILABLE(10_6, 4_0);
这个是遍历某种属性,得到内容。
- (void)enumerateAttribute:(NSString *)attrName inRange:(NSRange)enumerationRange options:(NSAttributedStringEnumerationOptions)opts usingBlock:(void (^)(id __nullable value, NSRange range, BOOL *stop))block NS_AVAILABLE(10_6, 4_0);
好了,这样我们就可以得到数据了。代码如下:
- (NSString *)getPlainString 可以得到带有图片标示的普通字符串,
-(NSArray *)getImgaeArray 可以得到图片数组
让后我们来看看 具体怎样的:
点击完成:调用- (NSString *)getPlainString ,-(NSArray *)getImgaeArray得到的content和imageArr:
这个时候我们就可以上传图片了,补充一下,我这里思路是编辑,图片一起上传,服务器返回的url 样式应该如下:
为什么要这么设计呢?因为图片展示的时候 给个占位啊。如同瀑布流的思路一样,不能等图片下载完了才给大小,这样UI变化会不友好。
然后我们用这个url地址替换掉图片标识,得到的最终数据:
这样我们就能把数据保存到服务器了。
然后我们再讲讲属性字符串数据的获取与交互:
还记得前文提到的遍历属性字符串的方法不:
通过这个就可以得到数据内容了
注意,上传了图片之后,也需要赋给里面的image。
介绍到这,也就基本说完了富文本编辑第一次生成的实现代码。那么问题来了,二次编辑又该如何实现?这些数据如果要展示又该怎么办呢?下集更精彩。