美文网首页
iOS 富文本之图文混排(插入图片上传到服务器)

iOS 富文本之图文混排(插入图片上传到服务器)

作者: 安静就好_ | 来源:发表于2018-05-24 09:01 被阅读575次

    第一版,以实现功能为主,相比较简陋一点,多多包含,先上效果图


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

    1.先修改键盘上的工具栏

    self.contentView.inputAccessoryView = [self createInputAccessoryView];
    //键盘上的工具栏
    - (UIView *)createInputAccessoryView {
        // 相机
        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)];
        //两个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.相机的点击事件,也就是图片上传服务器的方法

    //工具栏的点击事件
    - (void)item1Action {
    
    首先将图片上传到你们的服务器(这里需要图片和url)
     
    NSTextAttachment* textAttachment = [[NSTextAttachment alloc] init];
    //userInfo这个属性需要写延展,在下面
    textAttachment.userInfo = 图片的URL;
    //照片赋值
    textAttachment.image = image;
    //设置图片的大小
    textAttachment.bounds = CGRectMake(0, 0, myWidth/2, myWidth/2);
    //类型转换
    NSAttributedString* imageAttachment = [NSAttributedString attributedStringWithAttachment:textAttachment];
    NSMutableAttributedString *attriStr = [self.contentView.attributedText mutableCopy];
    //获取光标的位置
    NSRange range = self.contentView.selectedRange;
    //插入
    [attriStr insertAttributedString:imageAttachment atIndex:range.location];
    //拼接
    //[attriStr appendAttributedString:imageAttachment];
    self.contentView.attributedText = attriStr; 
    
    }
    

    3.上传服务器的相关操作

    正常来说,直接富文本文字转换成HTML格式的字符串上传服务器就可以了。如果没有特殊要求,
    上传字符串到服务器就告一段落了。
    
    我们这后台特殊要求,需要转换成字符串,然后图片链接拼接到相对应的位置(可以选择性忽略)
    NSString *textStr = [[self textStringWithSymbol:@"[图片]" attributeString:self.contentView.attributedText] mutableCopy];
        int index = 0;
        //通过替换
        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 ++;
                }
            }
        }
    
    执行上传服务器的操作。
    
    textStr 就是最终上传上传服务器的文本。

    下面的方法是将富文本转换成纯文本的信息

    /** 将富文本转换为带有图片标志的纯文本*/
    - (NSString *)textStringWithSymbol:(NSString *)symbol attributeString:(NSAttributedString *)attributeString{
        NSString *string = attributeString.string;
        //调用的方法在下面
        string = [self stringDeleteString:@"\n" frontString:@"[图片]" inString:string];
        //最终纯文本
        NSMutableString *textString = [NSMutableString stringWithString:string];
        //替换下标的偏移量
        __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);
                                         //将富文本中最终确认的照片取出来
                                         NSTextAttachment *attachmentImg = (NSTextAttachment *)value;
                                        //将图片存入数组,后面需要用到
                                         [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];
    }
    /** 统计文本中所有图片资源标志的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;
    }
    

    以上是转换成纯文本,然后拼接上url操作,可以选择性忽略。
    4.NSTextAttachment 延展,为NSTextAttachment添加一个属性(关键操作)

    .h文件
    #import <UIKit/UIKit.h>
    @interface NSTextAttachment (LMText)
    //添加一个属性
    @property (nonatomic, strong) id userInfo;
    
    @end
    
    //.m文件
    #import "NSTextAttachment+LMText.h"
    #import <objc/runtime.h>
    @implementation NSTextAttachment (LMText)
    static void * keyOfUserInfo = &keyOfUserInfo;
    //实现它的set,get方法
    - (id)userInfo {
        return objc_getAssociatedObject(self, keyOfUserInfo);
    }
    
    - (void)setUserInfo:(id)userInfo {
        objc_setAssociatedObject(self, keyOfUserInfo, userInfo, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }
    
    @end
    

    相关文章

      网友评论

          本文标题:iOS 富文本之图文混排(插入图片上传到服务器)

          本文链接:https://www.haomeiwen.com/subject/ylldjftx.html