使用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>",37.f,                          // 字体大小CUSTOM_FONT(@"新蒂小丸子体", 0), // 字体类型@"#000000",                    // 字体颜色@"走向世界的<span style=\"color:red;\">尽头</span>!"];UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 100, 320, 70)];[webView loadHTMLString:jsStringbaseURL: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来显示图片算了.

转载于:https://www.cnblogs.com/YouXianMing/p/3722976.html

使用UIWebView中html标签显示富文本相关推荐

  1. div iframe 显示html,IE中iframe标签显示在DIV之上的问题解决方案

    在做网页时前端时,使用IE打开时会出现标题栏DIV被遮挡PDF遮挡, 后在stackoverflow中查到是IE浏览器的问题:链接https://stackoverflow.com/questions ...

  2. edui 富文本编辑_React中使用UEditor百度富文本的方法

    前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入uedito ...

  3. vue中引入TinyMCE实现富文本编辑器

    整片文章是以vue2.X 引入tinymce富文本编译器 首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...

  4. uniapp显示富文本效果demo（整理）

    uniapp显示富文本: <template><view class="rtfBox"><view class="margin-left30 ...

  5. vue如何过滤html标签,去除富文本中的html标签及vue、react、微信小顺序中的过滤器...

    在猎取富文本后,又只需显现部分内容,须要去除富文本标签,然后再截取个中一部分内容:然后就是过滤器,在微信小顺序中运用照样挺屡次的,在vue及react中也遇到过 1.富文本去除html标签去除html ...

  6. Andoid TextView显示富文本html内容及问题处理

    目录 富文本内容与效果 TextView + Html ImageGetter 处理图片(表情) TagHandler 处理html内容的节点 Html的转换过程 HtmlToSpannedConve ...

  7. 微信小程序如何显示富文本，类似v-html，rich-text

    一.微信小程序需求,有一段富文本字符串需要解析并展示在页面上: 结构如下 :content 二.解决办法 一.用过vue 的都知道vue 有个 v-html 属性,可以准换html格式并且展示: 但是 ...

  8. 微信小程序加载并且编译显示富文本编辑器内容

    微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...

  9. UILabel 使用 标签,圆角,富文本

    2019独角兽企业重金招聘Python工程师标准>>> 继承关系:UIView : UIResponder : NSObject ///UILabel 显示的文本只读,无法编辑,可以 ...

最新文章

  1. linux创建ftp指定目录命令行,Linux-命令行建立FTP
  2. Apache-DBCP数据库连接池解读
  3. 天气预报开放API调用
  4. JVM之Java栈Java stack
  5. Spark读取配置源码剖析
  6. SAP Cloud for Customer Cloud Application Studio的下载地址
  7. F. Strange Array（Codeforces Round #727 (Div. 2)）（主席树）
  8. 关于response格式转换
  9. Serverless 实战 —— 快速搭建 SpringBoot 应用
  10. 【Nginx那些事】nginx原理解析
  11. 【kibana】状态异常 Status: Red Status changed from red to yellow - No existing Kibana index found
  12. DIY(也即Build Your Own) vSAN时，选择SSD需要注意的事项
  13. SpringMVC ------使用POJO对象绑定请求参数值
  14. R语言︱情感分析—词典型代码实践（最基础）（一）
  15. c语言= 什么意思,C语言=是什么意思?
  16. Vue动态组件异步组件
  17. TypeScript入门教程
  18. 12款开源或免费的3D建模软件
  19. Excel,遗忘密码后如何撤销工作表保护密码
  20. 芯原的神经网络处理器IP获百余款人工智能芯片采用

热门文章

  1. 制药企业核算报表系统整体方案
  2. Ribbon客户端负载均衡
  3. iphone启动页面，Default.png .
  4. python第五章课后题答案_python程序设计基础（嵩天）第五章课后习题部分答案
  5. 力扣 496 下一个更大的元素I
  6. 计算机算法设计与分析 循环赛日程表
  7. 利用GitHub搭建一个酷炫免费的个人博客
  8. Python 中星号的本质及其使用方式
  9. 可见光迁移——学习笔记
  10. ROS2的学习笔记(legacy)