iOS 富文本编辑器 用原生UITextView实现

RZRichTextView

导入工程

pod 'RZRichTextView'

需要使用的地方

#import <RZRichTextView/RZRichTextView.h>
  • RZRichTextView 继承自UITextView

  • 富文本编辑器,支持html与文本相互转换,支持的功能如下

    • 插入图片
    • 撤销
    • 恢复
    • 字体 (大小、颜色、背景色、粗体、斜体、描边)
    • 下划线
    • 删除线
    • 上标
    • 下标
    • 段落样式(对齐、缩进、间距)
    • 文字拉伸
    • 阴影
    • 链接(文字、图片)

插入图片到富文本之后,在转换成HTML标签之前,需要将图片上传至服务器得到URL,最后将URL替换图片之后,生成HTML标签

  • 如果要对插入的图片进行处理,请实现
    // 全局的图片的处理
    RZRichTextConfigureManager.manager.rz_shouldInserImage = ^UIImage * _Nullable(UIImage * _Nullable image) {
        return image;
    }

** 如果开发者需要代码预填入内容,或将html标签解析成富文本重新写入到文本中,继续编辑,请参考RZColorful, **

UI 展示

工具条


image5.jpeg

段落样式设置


image1.jpeg

字体描边属性设置


image2.jpeg

多个链接时,编辑


image3.jpeg

链接的编辑


image4.jpeg

使用RZRichTextView文本框

/**
获取输入框中的所有图片

@return 按照图片插入顺序排列
*/
- (NSArray <UIImage *> *)rz_rictTextImages;
/**
将富文本内容转换成HTML标签语言 urls需与图片顺序、数量一致(倒叙方式插入,缺失可能导致图片顺序不准确)

@param urls 图片的链接,如果有图片,则请将图片先上传至自己的服务器中,得到地址。然后在转换成HTML时,urls图片顺序将与[- (NSArray <UIImage *> *)rz_rictTextImages]方法得到的图片顺序一致
@return HTML标签string。
*/
- (NSString *)rz_codingToHtmlWithImageURLS:(NSArray <NSString *> *)urls;

使用NSAttributedString

包含文件

#import <RZColorful/RZColorful.h> // #import <RZColorful/NSAttributedString+RZColorful.h> 

在NSAttributedString中

pragma mark - HTML 富文本互换

// 将html转换成 NSAttributedString
+ (NSAttributedString *)htmlString:(NSString *)html;
// 获取富文本中的图片 用于上传服务器
- (NSArray <UIImage *> *)rz_images;
/**
将富文本编码成html标签,如果有图片,用此方法

@param urls 图片的url,url需要先获取图片,然后自行上传到服务器,最后按照【- (NSArray <UIImage *> *)images;】此方法得到的图片顺序排列url
@return HTML标签
*/
- (NSString *)rz_codingToHtmlWithImagesURLSIfHad:(NSArray <NSString *> *)urls;
/**
将富文本完整的code成html标签,(此方法如果富文本中有图片,则图片将被丢失)  有图片时,请用[rz_codingToHtmlWithImagesURLSIfHad]方法

@return HTML标签语言
*/
- (NSString *)rz_codingToCompleteHtml;

自定义RZRichTextView的功能

  • 富文本主要是对NSAttributedString的属性进行各式设置,然后和text合并起来,最后形成富文本

自定义 工具条

image5.jpeg
  • 工具条是一个UICollectionView,所以要自定义功能,需要实现以下四个方法

    • 1.cell 注册
        // [RZRichTextConfigureManager manager]
        /** 自定义 注册的键盘上的工具条的cell */
        - (void)registerRZRichTextAttributeItemClass:(Class)classNa forAccessoryItemCellWithIdentifier:(NSString *)identifier;
    
    • 2.dataSouce
        // [RZRichTextConfigureManager manager]
        /** 键盘上的工具条功能数组,可新增、删除、交换顺序
        如果要添加自定义的功能,添加的RZRichTextAttributeType 请尽量从100以后添加,
        */
        @property (nonatomic, copy) NSMutableArray <RZRichTextAttributeItem *> *rz_attributeItems;
    
    • 3.cell的初始化
        // [RZRichTextConfigureManager manager]
        /** 根据item,可自定义键盘工具栏的功能cell 不需要自定义时,return nil; (在工具条刷新的时候会调用)*/
        @property (nonatomic, copy) UICollectionViewCell *(^cellForItemAtIndePath)(UICollectionView *collectionView, NSIndexPath *indexPath, RZRichTextAttributeItem *item);
    
    • 4.cell的点击事件
        // [RZRichTextConfigureManager manager]
        /** 点击了某个功能, 需要自定义处理时,返回YES*/
        @property (nonatomic, copy) BOOL(^didClickedCell)(RZRichTextView *textView, RZRichTextAttributeItem *item);
    
以上修改是针对全局的RZRichTextView的功能

在配置了全局的RZRichTextView的功能,也可以在RZRichTextView初始化之后,单独对某一个RZRichTextView进行定制,RZRichTextView同样有2、3、4方法,当实现了之后,[RZRichTextConfigureManager manager]的2、3、4全局的自定义方法将以RZRichTextView为主

自定义方法,是对[RZRichTextView rz_attributedDictionays]的字典里的内容的修改,所以如需自定义,请在4.cell的点击事件中进行处理

完成rz_attributedDictionays修改之后,需要

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

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,982评论 3 119
  • 2004年底,我和友人约好去澳州过年,但,旅程到一半的时候便嘎然中止。原因是母亲在睡梦中突发脑溢血去世。虽对母亲的...
    纳彩阅读 290评论 4 3
  • 习惯性地抽离自己的情绪,思考。这样可以更接近真理。 确实如此,不过感觉离着头脑近了,离着心跳远了。 动心的事,与动...
    老周巴布阅读 306评论 0 1
  • 七比比阅读 196评论 0 0