1. 程式人生 > >iOS富文字編輯(在label裡顯示文字和圖片)

iOS富文字編輯(在label裡顯示文字和圖片)

在開始寫之前先看一下效果圖


在此效果圖中有富文字中指定的位置新增圖片,還有最後位置新增的圖片資訊


程式碼如下

呼叫方法-------

給label賦值

NSString  * Str = @"中國人民解放軍萬歲,中華人民共和國萬歲,萬歲!";
    self.attrobiuteLabel.attributedText = [self stringWithUIImage:Str];

   1:建立富文字,設定樣式

// 新增單個屬性
//- (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range;

// 建立一個富文字
    NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:contentStr];


// 修改富文字中的不同文字的樣式
    [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)];
    [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)];


  2:將圖片新增到指定的富文字的位置中

/**
     新增圖片到指定的位置
     */
    NSTextAttachment *attchImage = [[NSTextAttachment alloc] init];
    // 表情圖片
    attchImage.image = [UIImage imageNamed:@"jiedu"];
    // 設定圖片大小
    attchImage.bounds = CGRectMake(0, 0, 40, 15);
    NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
    [attriStr insertAttributedString:stringImage atIndex:2];

   3:設定其中的的範圍內的文章胃紅色
// 設定數字為紅色
    [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)];
    [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)];
   4:在富文字的最後一位新增圖片
 // 新增表情到最後一位
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    // 表情圖片
    attch.image = [UIImage imageNamed:@"jiedu"];
    // 設定圖片大小
    attch.bounds = CGRectMake(0, 0, 40, 15);
    
    // 建立帶有圖片的富文字
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    [attriStr appendAttributedString:string];
</pre><p><span style="font-size:18px"></span></p><pre name="code" class="objc">// 新增群體屬性
// - (void)addAttributes:(NSDictionary<NSString *, id> *)attrs range:(NSRange)range;


最快的還有一個屬性設定的方法
NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:30]};
    [attriStr addAttributes:attriBute range:NSMakeRange(5, 9)];

  整個方法如下

- (NSAttributedString *)stringWithUIImage:(NSString *) contentStr {
    
    // 建立一個富文字
    NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:contentStr];
    // 修改富文字中的不同文字的樣式
    [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)];
    [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)];
    
    
    /**
     新增圖片到指定的位置
     */
    NSTextAttachment *attchImage = [[NSTextAttachment alloc] init];
    // 表情圖片
    attchImage.image = [UIImage imageNamed:@"jiedu"];
    // 設定圖片大小
    attchImage.bounds = CGRectMake(0, 0, 40, 15);
    NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
    [attriStr insertAttributedString:stringImage atIndex:2];
    
    
    // 設定數字為紅色
    /*
    [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)];
    [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)];
    */
    //NSDictionary * attrDict = @{ NSFontAttributeName: [UIFont fontWithName: @"Zapfino" size: 15],
                               // NSForegroundColorAttributeName: [UIColor blueColor] };
    
    //建立 NSAttributedString 並賦值
    //_label02.attributedText = [[NSAttributedString alloc] initWithString: originStr attributes: attrDict];
    NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:30]};
    [attriStr addAttributes:attriBute range:NSMakeRange(5, 9)];
    
    // 新增表情到最後一位
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    // 表情圖片
    attch.image = [UIImage imageNamed:@"jiedu"];
    // 設定圖片大小
    attch.bounds = CGRectMake(0, 0, 40, 15);
    
    // 建立帶有圖片的富文字
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    [attriStr appendAttributedString:string];
    
    return attriStr;
}



最後認識一下各個屬性的意思
// NSFontAttributeName                設定字型屬性,預設值:字型:Helvetica(Neue) 字號:12
// NSForegroundColorAttributeNam      設定字型顏色,取值為 UIColor物件,預設值為黑色
// NSBackgroundColorAttributeName     設定字型所在區域背景顏色,取值為 UIColor物件,預設值為nil, 透明色
// NSLigatureAttributeName            設定連體屬性,取值為NSNumber 物件(整數),0 表示沒有連體字元,1 表示使用預設的連體字元
// NSKernAttributeName                設定字元間距,取值為 NSNumber 物件(整數),正值間距加寬,負值間距變窄
// NSStrikethroughStyleAttributeName  設定刪除線,取值為 NSNumber 物件(整數)
// NSStrikethroughColorAttributeName  設定刪除線顏色,取值為 UIColor 物件,預設值為黑色
// NSUnderlineStyleAttributeName      設定下劃線,取值為 NSNumber 物件(整數),列舉常量 NSUnderlineStyle中的值,與刪除線類似
// NSUnderlineColorAttributeName      設定下劃線顏色,取值為 UIColor 物件,預設值為黑色
// NSStrokeWidthAttributeName         設定筆畫寬度,取值為 NSNumber 物件(整數),負值填充效果,正值中空效果
// NSStrokeColorAttributeName         填充部分顏色,不是字型顏色,取值為 UIColor 物件
// NSShadowAttributeName              設定陰影屬性,取值為 NSShadow 物件
// NSTextEffectAttributeName          設定文字特殊效果,取值為 NSString 物件,目前只有圖版印刷效果可用:
// NSBaselineOffsetAttributeName      設定基線偏移值,取值為 NSNumber (float),正值上偏,負值下偏
// NSObliquenessAttributeName         設定字形傾斜度,取值為 NSNumber (float),正值右傾,負值左傾
// NSExpansionAttributeName           設定文字橫向拉伸屬性,取值為 NSNumber (float),正值橫向拉伸文字,負值橫向壓縮文字
// NSWritingDirectionAttributeName    設定文字書寫方向,從左向右書寫或者從右向左書寫
// NSVerticalGlyphFormAttributeName   設定文字排版方向,取值為 NSNumber 物件(整數),0 表示橫排文字,1 表示豎排文字
// NSLinkAttributeName                設定連結屬性,點選後呼叫瀏覽器開啟指定URL地址
// NSAttachmentAttributeName          設定文字附件,取值為NSTextAttachment物件,常用於文字圖片混排
// NSParagraphStyleAttributeName      設定文字段落排版格式,取值為 NSParagraphStyle 物件 

有更多幹貨在公眾號上,請關注哦,不定期推送哦


相關推薦

iOS文字編輯(在label顯示文字圖片)

在開始寫之前先看一下效果圖 在此效果圖中有富文字中指定的位置新增圖片,還有最後位置新增的圖片資訊 程式碼如下 呼叫方法------- 給label賦值 NSString * Str = @"中國人民解放軍萬歲,中華人民共和國萬歲,萬歲!"; sel

Django中文字編輯器KindEditor的使用圖片上傳

Blog中有文章Model,文章內容會包括各種格式的資料,比如:圖片、超連結、段落等。為了達到這個目的,我們可以使用富文字編輯器。我們有多重選擇來使用富文字編輯器,比如kindeditor、django-ckeditor、自定義ModelAdmin的媒體檔案。這樣就將kindeditor加上了富文字編輯器。4

ueditor文字編輯器跨域上傳圖片解決辦法

在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域, 網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加document.dom

超好用的文字編輯器froalaEditor(方便傳圖片視訊等)

       最近專案有個文章管理功能,我對比了很多富文字編輯器,有的是上傳圖片不方便,有的是複製貼上不方便,有的是但編輯器裡面不能改變圖片大小,最後,我找到了froalaEditor,可以說是集各種功能為一身,不但介面清爽,功能也十分全面,插入圖片和視訊都很方便,自己可以到

使用ckeditor文字編輯器頁面解析文字樣式方法

從資料庫讀寫的是這樣的<p><strong>hello,world<strong></p> 但是這樣顯示在網頁上不是我們想要的,我們想要的是 hello,world struts2的解決辦法是<s:property

在專案中使用文字編輯器UEditor(開源文字編輯器外掛)

第一步:下載UEditor所需要的所有檔案 此處用的是JSP-UTF-8版本 下載連結:http://ueditor.baidu.com/website/download.html 第二步:將下載檔案解壓至專案web目錄下 第三步:將資料夾下/jsp/lib目錄下的五個jar包拷貝至專案中的WEB-INF/

百度文字編輯器UEditor的使用他的圖片上傳

最近在做一個新聞釋出系統的小專案,需要用到富文字編輯器這個東東,於是上網搜了下,白活兩天給白活出來了,接下來談談我對百度富文字編輯器的使用心得: 要想使用這個富文字編輯器,首先呢得從百度官網上下載,文章最後我會貼出來資源的連結,大家可以直接下載哈~ 下載完成之後呢,解壓,目

React中使用文字編輯器Quill,支援貼上圖片

最近專案中需要用到富文字編輯器,並且客戶明確提出需要實現可以直接截圖貼上到文字框中。 由於我們的前端是用react寫的,於是就去參考了知乎的實現,發現知乎的富文字框是可以直接貼圖進去的,但由於看不到原始碼,只能瀏覽器除錯看了一下,發現他就是一個可編輯的div,

PDF編輯軟體怎麼編輯PDF文字

  PDF檔案現在我們的工作中經常會接觸得到,有時候PDF檔案裡面的字有錯誤需要修改的時候該怎麼辦呢,PDF檔案不像Word文件那樣可以直接開啟編輯,PDF檔案的編輯是需要PDF編輯軟體的,那麼,PDF編輯軟體怎麼編輯PDF裡的文字呢?接下來就跟小編一起看看下面的文章瞭解一下吧。   1.開啟執行P

使用wangEditor輕量級的文字編輯器,來批量上傳圖片

1.wangEditor編輯器 wangEditor官網 相對其他幾個編輯器來說, wangEditor還是比較功能齊全的, 而且用起來上手也快. 缺點就是表情不多, 就內建了幾個新浪表情和emoji, 不過可以自己拓展 , 然後選單的圖示也不太好看

文字編輯器ckeditor的上傳圖片配置

以前在工作中用過富文字編輯器,因為以前沒有用過這種東西,所以在使用的時候遇到了一些問題,就是儲存的時候,文字可以正常儲存,但是圖片無法儲存。後來經過配置解決了這個問題,對於新手來說,這個配置可能有點複雜,所以將它記錄下來。首先新建一個ashx檔案,程式碼如下public cl

推薦幾款高效的Python文字編輯器| 高效的文字編輯器的特點是什麼

我們都知道程式設計師花費大量的時間在編寫、閱讀和編輯程式碼上,因此一定要使用高效的文字編輯器才能夠提高並很好的完成工作的效率和保證工作的質量。 什麼是高效的文字編輯器呢?除了自己用的得心應手外,小編認為還應該包含以下幾個特點: ·突出程式碼的結構,讓你在編寫程式碼時就能夠

pycharm 使用之:導包的小區別(使用編輯的包環境變數的包)

一、前言     標題名字有點low,可能一看不知道什麼意思,但是看了接下來的東西,相信你就會明白了。     之前,我的一片部落格是解決pycharm匯入selenium包,不能 import webdriver 的問題,地址:     其實,當時我就想過,我當時

微信二次分享不顯示摘要圖片的解決方法

conf eight sage 接口 所有 微信公眾平臺 取消 onf split 微信二次分享不顯示摘要和圖片的解決方法 解決不顯示摘要和圖片的問題,需要調用微信公眾號的js-sdk的api ,需要前端和後臺的配合, 後臺需要返回 appid (公眾號的appid )

JSP在tomcat專案中部署後無法顯示CSS圖片

在java web 專案中用myeclipe自帶瀏覽器瀏覽該JSP是可以正常顯示圖片和CSS的,將程式碼複製出來變成html 單擊開啟也是可以正常顯示的,一旦用tomcat部署完,通過瀏覽器訪問,就不無法顯示圖片和css了,有沒有碰到這問題的,求解答,謝謝 (adsbygoogle

Web 文字編輯器 Neditor 2.1.13 釋出,修復字型顯示顯示“none” 的問題

   更新內容: BUG 修復 修復 字型大小和字型選擇後顯示區顯示 none 的問題 #105 Demo:  https://demo.neditor.notadd.com/ Neditor 是基於 ueditor 的更現代化的富文字編

js處理去掉文字編輯的html,樣式,只顯示文字內容,以供列表頁使用

<script type="text/javascript"> var description = '<p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-lef

文字編輯ueditor在jsp使用配置總結

專案中使用了ueditor編輯器,剛開始的時候真的是一頭霧水,不過後來總算是能夠將ueditor整合到專案中了,現在把自己的配置過程記錄一下: 一、首先得讓編輯器能夠在頁面上顯示出來,這個在官方文件寫的非常的詳細,可直接按照官方文件的說明即可成功配置,我按如下步驟配置:

iOS通過html模版實現文字編輯

 在iOS開發中,常常會遇到一些富文字編輯,如新聞,公告等,NSMutableAttributedString又有一定的侷限性,所以我想到用html 模版去載入富文字頁面,根據所需要的格式,去構建相應的html介面。一個簡單的html模版如下: <!DOCTYP

css-文字編輯顯示

搞習慣了iOS開發了,在網頁上遇見富文字的編輯,一下子就給整懵逼了。查閱了一下資料,於是乎,好像很簡單的滴啊。 看看效果 CD275366-DA34-4CFD-A08A-7CA0993B54FF.png 隨便一些的 效果有點low!!! 看看html程式碼