富文本-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 对象

这么多一般也就够用了。

对于文字的处理如下:


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。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容