组件库 - （高级）HTML 模式 - 《宜搭帮助中心 - 旧版本》

1. 业务场景
2. 使用范围
3. 最小DEMO演示

1. 业务场景

HTML 模式主要为了满足用户进行一些自定义的功能开发，除了现有的表单、流程、报表等场景外，用户可以利用展示页面的 HTML 模式进行代码模式开发。

2. 使用范围

目前展示页面 HTML 模式仅在内部使用，外部版本不可见。

3. 最小DEMO演示

第一步：新建一个展示页面，选择 HTML 设计方式

第二步：说明

进入设计态，页面分成两部分，头部操作栏和底部设计栏。
头部操作栏包括后退按钮、标题展示、保存按钮、预览按钮和温馨提示。
底部设计部分是一个嵌入的 MonacoEditor 的编辑器。

MonacoEditor 配置如下所示：

<CodeControl
  className="html-editor" // 样式类名
  mode="html" // 默认为 html 的颜色主题
  theme="vs" // 主题色vs（白色版）, vs-dark（深色版）, hc-dark
  key={this.state.key}
  value={this.state.content}
  readOnly="false" // 编辑器非只读，可编辑
  fontSize={12} // 字体大小为12px
  lineNumbers // 开启行号显示
  minimap={{
    enabled: true // 开启总览显示
  }}
  tabSize={2} // tab 替换成2个空格
  cursorStyle="line" // 光标的样式为竖线状
  onChange={(value) => {
    this.setState({
      content: value
    });
  }} // 内容改变时触发的事件
  saveEditor={() => {}} // editor初始化时的事件
  wordWrap="on" // 规定单行最大的允许的显示长度，超出则折行显示
  automaticLayout // 是否开启自动缩放
  folding // 允许代码折叠
  formatOnPaste // 粘贴内容时，自动格式化，缩进，对齐
  glyphMargin // 开启字体边缘的绘制
  scrollBeyondLastLine={false} // 规定滚动条是否可以在最后一行后，继续滚动一屏的距离
  scrollbar={{
    verticalScrollbarSize: 8 // 规定垂直滚动条的尺寸，也就是宽度
  }}
  throttle={400}
  enableSuggestion // 开启代码提示功能
/>

设计态页面

第三步：设计

页面设计需要有一定的前端基础，至少需要掌握 HTML、CSS、JS 等相关的基础知识。

HTML教程：http://www.w3school.com.cn/html/index.asp
CSS教程：http://www.w3school.com.cn/css/index.asp
JS教程：http://www.w3school.com.cn/b.asp

<!-- css开始 此处添加您的css文件 --><br />此处引用css样式文件或者自定义css样式<br />    <!-- css结束 此处添加您的css文件 -->
<!-- html开始 此处添加您的html内容 --><br />    Hello World<br />    <!-- html结束 此处添加您的html内容 -->
<!-- js开始 此处添加您的js文件 --><br />    <script src="//g.alicdn.com/platform/c/??jquery/1.11.3/dist/jquery.min.js"></script><br />    <!-- js结束 此处添加您的js文件 -->