iOS圖文混排-模仿石墨文檔文檔編輯器(踩坑篇)

圖文混排實現(xiàn)

最近公司的項目需要用到圖文混排編輯來書寫個人簡介溯革,由于需求功能比較簡單姓赤,所以找到了SimpleWord崭篡,個人感覺功能還是很強大的谷扣,但在實現(xiàn)需求過程中發(fā)現(xiàn)了一些問題涤躲,特此記錄一下县遣。

踩坑

1、在web上正常加載的圖片(圖1)袍睡,通過富文本的下面的方式顯示在textView上會出現(xiàn)圖片寬高不適配的情況知染,如圖2所示;

textView.attributedText = [[NSAttributedString alloc] initWithData:[autoStr dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];

圖1 - web上顯示的樣式


圖1 - textView上顯示的樣式

2斑胜、由于圖片都是網(wǎng)絡圖片控淡,顯示在textView上如果不對圖片進行修改,點擊保存止潘,用SimpleWord寫好的的方法將原生的 AttributedString 導出成 HTML的方式掺炭,會存在<img src="null"/>的問題。

填坑

1凭戴、針對第一個問題涧狮,我將得到的html加上img的css樣式,代碼如下,完美解決圖片不適配的問題者冤!

NSString *autoStr = [NSString stringWithFormat:@"<head><style>img{width:%f !important;height:auto}</style></head>%@",SCREENW - 2*20,_htmlString];

NSAttributedString *attributedText = [[NSAttributedString alloc] initWithData:[autoStr dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];

2肤视、針對第二個問題,圖片標簽src="null"的問題涉枫,這個問題還是困惑了很久的邢滑,后來通過查看他將原生的 AttributedString 導出成 HTML的方法,由于代碼較長愿汰,就貼出導出img的方法困后;

? ? 可以分析得出導出img的思路是獲取attributes中的NSAttachment類,在拿到NSAttachment的userInfo屬性衬廷,但這個userInfo是NSAttachment的分類屬性摇予,我們轉(zhuǎn)成attributedString時候并沒有給他賦初值,所以直接對原來圖片進行保存的話吗跋,肯定是沒有值的侧戴!

NSDictionary *attributes = [attributedString attributesAtIndex:effectiveRange.location effectiveRange:&effectiveRange];

NSTextAttachment *attachment = attributes[@"NSAttachment"];

NSParagraphStyle *paragraph = attributes[@"NSParagraphStyle"];

LMParagraphConfig *paragraphConfig = [[LMParagraphConfig alloc] initWithParagraphStyle:paragraph type:LMParagraphTypeNone];

if (attachment) {

switch (attachment.attachmentType) {

case LMTextAttachmentTypeImage: // attachment.fileWrapper.preferredFilename

[htmlContent appendString:[NSString stringWithFormat:@"<img src=\"%@\" width=\"100%%\"/>", attachment.userInfo]];

break;

default:

break;

}

}

找到問題之后,接下來就是解決了小腊,現(xiàn)在要做的就是在原來attributedString的基礎上取出NSTextAttachment救鲤,并給其userInfo屬性賦上我們的圖片地址;參照圖片生成NSTextAttachment 的方法

- (NSTextAttachment *)insertImage:(UIImage *)image秩冈;

我們在得出修改后的富文本字符串之前本缠,我們要先拿到所有的img標簽,在這里我用的是Hpple入问。

+ (NSArray *)getSrcArrWithHtmlString:(NSString *)htmlString {

NSData *data =[htmlString dataUsingEncoding:NSUnicodeStringEncoding];

NSString *result = [[NSString alloc] initWithData:data? encoding:NSUTF8StringEncoding];? //data轉(zhuǎn)字符串 為了打印不是亂碼

SLog(@"------%@",result);

TFHpple *Hpple = [[TFHpple alloc]initWithHTMLData:data];

NSArray *array =[Hpple searchWithXPathQuery:@"http://img"]; //獲取到為img標簽數(shù)組

NSMutableArray *secArr = [NSMutableArray array];

for (TFHppleElement *HppleElement in array) {

NSDictionary *node = HppleElement.attributes;

[secArr addObject:node[@"src"]];

}

return secArr;

}


最后丹锹,我們可以得出修改后的富文本字符串,大致代碼如下芬失;

// 改變attachment.userInfo

+ (NSAttributedString *)attStringFromAttributedString:(NSAttributedString *)attributedString textView:(UITextView *)textView htmlString:(NSString *)htmlString {

NSMutableAttributedString *copyAttr = [[NSMutableAttributedString alloc] initWithAttributedString:attributedString];

NSRange effectiveRange = NSMakeRange(0, 0);

int section = 0;

NSArray *secArr = [self getSrcArrWithHtmlString:htmlString];

while (effectiveRange.location + effectiveRange.length < attributedString.length) {

NSDictionary *attributes = [attributedString attributesAtIndex:effectiveRange.location effectiveRange:&effectiveRange];

NSTextAttachment *attachment = attributes[@"NSAttachment"];

if (attachment) {

attachment.attachmentType = LMTextAttachmentTypeImage;

attachment.userInfo = secArr[section]; // 獲取網(wǎng)絡圖片路徑

section++;

//

NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment];

NSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:@"\n"];

[attributedStr insertAttributedString:attachmentString atIndex:0];

[attributedStr addAttributes:textView.typingAttributes range:NSMakeRange(0, attributedStr.length)];

// 添加樣式

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];

[paragraphStyle setParagraphStyle:[NSParagraphStyle defaultParagraphStyle]];

paragraphStyle.paragraphSpacingBefore = 8.f;

paragraphStyle.paragraphSpacing = 8.f;

[attributedStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attributedStr.length)];

[copyAttr replaceCharactersInRange:effectiveRange withAttributedString:attributedStr];

}

effectiveRange = NSMakeRange(effectiveRange.location + effectiveRange.length, 0);

}

return copyAttr;

}


PS:由于我這次項目只是簡單的圖文編輯跟混排楣黍,需要的內(nèi)容不是很多,所以采用NSAttributedString進行展示棱烂,如果需要大量的圖片及文字展示租漂,例如閱讀類的APP,建議還是用coreText或textKit進行排版颊糜!

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哩治,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子衬鱼,更是在濱河造成了極大的恐慌业筏,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸟赫,死亡現(xiàn)場離奇詭異蒜胖,居然都是意外死亡消别,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門台谢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寻狂,“玉大人,你說我怎么就攤上這事朋沮【J” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵朽们,是天一觀的道長。 經(jīng)常有香客問我诉位,道長骑脱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任苍糠,我火速辦了婚禮叁丧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘岳瞭。我一直安慰自己拥娄,他們只是感情好,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布瞳筏。 她就那樣靜靜地躺著稚瘾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪姚炕。 梳的紋絲不亂的頭發(fā)上摊欠,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天,我揣著相機與錄音柱宦,去河邊找鬼些椒。 笑死,一個胖子當著我的面吹牛掸刊,可吹牛的內(nèi)容都是我干的免糕。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼忧侧,長吁一口氣:“原來是場噩夢啊……” “哼石窑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苍柏,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤尼斧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后试吁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體棺棵,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡楼咳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了烛恤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片母怜。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖缚柏,靈堂內(nèi)的尸體忽然破棺而出苹熏,到底是詐尸還是另有隱情,我是刑警寧澤币喧,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布轨域,位于F島的核電站,受9級特大地震影響杀餐,放射性物質(zhì)發(fā)生泄漏干发。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一史翘、第九天 我趴在偏房一處隱蔽的房頂上張望枉长。 院中可真熱鬧,春花似錦琼讽、人聲如沸必峰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吼蚁。三九已至,卻和暖如春问欠,著一層夾襖步出監(jiān)牢的瞬間桂敛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工溅潜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留术唬,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓滚澜,卻偏偏與公主長得像粗仓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子设捐,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

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