雖然對(duì)iOS工作有幾年了但是沒怎么寫過文章躁垛,一直覺得自己技術(shù)還不夠剖毯,寫文章出來有點(diǎn)丟人現(xiàn)眼,但是發(fā)現(xiàn)有關(guān)iOS富文本編輯這塊網(wǎng)上的資料比較少所以想寫篇文章分享下自己的心得教馆。
下面是公司要求實(shí)現(xiàn)的符文編輯的效果界面
當(dāng)時(shí)網(wǎng)上調(diào)研了很多發(fā)現(xiàn)有轉(zhuǎn)html的也有直接原生的逊谋,一開始我比較欣賞的的例子是專程html與后臺(tái)進(jìn)行交互的貼上地址,還是比較詳細(xì)的http://www.reibang.com/p/b2a0528659bd
但是因?yàn)檫€有個(gè)安卓端的開發(fā)所以我也會(huì) 征求下安卓端的意見土铺,他們對(duì)于html的不是很滿意胶滋,安卓對(duì)于webview的實(shí)現(xiàn)性能比較差,而且還要考慮以后的維護(hù)工作悲敷,所以最后討論下來的結(jié)果是究恤,移動(dòng)端轉(zhuǎn)成json文本傳輸給后臺(tái)具體結(jié)構(gòu)如下
{
"dataList": [
{
"type": 1,
"content": "我是第一條文本",
"imageWidth": 0,
"imageHeight": 0
},
{
"type": 1,
"content": "我是第二條文本",
"imgWidth": 0,
"imgHeight": 0
},
{
"type": 2,
"content": "http://img.baidu.com/xxx1.jpg",
"imgWidth": 200,
"imgHeight": 200
},
{
"type": 1,
"content": "我是第三條文本",
"imgWidth": 0,
"imgHeight": 0
},
{
"type": 2,
"content": "http://img.baidu.com/xxx2.jpg",
"imgWidth": 200,
"imgHeight": 200
}
]
}
根據(jù)type來確定是文本還是圖片
而實(shí)現(xiàn)這個(gè)效果使用原生的開發(fā)效果,最后選擇了YYText的富文本編輯后德,最后實(shí)現(xiàn)效果是這樣子的
上圖為要傳輸?shù)臄?shù)據(jù)部宿,具體就是進(jìn)行序列化,轉(zhuǎn)成json文本傳給后臺(tái)大概就這樣子了,希望能夠幫到大家再附上 yytext附文圖片插入的代碼
NSMutableAttributedString*string = [[NSMutableAttributedStringalloc]initWithAttributedString:self.textView.attributedText];
UIImage*image = photos[0];
CGFloatscale = image.size.width/(SCREEN_WIDTH-32);
CGFloatphotoHeight = image.size.height/ scale;
YYAnimatedImageView*imageView = [[YYAnimatedImageViewalloc]initWithFrame:CGRectMake(0,16,SCREEN_WIDTH-32, photoHeight)];
//imageView.image = image;
[imageViewyy_setImageWithURL:[NSURLURLWithString:@"https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=f330fb6cf2d3572c72ef948eeb7a0842/fcfaaf51f3deb48f75b50d5bf01f3a292cf57853.jpg"]options:YYWebImageOptionSetImageWithFadeAnimation];
NSMutableAttributedString*attachText = [NSMutableAttributedStringyy_attachmentStringWithContent:imageViewcontentMode:UIViewContentModeScaleAspectFillattachmentSize:imageView.sizealignToFont:[UIFontsystemFontOfSize:14.fweight:UIFontWeightRegular]alignment:YYTextVerticalAlignmentCenter];
attachText.yy_lineSpacing=5;
[stringappendAttributedString:attachText];
[stringappendAttributedString:[[NSMutableAttributedStringalloc]initWithString:@"\n"]];
//修改行間距
string.yy_font= [UIFontsystemFontOfSize:14.fweight:UIFontWeightRegular];
string.yy_lineSpacing=5;
_textView.font= [UIFontsystemFontOfSize:14.fweight:UIFontWeightRegular];