富文本-RichTextView(1)

前言

最近用到富文本编辑,所以努力的写了一个。希望也能帮助到大家,不喜勿喷啊,不完善的地方也请大家见谅。想一起交流的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 对象

这么多一般也就够用了。

对于文字的处理如下:


富文本-RichTextView(1)_第1张图片

2.NSTextAttachment的使用:

那么对于图片又是怎么设置的呢?


富文本-RichTextView(1)_第2张图片

更多内容请看这篇文章:http://doc.okbase.net/qianglong/archive/119421.html

看到这里,也就基本学会富文本的生成了,那么来看如何与textview组合使用。

3.RichTextView的具体实现:

首先,有一些基本设置:


富文本-RichTextView(1)_第3张图片

当进行文字输入的时候:

富文本-RichTextView(1)_第4张图片

注意这里的 [self setStyle]方法的调用,保证了输入的文字属性的正确性:


富文本-RichTextView(1)_第5张图片

看到这里,想必也会注意到setStyle里面 isDelete 这个东西,他就是控制删除的,这个判断在文字变化的代理

-(void)textViewDidChange:(UITextView *)textView 方法的开头,没注意的请重看上面。


好了,我们再来看看图片输入是怎样的:

不管你是选择系统相册也好,拍照也好,得到图片后调用这个方法,至于里面的[self appenReturn];是自动换行,这种换行有别于 点击输入键盘的return 换行,区别就在自动换行属性输出的linesapce=0,点击输入键盘的return 换行linesapce=你设置的linesapce;也提一下,图片属性的linesapce=0。

富文本-RichTextView(1)_第6张图片

最后呢,就是生成能够与后台交互的数据了。

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);

好了,这样我们就可以得到数据了。代码如下:


富文本-RichTextView(1)_第7张图片

- (NSString *)getPlainString 可以得到带有图片标示的普通字符串,

-(NSArray *)getImgaeArray 可以得到图片数组

让后我们来看看 具体怎样的:


富文本-RichTextView(1)_第8张图片

点击完成:调用- (NSString *)getPlainString ,-(NSArray *)getImgaeArray得到的content和imageArr:

这个时候我们就可以上传图片了,补充一下,我这里思路是编辑,图片一起上传,服务器返回的url 样式应该如下:

为什么要这么设计呢?因为图片展示的时候 给个占位啊。如同瀑布流的思路一样,不能等图片下载完了才给大小,这样UI变化会不友好。

然后我们用这个url地址替换掉图片标识,得到的最终数据:


这样我们就能把数据保存到服务器了。

然后我们再讲讲属性字符串数据的获取与交互:

还记得前文提到的遍历属性字符串的方法不:


富文本-RichTextView(1)_第9张图片
富文本-RichTextView(1)_第10张图片

通过这个就可以得到数据内容了


富文本-RichTextView(1)_第11张图片

注意,上传了图片之后,也需要赋给里面的image。

介绍到这,也就基本说完了富文本编辑第一次生成的实现代码。那么问题来了,二次编辑又该如何实现?这些数据如果要展示又该怎么办呢?下集更精彩。

你可能感兴趣的:(富文本-RichTextView(1))