LAYA_展示富文本

需求：当后台提供一段富文本之后，将富文本转化为合适的text展示在laya中。

可行的方法：
1，使用laya.htmlDivElement.
2，使用正则表达式。将富文本中的部分文字转化为纯文本，再直接赋值给laya的的text对象。

第一种方法：需要用html5语言来写排版和写文本样式。
第二种方法：可以直接使用laya.text对象（可以在编辑器内直接确定文本的样式，行距以及宽高，位置等等）。缺点是没法给每一段字体设置字体颜色。

我喜欢使用的是第二种。因为可以不需要在ts中插入大量html5代码。

比如以下的富文本：
“ ↵\t 作为一名律师，马兵热心公益，担任高新区总工会维权热线志愿顾问律师。 ↵

↵ ↵\t在2018年全程参与高新区“尊法守法携手筑梦”服务农民工公益法律服务行动。2018年度“尊法守法·携手筑梦”服务农民工公益法律服务行动暨“52公益行•律师在行动”大型公益活动。并被荣聘为合肥市包河区第二期“合适成年人”职务。 ↵ ↵ ↵\t 2018年7月27日至29日，马兵律师作为合肥市未成年健康成长社会观护员受邀参加。并在座谈交流会上作了极具建设性的发言。 ↵ ↵ ↵\t 2018年12月2日，由中共安徽省委宣传部等9部门联合主办，高新区承办的“省暨合肥市2018年‘宪法宣传周’启动仪式”在高新区半边街法治广场举行。安徽皖和律师事务所成为本次活动唯一列席律所，马兵律师作为皖和律所的领队积极组织同事参加，前往启动仪式现场，开展宪法日普法宣传活动。 ↵ ↵ ↵\t 2019年全程参与高新区“尊法守法携手筑梦”服务农民工公益法律服务行动。并受邀在合肥市委党校为高新区长宁中心党组织书记、党务工作者和2019年发展对象开展普法宣传公益讲座。 ↵”

具体实现：
1，新建一个laya项目。创建一个页面，添加一个text组件，并正确设置text的以下属性。font-size=30,leading=10,width=640

import WebGL = Laya.WebGL;
// 程序入口
class GameMain{constructor(){Laya.init(640,1038, WebGL);let page=new ui.MainPageUI();Laya.stage.addChild(page);page.visible=true;let str="<p class=\"MsoNormal\"> ↵\t<span>&nbsp; &nbsp; &nbsp; &nbsp; 作为一名律师，xx热心公益，担任高新区总工会维权热线志愿顾问律师。</span> ↵</p> ↵<p class=\"MsoNormal\"> ↵\t<span>&nbsp; &nbsp; &nbsp; &nbsp; 在</span>2018年全程参与高新区“尊法守法携手筑梦”服务农民工公益法律服务行动。2018年度“尊法守法·携手筑梦”服务农民工公益法律服务行动暨“52公益行•律师在行动”大型公益活动。并被荣聘为合肥市包河区第二期“合适成年人”职务。 ↵</p> ↵<p class=\"MsoNormal\"> ↵\t&nbsp; &nbsp; &nbsp; &nbsp; 2018年7月27日至29日，马兵律师作为合肥市未成年健康成长社会观护员受邀参加。并在座谈交流会上作了极具建设性的发言。 ↵</p> ↵<p class=\"MsoNormal\"> ↵\t&nbsp; &nbsp; &nbsp; &nbsp; 2018年12月2日，由中共安徽省委宣传部等9部门联合主办，高新区承办的“省暨合肥市2018年‘宪法宣传周’启动仪式”在高新区半边街法治广场举行。安徽皖和律师事务所成为本次活动唯一列席律所，马兵律师作为皖和律所的领队积极组织同事参加，前往启动仪式现场，开展宪法日普法宣传活动。&nbsp; ↵</p> ↵<p class=\"MsoNormal\"> ↵\t&nbsp; &nbsp; &nbsp; &nbsp; 2019年全程参与高新区“尊法守法携手筑梦”服务农民工公益法律服务行动。并受邀在合肥市委党校为高新区长宁中心党组织书记、党务工作者和2019年发展对象开展普法宣传公益讲座。 ↵</p>"str=str.replace(/<[^>]+>/g,"").replace(/&nbsp;/ig,"").replace(/ ↵\t/g,"\t").replace(/↵/g,"\n").replace(/ /g,"").replace(/\t/g,"");page.maintext.text=str;}
}
new GameMain();

2，最终呈现效果如下。

LAYA_展示富文本相关推荐

uniapp展示富文本
uniapp展示富文本闲言安装 mp-html 闲言以前vue展示HTML时候使用v-html就可以了,但是在 uniapp 中,部分可以展示,比如支付宝中就不行,在 uniapp中使用的是 & ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
如何展示富文本_自助建站如何做出个性化效果？
自助建站是当前很流行的建站方式,非常适合什么技术也不懂的小白,只需选一个自助建站模板,再稍加编辑就能快速生成自己的网站.很多人会以为,自助建站受限制太多,无法做出个性化定制效果,然而事实真是这样吗?其 ...
微信小程序解析并展示富文本编辑器保存后的内容
最近有个产品需求:在PC端里用富文本编辑器里编写自定义内容,然后保存后需要在小程序端展示,了解过的朋友就知道了,富文本编辑器输出的内容都是基于HTML标签的,比如:div.p.br这些常用的,而小程序 ...
android如何展示富文本_android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
html缩略文本,列表中展示富文本的缩略内容
列表中显示富文本的缩略内容业务中有一个一览列表,显示某个对象的一览信息.列表的其中一列用来显示对象的内容的缩略显示,该内容是含有各种html标签的富文本内容.开始决定不做处理直接显示,但看到一个一个 ...
android如何展示富文本_Android中如何在textView实现富文本
怎么在textView中实现类似这样的文本??要求可以点击跳转. 代码如下: xml中: android:id="@+id/tv_one" android:layout_width ...
C语言对文本进行断句,用TextView实现富文本展示，点击断句和语音播报
最近有一个需求:移动端需要展示用户在PC端做的笔记,而笔记内容是富文本形式--有图片,有文字,文字可以设置颜色.加粗.倾斜等等.同时,用户点击的时候能够语音朗读所点击的当前整句的内容. 第一反应就是富 ...
Django框架—富文本编辑器
借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的.所见即所得的页面此处以tinymce为例,其它富文本编辑器的使用也是类似的在虚拟环境中安装包 pip install dj ...
两文本一图片android,Android富文本编辑器（二）：图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...

LAYA_展示富文本

LAYA_展示富文本相关推荐

最新文章

热门文章