diff --git a/src/main.ts b/src/main.ts
index 6c5e436..ab1c132 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,248 +1,42 @@
+import { data, options } from './mock'
 import './style.css'
 import prism from "prismjs"
-import Editor, { EditorMode, ElementType, IElement, RowFlex } from './editor'
+import Editor, { EditorMode, ElementType, IElement } from './editor'
 import { Dialog } from './components/dialog/Dialog'
 import { formatPrismToken } from './utils/prism'
 
 window.onload = function () {
 
-  const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：`
-  // 模拟行居中
-  const centerText = ['人民医院门诊病历']
-  const centerIndex: number[] = centerText.map(c => {
-    const i = text.indexOf(c)
-    return ~i ? Array(c.length).fill(i).map((_, j) => i + j) : []
-  }).flat()
-  // 模拟加粗字
-  const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：', '其他记录：']
-  const boldIndex: number[] = boldText.map(b => {
-    const i = text.indexOf(b)
-    return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
-  }).flat()
-  // 模拟颜色字
-  const colorText = ['传染性疾病']
-  const colorIndex: number[] = colorText.map(b => {
-    const i = text.indexOf(b)
-    return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
-  }).flat()
-  // 模拟高亮字
-  const highlightText = ['血细胞比容']
-  const highlightIndex: number[] = highlightText.map(b => {
-    const i = text.indexOf(b)
-    return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
-  }).flat()
-  // 组合数据
-  const data: IElement[] = text.split('').map((value, index) => {
-    if (centerIndex.includes(index)) {
-      return {
-        value,
-        size: 32,
-        rowFlex: RowFlex.CENTER
-      }
-    }
-    if (boldIndex.includes(index)) {
-      return {
-        value,
-        size: 18,
-        bold: true
-      }
-    }
-    if (colorIndex.includes(index)) {
-      return {
-        value,
-        color: '#FF0000',
-        size: 16
-      }
-    }
-    if (highlightIndex.includes(index)) {
-      return {
-        value,
-        highlight: '#F2F27F'
-      }
-    }
-    return {
-      value,
-      size: 16
-    }
-  })
-  data.splice(8, 0, {
-    value: '\n',
-    type: ElementType.SEPARATOR
-  })
-  data.splice(138, 0, {
-    type: ElementType.HYPERLINK,
-    value: '',
-    valueList: [{
-      value: '新',
-      size: 16
-    }, {
-      value: '冠',
-      size: 16
-    }, {
-      value: '肺',
-      size: 16
-    }, {
-      value: '炎',
-      size: 16
-    }],
-    url: 'https://hufe.club/canvas-editor'
-  })
-  data.splice(379, 0, {
-    value: '∆',
-    color: '#FF0000',
-    type: ElementType.SUBSCRIPT
-  })
-  data.splice(467, 0, {
-    value: '9',
-    type: ElementType.SUPERSCRIPT
-  })
-  data.splice(593, 0, {
-    value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`,
-    width: 89,
-    height: 32,
-    id: 'signature',
-    type: ElementType.IMAGE
-  })
-  data.push({
-    type: ElementType.TABLE,
-    value: `\n`,
-    colgroup: [{
-      width: 180
-    }, {
-      width: 80
-    }, {
-      width: 130
-    }, {
-      width: 130
-    }],
-    trList: [{
-      height: 40,
-      tdList: [{
-        colspan: 1,
-        rowspan: 2,
-        value: [
-          { value: `1`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `2`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 2,
-        rowspan: 1,
-        value: [
-          { value: `3`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }]
-    }, {
-      height: 40,
-      tdList: [{
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `4`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `5`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `6`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }]
-    }, {
-      height: 40,
-      tdList: [{
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `7`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `8`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `9`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }, {
-        colspan: 1,
-        rowspan: 1,
-        value: [
-          { value: `1`, size: 16 },
-          { value: `0`, size: 16 },
-          { value: '.', size: 16 }
-        ]
-      }]
-    }]
-  })
-  data.push(...[{
-    value: 'E',
-    size: 16
-  }, {
-    value: 'O',
-    size: 16
-  }, {
-    value: 'F',
-    size: 16
-  }])
-  // 初始化编辑器
+  // 1. 初始化编辑器
   const container = document.querySelector<HTMLDivElement>('.editor')!
-  const instance = new Editor(container, <IElement[]>data, {
-    margins: [100, 120, 100, 120],
-    header: {
-      data: '人民医院门诊'
-    },
-    watermark: {
-      data: 'CANVAS-EDITOR',
-      size: 120
-    }
-  })
+  const instance = new Editor(container, <IElement[]>data, options)
   console.log('实例: ', instance)
 
-  // 撤销、重做、格式刷、清除格式
+  // 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
   const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
   undoDom.onclick = function () {
     console.log('undo')
     instance.command.executeUndo()
   }
+
   const redoDom = document.querySelector<HTMLDivElement>('.menu-item__redo')!
   redoDom.onclick = function () {
     console.log('redo')
     instance.command.executeRedo()
   }
+
   const painterDom = document.querySelector<HTMLDivElement>('.menu-item__painter')!
   painterDom.onclick = function () {
     console.log('painter')
     instance.command.executePainter()
   }
+
   document.querySelector<HTMLDivElement>('.menu-item__format')!.onclick = function () {
     console.log('format')
     instance.command.executeFormat()
   }
 
-  // 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+  // 3. | 字体 | 字体变大 | 字体变小 | 加粗 | 斜体 | 下划线 | 删除线 | 上标 | 下标 | 字体颜色 | 背景色 |
   const fontDom = document.querySelector<HTMLDivElement>('.menu-item__font')!
   const fontSelectDom = fontDom.querySelector<HTMLDivElement>('.select')!
   const fontOptionDom = fontDom.querySelector<HTMLDivElement>('.options')!
@@ -254,44 +48,53 @@ window.onload = function () {
     const li = evt.target as HTMLLIElement
     instance.command.executeFont(li.dataset.family!)
   }
+
   document.querySelector<HTMLDivElement>('.menu-item__size-add')!.onclick = function () {
     console.log('size-add')
     instance.command.executeSizeAdd()
   }
+
   document.querySelector<HTMLDivElement>('.menu-item__size-minus')!.onclick = function () {
     console.log('size-minus')
     instance.command.executeSizeMinus()
   }
+
   const boldDom = document.querySelector<HTMLDivElement>('.menu-item__bold')!
   boldDom.onclick = function () {
     console.log('bold')
     instance.command.executeBold()
   }
+
   const italicDom = document.querySelector<HTMLDivElement>('.menu-item__italic')!
   italicDom.onclick = function () {
     console.log('italic')
     instance.command.executeItalic()
   }
+
   const underlineDom = document.querySelector<HTMLDivElement>('.menu-item__underline')!
   underlineDom.onclick = function () {
     console.log('underline')
     instance.command.executeUnderline()
   }
+
   const strikeoutDom = document.querySelector<HTMLDivElement>('.menu-item__strikeout')!
   strikeoutDom.onclick = function () {
     console.log('strikeout')
     instance.command.executeStrikeout()
   }
+
   const superscriptDom = document.querySelector<HTMLDivElement>('.menu-item__superscript')!
   superscriptDom.onclick = function () {
     console.log('superscript')
     instance.command.executeSuperscript()
   }
+
   const subscriptDom = document.querySelector<HTMLDivElement>('.menu-item__subscript')!
   subscriptDom.onclick = function () {
     console.log('subscript')
     instance.command.executeSubscript()
   }
+
   const colorControlDom = document.querySelector<HTMLInputElement>('#color')!
   colorControlDom.onchange = function () {
     instance.command.executeColor(colorControlDom!.value)
@@ -302,6 +105,7 @@ window.onload = function () {
     console.log('color')
     colorControlDom.click()
   }
+
   const highlightControlDom = document.querySelector<HTMLInputElement>('#highlight')!
   highlightControlDom.onchange = function () {
     instance.command.executeHighlight(highlightControlDom.value)
@@ -312,22 +116,25 @@ window.onload = function () {
     console.log('highlight')
     highlightControlDom?.click()
   }
-  // 行布局
+
   const leftDom = document.querySelector<HTMLDivElement>('.menu-item__left')!
   leftDom.onclick = function () {
     console.log('left')
     instance.command.executeLeft()
   }
+
   const centerDom = document.querySelector<HTMLDivElement>('.menu-item__center')!
   centerDom.onclick = function () {
     console.log('center')
     instance.command.executeCenter()
   }
+
   const rightDom = document.querySelector<HTMLDivElement>('.menu-item__right')!
   rightDom.onclick = function () {
     console.log('right')
     instance.command.executeRight()
   }
+
   const rowMarginDom = document.querySelector<HTMLDivElement>('.menu-item__row-margin')!
   const rowOptionDom = rowMarginDom.querySelector<HTMLDivElement>('.options')!
   rowMarginDom.onclick = function () {
@@ -338,7 +145,8 @@ window.onload = function () {
     const li = evt.target as HTMLLIElement
     instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
   }
-  // 表格插入、图片上传、搜索、打印
+
+  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 |
   const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
   const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
   const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
@@ -413,6 +221,7 @@ window.onload = function () {
     instance.command.executeInsertTable(rowIndex, colIndex)
     recoveryTable()
   }
+
   const imageDom = document.querySelector<HTMLDivElement>('.menu-item__image')!
   const imageFileDom = document.querySelector<HTMLInputElement>('#image')!
   imageDom.onclick = function () {
@@ -437,6 +246,7 @@ window.onload = function () {
       }
     }
   }
+
   const hyperlinkDom = document.querySelector<HTMLDivElement>('.menu-item__hyperlink')!
   hyperlinkDom.onclick = function () {
     console.log('hyperlink')
@@ -470,6 +280,7 @@ window.onload = function () {
       }
     })
   }
+
   const separatorDom = document.querySelector<HTMLDivElement>('.menu-item__separator')!
   const separatorOptionDom = separatorDom.querySelector<HTMLDivElement>('.options')!
   separatorDom.onclick = function () {
@@ -488,11 +299,13 @@ window.onload = function () {
     }
     instance.command.executeSeparator(payload)
   }
+
   const pageBreakDom = document.querySelector<HTMLDivElement>('.menu-item__page-break')!
   pageBreakDom.onclick = function () {
     console.log('pageBreak')
     instance.command.executePageBreak()
   }
+
   const watermarkDom = document.querySelector<HTMLDivElement>('.menu-item__watermark')!
   const watermarkOptionDom = watermarkDom.querySelector<HTMLDivElement>('.options')!
   watermarkDom.onclick = function () {
@@ -587,6 +400,7 @@ window.onload = function () {
     })
   }
 
+  // 5. | 搜索 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')
   document.querySelector<HTMLDivElement>('.menu-item__search')!.onclick = function () {
@@ -606,23 +420,29 @@ window.onload = function () {
       instance.command.executeSearch(searchInputDom?.value || null)
     }
   }
+
   document.querySelector<HTMLDivElement>('.menu-item__print')!.onclick = function () {
     console.log('print')
     instance.command.executePrint()
   }
+
+  // 6. 纸张缩放
   document.querySelector<HTMLDivElement>('.page-scale-percentage')!.onclick = function () {
     console.log('page-scale-recovery')
     instance.command.executePageScaleRecovery()
   }
+
   document.querySelector<HTMLDivElement>('.page-scale-minus')!.onclick = function () {
     console.log('page-scale-minus')
     instance.command.executePageScaleMinus()
   }
+
   document.querySelector<HTMLDivElement>('.page-scale-add')!.onclick = function () {
     console.log('page-scale-add')
     instance.command.executePageScaleAdd()
   }
 
+  // 7. 编辑器使用模式
   let modeIndex = 0
   const modeList = [{
     mode: EditorMode.EDIT,
@@ -653,7 +473,7 @@ window.onload = function () {
     })
   }
 
-  // 内部事件监听
+  // 8. 内部事件监听
   instance.listener.rangeStyleChange = function (payload) {
     // 控件类型
     payload.type === ElementType.SUBSCRIPT ? subscriptDom.classList.add('active') : subscriptDom.classList.remove('active')
@@ -667,6 +487,7 @@ window.onload = function () {
         curSeparatorDom.classList.add('active')
       }
     }
+
     // 富文本
     fontOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
     const curFontDom = fontOptionDom.querySelector<HTMLLIElement>(`[data-family=${payload.font}]`)
@@ -696,6 +517,7 @@ window.onload = function () {
       highlightControlDom.value = '#ffff00'
       highlightSpanDom.style.backgroundColor = '#ffff00'
     }
+
     // 行布局
     leftDom.classList.remove('active')
     centerDom.classList.remove('active')
@@ -707,10 +529,12 @@ window.onload = function () {
     } else {
       leftDom.classList.add('active')
     }
+
     // 行间距
     rowOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
     const curRowMarginDom = rowOptionDom.querySelector<HTMLLIElement>(`[data-rowmargin='${payload.rowMargin}']`)!
     curRowMarginDom.classList.add('active')
+
     // 功能
     payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow')
     payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow')
diff --git a/src/mock.ts b/src/mock.ts
new file mode 100644
index 0000000..3a140d2
--- /dev/null
+++ b/src/mock.ts
@@ -0,0 +1,235 @@
+import { ElementType, IEditorOption, IElement, RowFlex } from "./editor"
+
+const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：`
+
+// 模拟行居中
+const centerText = ['人民医院门诊病历']
+const centerIndex: number[] = centerText.map(c => {
+  const i = text.indexOf(c)
+  return ~i ? Array(c.length).fill(i).map((_, j) => i + j) : []
+}).flat()
+
+// 模拟加粗字
+const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：', '其他记录：']
+const boldIndex: number[] = boldText.map(b => {
+  const i = text.indexOf(b)
+  return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
+}).flat()
+
+// 模拟颜色字
+const colorText = ['传染性疾病']
+const colorIndex: number[] = colorText.map(b => {
+  const i = text.indexOf(b)
+  return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
+}).flat()
+
+// 模拟高亮字
+const highlightText = ['血细胞比容']
+const highlightIndex: number[] = highlightText.map(b => {
+  const i = text.indexOf(b)
+  return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
+}).flat()
+
+// 组合纯文本数据
+const elementList: IElement[] = text.split('').map((value, index) => {
+  if (centerIndex.includes(index)) {
+    return {
+      value,
+      size: 32,
+      rowFlex: RowFlex.CENTER
+    }
+  }
+  if (boldIndex.includes(index)) {
+    return {
+      value,
+      size: 18,
+      bold: true
+    }
+  }
+  if (colorIndex.includes(index)) {
+    return {
+      value,
+      color: '#FF0000',
+      size: 16
+    }
+  }
+  if (highlightIndex.includes(index)) {
+    return {
+      value,
+      highlight: '#F2F27F'
+    }
+  }
+  return {
+    value,
+    size: 16
+  }
+})
+
+// 模拟分隔符
+elementList.splice(8, 0, {
+  value: '\n',
+  type: ElementType.SEPARATOR
+})
+
+// 模拟超链接
+elementList.splice(138, 0, {
+  type: ElementType.HYPERLINK,
+  value: '',
+  valueList: [{
+    value: '新',
+    size: 16
+  }, {
+    value: '冠',
+    size: 16
+  }, {
+    value: '肺',
+    size: 16
+  }, {
+    value: '炎',
+    size: 16
+  }],
+  url: 'https://hufe.club/canvas-editor'
+})
+
+// 模拟下标
+elementList.splice(379, 0, {
+  value: '∆',
+  color: '#FF0000',
+  type: ElementType.SUBSCRIPT
+})
+
+// 模拟上标
+elementList.splice(467, 0, {
+  value: '9',
+  type: ElementType.SUPERSCRIPT
+})
+
+// 模拟图片
+elementList.splice(593, 0, {
+  value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`,
+  width: 89,
+  height: 32,
+  id: 'signature',
+  type: ElementType.IMAGE
+})
+
+// 模拟表格
+elementList.push({
+  type: ElementType.TABLE,
+  value: `\n`,
+  colgroup: [{
+    width: 180
+  }, {
+    width: 80
+  }, {
+    width: 130
+  }, {
+    width: 130
+  }],
+  trList: [{
+    height: 40,
+    tdList: [{
+      colspan: 1,
+      rowspan: 2,
+      value: [
+        { value: `1`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `2`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 2,
+      rowspan: 1,
+      value: [
+        { value: `3`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }]
+  }, {
+    height: 40,
+    tdList: [{
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `4`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `5`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `6`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }]
+  }, {
+    height: 40,
+    tdList: [{
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `7`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `8`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `9`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }, {
+      colspan: 1,
+      rowspan: 1,
+      value: [
+        { value: `1`, size: 16 },
+        { value: `0`, size: 16 },
+        { value: '.', size: 16 }
+      ]
+    }]
+  }]
+})
+
+// 模拟结尾文本
+elementList.push(...[{
+  value: 'E',
+  size: 16
+}, {
+  value: 'O',
+  size: 16
+}, {
+  value: 'F',
+  size: 16
+}])
+
+export const data: IElement[] = elementList
+
+export const options: IEditorOption = {
+  margins: [100, 120, 100, 120],
+  header: {
+    data: '人民医院门诊'
+  },
+  watermark: {
+    data: 'CANVAS-EDITOR',
+    size: 120
+  }
+}
\ No newline at end of file