# 使用自定义html

#### 基本用法

1、先点击转译 html 文本按钮，将需要转译的html文本贴入显示内容中

  
[图片附件未整合: ../_assets/973148836790968321/001-a11c05d715.png]

2、再点击一次 html 图标按钮，在显示内容里就会转换成转译后的效果，保存后就可以在前台看到对应效果

[图片附件未整合: ../_assets/973148836790968321/002-410258dd34.png]

#### 特殊用法

##### 一、如需要在自定义html内使用字段有两种方式

##### （一）方法一

1、通过文本框中使用 ‘ # ’ 插入所需字段

[图片附件未整合: ../_assets/973148836790968321/003-ffd7b7f7f0.png]

2、点击 html 按钮后，将转译后插入字段的html复制粘贴嵌入所需的 html 内容内，再点击 html 按钮，就可以将字段赋值入所包裹的 html 里

[图片附件未整合: ../_assets/973148836790968321/004-665c59555e.png]

  
[图片附件未整合: ../_assets/973148836790968321/005-48aa1c8b60.png]

##### （二）方法二

1、通过系统字段：{cusdata:字段name} ；非系统字段：{cusdata:fieldId}写法可以再 html 文本内任意赋值动态字段  
[图片附件未整合: ../_assets/973148836790968321/006-b702ddd362.png]

  
[图片附件未整合: ../_assets/973148836790968321/007-57e926d4a3.png]

> 显示转换html内容：（仅支持物理表）

```
文本：$htje$\
条形码：#BARCodeImg#\
进度条：<div class='cube-list-progress' style='white-space: normal;min-width:80px;max-width:200px;'><div class='ant-progress-outer'><div class='ant-progress-inner'><div class='ant-progress-bg' style='width: Percentage($htje$); height: 8px;background-color:#ff5500;max-width: 100%;'></div></div></div><span class='ant-progress-text' style='width: 100%;margin-left: 5px;'>Percentage($htje$)</span></div>\
百分比：Percentage($htje$)\
金额大写：Amount($htje$)\
金额千分位：Thousands($htje$)\
选择框实心：<div class="cube-list-select-tag selectid_$Field-ID$"><div class="cube-select-tag select-value-$Select-Value$" style="border-radius:4px">$xzk$</div></div>\
选择框空心：<div class="cube-list-select-tag1 selectid_$Field-ID$" ><div class="cube-select-tag select-value-$Select-Value$" style="border-radius:4px">$xzk$</div></div>
```
