使用UIWebView中html标签显示富文本

用UIWebView来渲染文本并期望达到富文本的效果开销很大哦!

Work

本人此处直接加载自定义字体"新蒂小丸子体",源码不公开,望见谅.

代码如下:

渲染后效果如下图所示,效果是不是挺不错的呢.

我们再把尽头两个字渲染成红色试试.

源码:

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 注册字体

    REGISTER_FONT(bundleFont(@"XinDiXiaoWanZi.ttf"),

                  @"新蒂小丸子体");

    NSString *jsString = [NSString stringWithFormat:

                          @"<html> \n"

                          // 设置字体的css样式

                            "<head> \n"

                                "<style type=\"text/css\"> \n"

                                "body {font-size: %f; font-family: \"%@\"; color: %@;}\n"

                                "</style> \n"

                            "</head> \n"

                          // 字符串显示部分

                            "<body>%@</body> \n"

                          "</html>",

                          .f,                          // 字体大小

                          CUSTOM_FONT(@"新蒂小丸子体", ), // 字体类型

                          @"#000000",                    // 字体颜色

                          @"走向世界的<span style=\"color:red;\">尽头</span>!"];

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , , )];

    [webView loadHTMLString:jsString

                    baseURL:nil];

    [self.view addSubview:webView];

}

viewDidLoad

效果如下:

Question

http://stackoverflow.com/questions/15872921/best-way-to-display-text-with-html-tags-in-ios-application

Currently I am working on iOS client for web-chat. Thus chat messages have HTML tags (bold, italic, underlined, font color, images (smiles), etc.). For example:

最近,我要给一个网页聊天的网站做一个客户端.这些聊天信息包含了很多HTML标签(bold, italic, underlined, font color, images (smiles), etc.),例如:

<b>bold</b> <i>italic</i> <!--smile:bird--><img style="vertical-align: middle;border: none;" alt="bird" src="http://www.site.com/engine/data/emo_chat/bird.gif" /><!--/smile--> ordinaty text

For the moment I have 2 ideas how to display messages:

当下,我有两个思路来显示这些信息:

  1. Add UIWebView to tables cell. But I think that it's not an option, because we will have a lot of messages and a lot of WebViews. 将UIWebView添加到cell中,但这个备选方案问题多多,因为我有很火很多消息需要显示,同时也需要很多很多的WebView.
  2. Add UITextView to tables cell, parse HTML tags and make necessary changes to attributed string. But UITextView doesn't support images (if I am right). 将UITextView添加到cell中,解析HTML标签并转换成富文本标签.但是,UITextView不支持图片显示(如果我没猜错的话).

Is there any other (better) way to display such data (styled text + images)?

是否有其他更好的方式来显示富文本加图片呢?

Answer

Using a webview per-cell is not going to work as you suspect. Webviews take a noticeable time to render which means you will likely end up with old webview content being momentarily displayed in reused cells until the new content renders. Webview is also a pretty heavy-weight UI element and you will encounter performance issues with having many of them on the screen updating at once.

将webView添加到cell中绝对达不到你的预期.WebView需要很长很长时间来渲染,在cell中重用你就会死.WebView是开销非常大的UI控件.

You will want to parse the HTML text you are given into an attributed string using a library like DTCoreText. From here, if you can target iOS 6 or later you can set the attributedText property on a standard UILabel. If you need to target earlier iOS versions you can again use DTCoreText, specifically the DTAttributedLabel or DTAttributedTextCell components.

也许你需要 DTCoreText 来帮助你将HTML标签解析成富文本.

The parsing and NSAttributedString rendering can all be done manually using an XML parser and CoreText, but DTCoreText will make your life much easier.

虽然解析HTML以及富文本的渲染都可以通过手动的XML解析器以及CoreText来实现, 只不过 DTCoreText 让你更轻松而已.

Update: You mentioned in a comment that you want support for <img/>. DTCoreText does have some basic image support, but this is a really hard problem if you are rendering text with CoreText because you have to make text flow around the image correctly, and reserve some space in the core text renderer to put your image into. If there is just a single image for each cell, I would suggest you manually extract the image path/url and lay it out with a UIImageView alongside your text.

注意:你提到了一个要素就是想支持<img/>.DTCoreText 支持几种基本的image,但是如果你想用 CoreText 来实现这种图文混排的工作会让你非常蛋疼.如果你仅仅是展示一张图片到一个cell当中.我建议你直接用UIImageView来显示图片算了.

使用UIWebView中html标签显示富文本的更多相关文章

  1. 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）

    我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...

  2. 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码（代码是.net core3.0版本）

    研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...

  3. iOS swift 富文本显示 富文本在iOS中使用场景和解决方案

    项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...

  4. cocos2d-x中，简单html富文本显示

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037414.html  虽然自从cocos2d-x更新到3.0后,使用freetype, ...

  5. Qt之QTableView显示富文本

    简述 对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本.进度条.复选框等,今天我们介绍一下关于富文本的显示. 可能绝大多数小伙伴会通过QAbstractTableModel中的d ...

  6. QTableView使用HTML显示富文本

    对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本.进度条.复选框等,今天我们介绍一下关于富文本的显示. 可能绝大多数小伙伴会通过QAbstractTableModel中的data ...

  7. php 解析富文本编辑器中的hmtl内容,富文本样式正确输出

    说明:富文本编辑器中的内容在直接获获取后需要解析以后才能在页面中正确显示 我在后端这样处理: $content = htmlspecialchars_decode($info['intro']); h ...

  8. vb如何将数据库中某个字段显示在一个文本框

    Dim mrc As ADODB.Recordset Private Sub cmdQuery_Click() Dim txtSQL As String Dim MsgText As String t ...

  9. IOS中如何显示带有html标签的富文本

    NSString *strHTML = @"<p>你好</p><p>        这是一个例子,请显示</p><p>外加一个ta ...

随机推荐

  1. RT-Thread Nano移植

    RT_Thread移植:在MDK下以组件形式提供 https://pan.baidu.com/s/1miac86O#list/path=%2Fsharelink4264488348-377157516 ...

  2. CMS: DNN And Umbraco

    在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...

  3. Monkey入门之如何在android虚拟机中安装apk包

    如果想把公司的产品apk包安装到android虚拟机中,应该进行如下操作: 1.首先将apk包放到C:\Program Files\Android\android-sdk\platform-tools ...

  4. Respone笔记

    1 设置定时刷新的头 //设置定时刷新的头 response.setHeader("refresh", "5;url=http://www.baidu.com" ...

  5. 【lua】如何倒序查找字符

    现在有这样一个需求,有一个字符串,需要查找字符i最后出现的位置,不过相对于其他语言来说,Lua并没有提供这一操作,那么如何是好? 现在有这样几个方法: string.sub(str, i ,j) 功能 ...

  6. GridView 基本使用

    项目中实例一 <asp:GridView ID="gvBatchReceive" runat="server" AutoGenerateColumns=& ...

  7. bzoj 3064: Tyvj 1518 CPU监控

    Description 1.区间加 \(z\) 2.区间覆盖为 \(z\) 3.查询区间最大值 4.查询区间历史最大值 Solution 线段树维护历史最值,思想大致是维护标记出现过的最大值 考虑这种 ...

  8. php数组操作，js数组操作

    俩语言一块儿学老混.整理一下. php: 1.声明: 1)$arr1 = array('key1' => 'value1', 'key2' => 'value2' ...);//关联数组, ...

  9. D3基础---简介和数据

    D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...

  10. 流畅的python和cookbook学习笔记（二）

    1.元组拆包和解压序列赋值 任何的序列 (或者是可迭代对象) 可以通过一个简单的赋值语句解压并赋值给多个 变量.唯一的前提就是变量的数量必须跟序列元素的数量是一样的. 1.平行赋值: >> ...