如何在页面中显示并识别HTML 标签字段

Posted 2021-09-07 LanLan_Guo

在.Net开发中，有富文本控件可以渲染和展示html，XHTML,RTF等标签字段。
因此在前端中，往往需要将原始的数据字段存储到数据库中的HTML 标签字段展示直接展示在页面当中，因为前端最终渲染结果本身就是以HTML 代码生成并且实现的。
因此在整个前端去实现"嵌套HTML"页面的渲染，复杂程度会更大，如何区分内容本身的HTML 代码还是页面本身的HTML 的代码，让浏览器精准渲染，核心解决方法，就是在浏览器解析前，使用内部的解析引擎，将HTML 代码解析为自身的代码，再转换为浏览器通用的代码。
ActiveReportsJS 前端报表控件，突破前端疑难问题，发布了富文本控件，富文本控件 在报表中显示静态或动态混合格式文本。您可以使用它来展示包含HTML代码的数据字段，或者静态标签或显示来自数据源的预格式化内容。

添加富文本
您可以通过在设计器的工具箱中双击相应的项目，将添加富文本添加到报表中。并将其拖放到报表页面区域或其他容器中，例如带装列表。
常规富文本格式配置
常规配置包括基本报表项属性，公共样式属性，文本属性的子集和可见性
内容
标记类型属性设置混合格式内容的语言。 当前，唯一受支持的语言是HTML。 您可以在Value属性中使用以下HTML标记。
<span> - 在文档中定义节
<h1> - <h6> - 定义标题1到标题6
<ul> - 定义无序列表
<ol> - 定义有序列表
<li> - 定义列表项
-定义超链接
或 - 定义加粗字体
或 - 定义强调文字
^{- 定义上标文本
_{- 定义下标文本}}

上述标记支持以下CSS样式。

font-family
font-size
font-style
font-weight
color
background-color
background-image
text-align
text-indent
list-style-type

值支持表达式 使用上述标记和样式设置混合格式的内容。 使用表达式语法，您可以为富文本控件的值设置动态内容，例如：
<p>Your order number is: #{orderID}</p>
<p>If you require any changes to your order or delivery address you must contact us
<span style="color:red;font-weight:bold">as soon as possible</span> and it might not be possible if your order has already gone through to fulfilment.</p>

在运行时，带有此值属性的富文本将生成以下输出。
如果Value属性是绑定字段 ，且字段的值就是HTML内容，然后将相应地识别并渲染支持的标签和样式。
布局显示在一起标志可确保在适合的情况下，富文本格式始终显示在单个页面上
自动变大 标志表示富文本是否可以增加其高度以适应不断增长的内容。