iOS 富文本之圖文混排(插入圖片上傳到服務(wù)器)

第一版耍鬓,以實(shí)現(xiàn)功能為主流妻,相比較簡(jiǎn)陋一點(diǎn),多多包含,先上效果圖


9918146F-3D83-40BA-80EB-359D06594273.png

1.先修改鍵盤上的工具欄

self.contentView.inputAccessoryView = [self createInputAccessoryView];
//鍵盤上的工具欄
- (UIView *)createInputAccessoryView {
    // 相機(jī)
    UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"edit_pic"] style:UIBarButtonItemStylePlain target:self action:@selector(item1Action)];
    //收起鍵盤
    UIBarButtonItem *th1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(cancleClick)];
    //兩個(gè)item之間的間距
    UIBarButtonItem *th2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    th1.tintColor = [UIColor blackColor];
    
    UIToolbar *tool = [UIToolbar new];
    [tool sizeToFit];
    [tool setItems:@[item1,th2,th1]];
    return tool;
}

2.相機(jī)的點(diǎn)擊事件涣达,也就是圖片上傳服務(wù)器的方法

//工具欄的點(diǎn)擊事件
- (void)item1Action {

首先將圖片上傳到你們的服務(wù)器(這里需要圖片和url)
 
NSTextAttachment* textAttachment = [[NSTextAttachment alloc] init];
//userInfo這個(gè)屬性需要寫延展证薇,在下面
textAttachment.userInfo = 圖片的URL;
//照片賦值
textAttachment.image = image;
//設(shè)置圖片的大小
textAttachment.bounds = CGRectMake(0, 0, myWidth/2, myWidth/2);
//類型轉(zhuǎn)換
NSAttributedString* imageAttachment = [NSAttributedString attributedStringWithAttachment:textAttachment];
NSMutableAttributedString *attriStr = [self.contentView.attributedText mutableCopy];
//獲取光標(biāo)的位置
NSRange range = self.contentView.selectedRange;
//插入
[attriStr insertAttributedString:imageAttachment atIndex:range.location];
//拼接
//[attriStr appendAttributedString:imageAttachment];
self.contentView.attributedText = attriStr; 

}

3.上傳服務(wù)器的相關(guān)操作

正常來(lái)說(shuō),直接富文本文字轉(zhuǎn)換成HTML格式的字符串上傳服務(wù)器就可以了浑度。如果沒(méi)有特殊要求,
上傳字符串到服務(wù)器就告一段落了箩张。

我們這后臺(tái)特殊要求完残,需要轉(zhuǎn)換成字符串横漏,然后圖片鏈接拼接到相對(duì)應(yīng)的位置(可以選擇性忽略)
NSString *textStr = [[self textStringWithSymbol:@"[圖片]" attributeString:self.contentView.attributedText] mutableCopy];
    int index = 0;
    //通過(guò)替換
    if (textStr.length > 3) {
        for (int i = 0; i <= textStr.length - 4; i ++) {
            NSString *tempStr = [textStr substringWithRange:NSMakeRange(i, 4)];
            if ([tempStr isEqualToString:@"[圖片]"]) {
                NSString *imgStr = [NSString stringWithFormat:@"<p><img src=\"%@\"></p>",self.imgArray[index]];
                textStr = [textStr stringByReplacingCharactersInRange:NSMakeRange(i, 4) withString:imgStr];
                index ++;
            }
        }
    }

執(zhí)行上傳服務(wù)器的操作熟掂。
textStr 就是最終上傳上傳服務(wù)器的文本。

下面的方法是將富文本轉(zhuǎn)換成純文本的信息

/** 將富文本轉(zhuǎn)換為帶有圖片標(biāo)志的純文本*/
- (NSString *)textStringWithSymbol:(NSString *)symbol attributeString:(NSAttributedString *)attributeString{
    NSString *string = attributeString.string;
    //調(diào)用的方法在下面
    string = [self stringDeleteString:@"\n" frontString:@"[圖片]" inString:string];
    //最終純文本
    NSMutableString *textString = [NSMutableString stringWithString:string];
    //替換下標(biāo)的偏移量
    __block NSUInteger base = 0;
    
    //遍歷
    [attributeString enumerateAttribute:NSAttachmentAttributeName inRange:NSMakeRange(0, attributeString.length)
                                options:0
                             usingBlock:^(id value, NSRange range, BOOL *stop) {
                                 //檢查類型是否是自定義NSTextAttachment類
                                 if (value && [value isKindOfClass:[NSTextAttachment class]]) {
                                     //替換
                                     [textString replaceCharactersInRange:NSMakeRange(range.location + base, range.length) withString:symbol];
                                     //增加偏移量
                                     base += (symbol.length - 1);
                                     //將富文本中最終確認(rèn)的照片取出來(lái)
                                     NSTextAttachment *attachmentImg = (NSTextAttachment *)value;
                                    //將圖片存入數(shù)組素跺,后面需要用到
                                     [self.imgArray addObject:attachmentImg.userInfo];
                                 }
                             }];
    
    return textString;
}
/** 刪除字符串*/
- (NSString *)stringDeleteString:(NSString *)deleteString frontString:(NSString *)frontString inString:(NSString *)inString{
    NSArray *ranges = [self rangeOfSymbolString:frontString inString:inString];
    NSMutableString *mutableString = [inString mutableCopy];
    NSUInteger base = 0;
    for (NSString *rangeString in ranges) {
        NSRange range = NSRangeFromString(rangeString);
        [mutableString deleteCharactersInRange:NSMakeRange(range.location - deleteString.length + base, deleteString.length)];
        base -= deleteString.length;
    }
    return [mutableString copy];
}
/** 統(tǒng)計(jì)文本中所有圖片資源標(biāo)志的range*/
- (NSArray *)rangeOfSymbolString:(NSString *)symbol inString:(NSString *)string {
    NSMutableArray *rangeArray = [NSMutableArray array];
    NSString *string1 = [string stringByAppendingString:symbol];
    NSString *temp;
    for (int i = 0; i < string.length; i ++) {
        temp = [string1 substringWithRange:NSMakeRange(i, symbol.length)];
        if ([temp isEqualToString:symbol]) {
            NSRange range = {i, symbol.length};
            [rangeArray addObject:NSStringFromRange(range)];
        }
    }
    return rangeArray;
}

以上是轉(zhuǎn)換成純文本指厌,然后拼接上url操作,可以選擇性忽略踩验。
4.NSTextAttachment 延展,為NSTextAttachment添加一個(gè)屬性(關(guān)鍵操作)

.h文件
#import <UIKit/UIKit.h>
@interface NSTextAttachment (LMText)
//添加一個(gè)屬性
@property (nonatomic, strong) id userInfo;

@end

//.m文件
#import "NSTextAttachment+LMText.h"
#import <objc/runtime.h>
@implementation NSTextAttachment (LMText)
static void * keyOfUserInfo = &keyOfUserInfo;
//實(shí)現(xiàn)它的set箕憾,get方法
- (id)userInfo {
    return objc_getAssociatedObject(self, keyOfUserInfo);
}

- (void)setUserInfo:(id)userInfo {
    objc_setAssociatedObject(self, keyOfUserInfo, userInfo, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

@end
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拳昌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子炬藤,更是在濱河造成了極大的恐慌,老刑警劉巖沈矿,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異细睡,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)溜徙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蠢壹,“玉大人,你說(shuō)我怎么就攤上這事图贸∶峁悖” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵撒汉,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我睬辐,道長(zhǎng),這世上最難降的妖魔是什么溯饵? 我笑而不...
    開(kāi)封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮丰刊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘啄巧。我一直安慰自己,他們只是感情好掌栅,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著逗概,像睡著了一般。 火紅的嫁衣襯著肌膚如雪忘衍。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天枚钓,我揣著相機(jī)與錄音,去河邊找鬼搀捷。 笑死,一個(gè)胖子當(dāng)著我的面吹牛嫩舟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播家厌,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼饭于!你這毒婦竟也來(lái)了维蒙?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤颅痊,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后八千,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年照皆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膜毁。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖瘟滨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情杂瘸,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布败玉,位于F島的核電站,受9級(jí)特大地震影響运翼,放射性物質(zhì)發(fā)生泄漏返干。R本人自食惡果不足惜血淌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望癌淮。 院中可真熱鬧,春花似錦沦补、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至裹刮,卻和暖如春音榜,著一層夾襖步出監(jiān)牢的瞬間捧弃,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工违霞, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人买鸽。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像眼五,于是被迫代替她去往敵國(guó)和親妆艘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子看幼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 1.ios高性能編程 (1).內(nèi)層 最小的內(nèi)層平均值和峰值(2).耗電量 高效的算法和數(shù)據(jù)結(jié)構(gòu)(3).初始化時(shí)...
    歐辰_OSR閱讀 29,321評(píng)論 8 265
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)汽煮,斷路器,智...
    卡卡羅2017閱讀 134,601評(píng)論 18 139
  • 姐姐微信說(shuō)逗物,她把工作辭掉了,就想先好好歇一歇瑟俭,哪怕看看景呢。 今天去圖書館借書摆寄,想起姐姐家就在附近便喊她一起出來(lái)了...
    某只璐閱讀 262評(píng)論 0 0
  • 因?yàn)橛辛四?我才變得期待明天 明天也選擇接納我的今天
    宋禾初閱讀 147評(píng)論 0 0