@hailin-zheng/editor-core 1.0.20 → 1.0.24

package/README.md

@@ -0,0 +1,1613 @@
+## 开始
+* <a href="#import">引入编辑器</a>
+* <a href="#init">实例化上下文</a>
+* <a href="#basicDataJson">数据元结构示例</a>
+* <a href="#combineMedical">合并病程录</a>
+* <a href="#jumpMedical">跳转病程录</a>
+* <a href="#saveMedical">保存病程录</a>
+* <a href="#getNowContext">获取当前编辑的内容</a>
+* <a href="#getNowHtml">获取当前选中的元素</a>
+* <a href="#getNowBasic">获取当前选中的数据元</a>
+* <a href="#getNowPart">获取当前所在的段落</a>
+* <a href="#getAllBasic">获取当前文档所有的数据元列表</a>
+* <a href="#getSelectObj">获取选区内容的对象</a>
+* <a href="#groupData">数据组</a>
+* <a href="#part">段落</a>
+* <a href="#noteSetting">批注设置</a>
+* <a href="#trace">留痕</a>
+* <a href="#offlinePrint">离线打印</a>
+
+## 文档操作
+* <a href="#createNewDoc">createNewDoc 新建文档</a>
+* <a href="#printAllPages">printAllPages 打印文档</a>
+* <a href="#exportPDF">exportPDF 导出PDF</a>
+* <a href="#exportPhoto">exportAllPagesToBase64 导出为图片</a>
+* <a href="#watermark">watermark 设置水印</a>
+* <a href="#copyRightInfo">copyRightInfo 设置版权</a>
+* <a href="#setPaperOrient">setPaperOrient 纸张方向</a>
+* <a href="#setPaperSize">setPaperSize 纸张大小</a>
+* <a href="#insertMH">insertMH 插入月经史公式</a>
+* <a href="#insertImage">insertImage 插入图片</a>
+* <a href="#appendString">appendString 对当前数据元追加内容</a>
+* <a href="#setDataEleVal">setDataEleVal 设置当前数据元内容</a>
+* <a href="#validate">validate 文档校验</a>
+* <a href="#selectionChanged">selectionChanged 选区事件</a>
+* <a href="#onClickEvent">onClickEvent 单击事件</a>
+* <a href="#onContextMenuItemChanged">onContextMenuItemChanged 右击事件</a>
+* <a href="#onDblClickEvent">onDblClickEvent 双击事件</a>
+* <a href="#onScrollViewEvent">onScrollViewEvent 滚动事件</a>
+* <a href="#onDocChangedEvent">onDocChangedEvent 文档变更事件</a>
+* <a href="#fullPageView">fullPageView 全页实图模式</a>
+
+
+## 文字
+* <a href="#textBold">switchTextStyle 文字加粗</a>
+* <a href="#textIncline">switchTextStyle 文字斜体</a>
+* <a href="#setTextFontSize">setTextFontSize 设置字体大小</a>
+* <a href="#setTextColor">setTextColor 设置字体颜色</a>
+* <a href="#setTextFont">setTextFont 设置字体类型</a>
+* <a href="#setTextBackColor">setTextBackColor 设置字体背景色</a>
+* <a href="#switchParaAlign">switchParaAlign 文本行的对齐方式</a>
+* <a href="#setParagraphNumberType">setParagraphNumberType 设置当前行的项目符号</a>
+
+
+## 表格
+* <a href="#tableConfig">表格操作的基本配置文件</a>
+* <a href="#tableJson">表格的数据结构</a>
+* <a href="#insertTable">insertTable 插入表格</a>
+* <a href="#insertRowBelow">insertRowBelow 向下新增行</a>
+* <a href="#insertRowAbove">insertRowAbove 向上新增行</a>
+* <a href="#insertColToRight">insertColToRight 向右新增列</a>
+* <a href="#insertColToLeft">insertColToLeft 向左新增列</a>
+* <a href="#removeCurrRow">removeCurrRow 删除行</a>
+* <a href="#removeCurrCol">removeCurrCol 删除列</a>
+* <a href="#mergeCells">mergeCells 合并单元格</a>
+* <a href="#splitCell">splitCell 拆分单元格</a>
+* <a href="#restoreCell">restoreCell 合并单元格还原</a>
+* <a href="#setRowHeight">setRowHeight 设置行高</a>
+* <a href="#setColWidth"> 调整列宽度（拖动）</a>
+* <a href="#setTableCellDiagonal">setTableCellDiagonal 对角线操作</a>
+* <a href="#setTableBorderProps">setTableBorderProps 边框操作</a>
+* <a href="#setCellValign">setCellValign 表格内容对齐方式</a>
+* <a href="#setCellBackground">setCellBackground 表格背景颜色</a>
+
+<!-- div -->
+<h3 id="import"><code>引入编辑器</code></h3>
+
+源码 `med_editor` 放入项目 `src` 文件夹下并在项目的容器文件中引入；
+将 `emrComponents` 放在 `components` 文件夹下,在项目中添加代码如下;
+
+```js
+    // 编辑器容器文件 .vue
+    <template>
+        ...
+        <editor-body></editor-body>
+    </template>
+    <script lang="ts">
+    ...
+    import EditorBody from '@/med_editor/view/editor-body.vue';
+    
+    </script>
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="init"><code>实例化上下文</code></h3>
+
+实例化编辑器，声明编辑器上下文 `editorContext` ，并将上下文提供给子组件；
+> 注意：这里需要引入类型 `editorContextType` (位于 emrComponents/code/types.ts 中)
+```js
+    // 引入类型
+    import { editorContextType }  from '../components/emrComponents/code/types';
+
+    // 初始化编辑器，声明编辑器上下文 editorContext；
+    const editorContext: editorContextType = reactive({
+      counter: 0,
+      editorData: { __v_skip: true, selectionState: null, editor: null, contextMenus: null }
+    });
+    // 将上下文依赖提供给子组件；
+    provide('editor-context', editorContext);
+
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="basicDataJson"><code>数据元结构示例</code></h3>
+
+- 文本类型 数据属性示例：
+```js
+class TextProps{
+      ...
+    color!: string; // 颜色
+    fontName!: string; // 字体名称
+    fontSize!: number; // 字体大小
+    fontWeight: 'normal' | 'bold' = 'normal'; // 字体粗细
+    fontStyle: 'normal' | 'italic' = 'normal'; // 字体样式
+    underline: boolean = false; // 下划线
+    overline: boolean = false; // 上划线
+    linethrough: boolean = false; // 删除线
+    background!: string; // 字体背景色
+    letterSpace!: number; // 字体间距
+    vertAlign!: TextVertAlign; // 上标或者下标
+    border!: boolean; // 字体边框
+      ...
+  }
+```
+- 复选框类型 数据属性示例：
+```js
+class CheckBoxProps{
+      ...
+    size!: number;// 大小
+    isChecked!: boolean; // 当前选择的状态
+    groupName!: string | null; //用于复选框分组
+      ...
+  }
+```
+- 单选框类型 数据属性示例：
+```js
+class RadioBoxProps{
+      ...
+    size!: number;// 大小
+    isChecked!: boolean; // 当前选择的状态
+      ...
+  }
+```
+- 图片类型 数据属性示例：
+```js
+class PictureProps{
+      ...
+    title!: string; // 图片名称
+    width!: number; // 图片宽度
+    height!: number; // 图片高度
+    src!: string; // 图片地址
+    border!: 'all' | 'none'; //图片边框
+      ...
+  }
+```
+- 日期类型 数据属性示例：
+```js
+class DataEleDateProps{
+      ...
+    minValue?: Date; // 最大日期
+    maxValue?: Date; // 最小日期
+    format?: string; // 格式化
+      ...
+  }
+```
+<!-- /div -->
+- 下拉选择框类型 数据属性示例：
+```js
+class DataEleCheckProps{
+      ...
+    size!: number; // 大小
+    checked!: boolean; // 选择状态
+    checkedValue: string = ''; // 选中的值
+    groupName!: string; // 下拉框的组合值 
+    multiSelect: boolean = false; // 是否多选
+      ...
+  }
+```
+<!-- /div -->
+<h3 id="combineMedical"><code>合并病程录</code></h3>
+
+病程录合并是将多个文档合并到一起。
+1、实例化DocumentCombine 文档合并类，
+2、选择一份文档作为模板，将格式 赋给 docCombineIns.mainTemplate。docCombineIns类会 将其header 和 footer作为合并后的header 和 footer，3、调用 docCombineIns.add 方法，将 多个文档的body合并到一起，调用 docCombineIns.load() 生成合并实例，
+4、调用 ElementSerialize.serialize 生成序列化的对象，
+5、 解析序列化的对象，解析渲染病程录
+
+> 注意：docCombineIns.add() 第二个要添加唯一值，用来区分不同的文档。
+```js
+    // 获取 mainTemplate docParts
+    const firstJson = JSON.parse(jsonS[0].recContent);
+    const docCombineIns = new DocumentCombine();
+    docCombineIns.mainTemplate = this.editorData.editor!.elementReader.readElement(firstJson) as DocumentElement;
+    jsonS.forEach((e) => {
+      const docBody: any = this.editorData.editor!.elementReader.readElement(
+        JSON.parse(e.recContent)
+      ) as DocumentElement;
+      docCombineIns.add(docBody, e.docId);
+    });
+    const template = docCombineIns.load();
+    let partJson: any = ElementSerialize.serialize(template, this.editorData.editor!.viewOptions);
+    return partJson;
+
+```
+<!-- /div -->
+
+
+
+
+
+
+<!-- div -->
+<h4 id="jumpMedical"><code>跳转病程录</code></h4>
+病程录病历比较多的情况下，可以根据 bringToView 方法跳转到选择的某一份病历
+
+> 注意：bringToView 参数 是 Element 类型，需要找到 DocumentBodyPartElement 类型的元素，根据partId找到DocumentBodyPartElement实例元素对象，传入DocumentBodyPartElement实例元素对象进行跳转。
+```js
+      /** 跳转到点击病程录，通过id */
+  bringToViewByPartId(id: string) {
+    const ele = this.getBodyPartElementById(id);
+    if (ele) {
+      this.editorData.editor!.bringToView(ele);
+    }
+  }
+  getBodyPartElementById(id: string): DocumentBodyPartElement | null {
+    return this.editorData.editor?.docCtx.document.treeFind(
+      (item) => item instanceof DocumentBodyPartElement && item.props.partId === id
+    ) as DocumentBodyPartElement | null;
+  }
+
+```
+<!-- /div -->
+
+<!-- div -->
+<h4 id="saveMedical"><code>保存病程录</code></h4>
+保存病程录生成序列化1、JSON对象 2、 提取病历数据元内容集合
+JSON对象 和 数据元内容集合 分别是提取header 和 body内容组合到一起
+
+> 注意：根据partId匹配JSON对象 和 数据元内容集合。
+```js
+    /** 合并文档类型 保存 */
+  combinedSave(): combinedSaveProps[] {
+    //DocumentElement  文档顶层对象 root
+
+    // header 部分 数据元集合
+    const headerEle: DocumentHeaderElement = this.editorData.editor?.docCtx.document.treeFind(
+      (item) => item instanceof DocumentHeaderElement
+    ) as DocumentHeaderElement;
+    const headerDataEleList = this.editorData.editor!.docCtx.getCtx(headerEle).getDataElementValues() || []
+
+    const docJsons: jsonSProp[] = this.split();
+    const bodyPartS: DocumentBodyPartElement[] = this.editorData.editor?.docCtx.document.treeFilter(
+      (item) => item instanceof DocumentBodyPartElement
+    ) as DocumentBodyPartElement[];
+
+    let list: any = bodyPartS?.map((e) => ({
+      docId: e.props.partId,
+      list: headerDataEleList.concat(this.getpartBodyCtxByPartId(e.props.partId).getDataElementValues())
+    }));
+    console.log('courseSavecourseSave', list, docJsons);
+    // list = list.map((ele) => ({ id: ele.id, name: ele.name }));
+
+    const retData: combinedSaveProps[] = docJsons.map((e) => {
+      const ret = list.find((item) => item.docId === e.docId);
+      if (ret) {
+        return {
+          docId: e.docId,
+          docJson: e.recContent,
+          list: ret.list
+        };
+      }
+    }) as combinedSaveProps[];
+
+    return retData;
+  }
+
+    /** 拆解partsBody 为单个JSON */
+  split(): jsonSProp[] {
+    // 获取整个文档对象
+    // 分别替换body，生成单个的JSON文档
+
+    // 获取整个文档对象
+    const fullDoc = this.editorData.editor?.getDocSchema();
+    const partsBody: any[] = this.getPartBodyDocSchema() as Array<any>;
+    console.log('拆解partsBody 为单个JSON', fullDoc, partsBody);
+    const docJsons: jsonSProp[] = [];
+    partsBody.forEach((ele) => {
+      const singleDoc = _.cloneDeep(fullDoc);
+      singleDoc.children.find((e) => {
+        if (e.type === 'body') {
+          e.children = ele.children[0].children;
+          docJsons.push({
+            docId: ele.props.partId,
+            recContent: JSON.stringify(singleDoc)
+          });
+          return true;
+        }
+      });
+    });
+    console.log('拆解partsBody 为单个JSON', docJsons);
+    return docJsons;
+  }
+
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="getNowContext"><code>获取当前编辑的内容</code></h3>
+说明：获取当前编辑的数据元的内容；
+
+#### 例如：
+```js
+     /** 获取当前编辑的内容 */
+    getEditorContent() {
+      const ele = emrExtraF.getDataEle(this.editorData.selectionState)
+      if (ele) {
+        return ele.getValue()
+      }
+    }
+
+    /** 获取数据元对象 */
+    getDataEle(selectionState) {
+      const { startControl } = selectionState;
+      const dataEle = ElementUtil.getParent(startControl, validateDataEle) as DataElementInlineGroup | DataElementLeaf;
+      return dataEle;
+    }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="getNowHtml"><code>获取当前选中的元素</code></h3>
+说明：获取当前选中的元素，editor.selectionState.startControl 是当前选中的元素；
+
+#### 例如：
+```js
+    editor.selectionState.startControl
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="getNowBasic"><code>获取当前选中的数据元</code></h3>
+说明：获取当前编辑的数据元的内容；
+
+#### 例如：
+```js
+     /** 获取数据元对象 */
+    getDataEle(selectionState) {
+      const { startControl } = selectionState;
+      const dataEle = ElementUtil.getParent(startControl, validateDataEle) as DataElementInlineGroup | DataElementLeaf;
+      return dataEle;
+    }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="getNowPart"><code>获取当前所在的段落</code></h3>
+说明：获取当前所在的段落元素；
+
+#### 例如：
+```js
+       /** 获取当前所在的段落 */
+  getParagraph() {
+    const { startControl } = this.editorData.selectionState!;
+    const currPara = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
+    if (currPara) {
+      return currPara;
+    }
+  }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="getAllBasic"><code>获取当前文档所有的数据元列表</code></h3>
+说明：通过遍历文档树，获取当前文档所有的数据元列表；
+
+#### 例如：
+```js
+/** 获取病历实例集合 */
+    const getControlInstanceList = () => editorContext.editorData.editor!.docCtx.defaultCtx.getControlInstanceList();
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="getSelectObj"><code>获取选区内容的对象</code></h3>
+说明：获取选区内容的对象 this.selectionState.selectedRange ；
+
+#### 例如：
+```js
+    this.selectionState.selectedRange
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="groupData"><code>数据组</code></h3>
+说明：数据组可以将不同的数据元和文字组合，获取其文本值；
+
+> 注意：文本值在  表单编辑模式下，不能修改。
+
+#### 例如：
+```js
+      /** 插入数据组 */
+  insertDataEleInlineGroup(obj?: any) {
+    let { collapsed, startControl, startOffset } = this.editorData.selectionState!;
+
+    const instance = emrExtraF.createDataEleInlineGroupInstance(obj);
+    const lastEle: any = this.editorData.editor!.insertElement(startControl, startOffset, [instance]);
+    const focusEle = ElementUtil.getNextSiblingElement(lastEle);
+    if (focusEle) {
+      this.editorData.selectionState!.resetRange(focusEle, 0);
+      focusEle.refreshView();
+    }
+  }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="part"><code>段落</code></h3>
+说明：段落作为容器组件，可以添加 其他元素。
+    textProps!: TextProps;  // 设置字体样式
+    indent = 0; // 设置缩进
+    hanging = 0;
+    lineHeight = 1.3; // 设置行高
+    textAlign: TextAlign = 'left'; // 设置横向排版
+    numberType = -1;
+    pageBreak = false; // 是否换页
+
+> 注意：
+
+#### 例如：
+```js
+    /** 设置段落属性 */
+    const setParagraph= ()=> {
+      const cont = emrUtilF.getParagraph()
+      if (cont) {
+        cont.props.indent = 10;  // 设置字体样式
+      } 
+    }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="noteSetting"><code>批注设置</code></h3>
+批注设置，需要选择需要批注的内容，执行insertComment() 方法。会在侧边弹出批注框。
+
+> 注意：
+
+#### 例如：
+```js
+        /** 插入批注 */
+    const insertComment = () => {
+      editorContext.editorData.editor!.insertComment();
+    };
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="trace"><code>留痕</code></h3>
+开启留痕模式，会将修改记录下来。
+
+> 注意：需要开启留痕记录，设置显示痕迹记录，才会显示痕迹
+
+#### 例如：
+```js
+      /**  切换审阅痕迹 */
+  switchTrackChanges(editorContext: editorContextType, isAdd?: boolean) {
+    editorContext.editorData.editor!.selectionState.enableTrackChanges = isAdd ? true : false;
+    // editorContext.editorData.editor.switchTrackChanges();
+  },
+    /**  显示审阅痕迹 */
+  showTrackChange(editorContext: editorContextType, isShow?: boolean | undefined) {
+    if (isShow === undefined) {
+      editorContext.editorData.editor!.viewOptions.showTrackChanges =
+        !editorContext.editorData.editor!.viewOptions.showTrackChanges;
+    } else {
+      editorContext.editorData.editor!.viewOptions.showTrackChanges = isShow;
+    }
+  },
+    /** 获取留痕数据 */
+  getTracksData(editorContext: editorContextType) {
+    return editorContext.editorData.editor!.docCtx.defaultCtx.getTracksData();
+  },
+  /** 跳转到痕迹记录点 */
+  bringToView(id, editorContext: editorContextType) {
+    const ele = editorContext.editorData.editor!.docCtx.defaultCtx.getTrackElmeentById(id);
+    if (ele) {
+      editorContext.editorData.editor!.bringToView(ele);
+    }
+  },
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="offlinePrint"><code>离线打印</code></h3>
+不需要在浏览器端实例，也可以打印病历； 
+
+#### 例如：
+```js
+  /** 离线打印 */
+  offscreenPrint() {
+    this.editorData.editor!.offscreenPrint()
+  }
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="watermark"><code>设置水印 watermark</code></h3>
+说明：设置编辑器内容水印；
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.viewOptions.watermark='万达信息智慧医院';
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="copyRightInfo"><code>设置版权 copyRightInfo</code></h3>
+说明：设置编辑器设置版权；
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.viewOptions.copyRightInfo='复高电子病历编辑器';
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="setPaperOrient"><code>设置纸张方向 setPaperOrient(OrientType)</code></h3>
+说明：设置纸张方向；
+
+#### 参数
+1. `OrientType` *("landscape" | "portrait")*: 必需。默认 `portrait`. `landscape` 横向；`portrait` 纵向;  
+
+#### 例如：
+```js
+    const setPaperOrient = (OrientType) => {
+      editorContext.editorData.editor!.setPaperOrient(OrientType);
+    };
+    // setPaperOrient('landscape')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setPaperSize"><code>设置纸张方向 setPaperSize({width,height})</code></h3>
+说明：设置纸张大小；
+
+#### 参数
+1. `width` *(numer)*: 可选。单位为毫米(mm);  
+2. `height` *(numer)*: 可选。单位为毫米(mm);  
+
+#### 例如：
+```js
+    const setPaperSize = ({width, height}) => {
+      editorContext.editorData.editor!.setPaperSize(width, height);
+    };
+    // setPaperSize()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertMH"><code>插入月经史公式 insertMH(SelectionState, editorData, obj)</code></h3>
+说明：插入月经史公式；
+
+#### 参数
+1. `SelectionState` : 必需。当前选中状态,调用时手动传入;  
+2. `editorData` : 必需。当前编辑器,调用时手动传入;
+2. `obj` *({age:string,cycles:string,days:string,lastDate:string})*: 可选。月经史公式参数;
+
+> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
+
+#### 例如：
+```js
+    // 需要获取当前编辑器上下文所需引入文件；
+        ...
+    import { CanvasTextEditor } from "@/med_editor/texteditor";
+    import { SelectionState } from "@/med_editor/framework/document-selection";
+    import { editorContextType } from '@/components/emrComponents/code/types';
+    import { emrExtraF } from '@/components/emrComponents/common/emrExtraF'
+    
+        ...
+    const editorContext: editorContextType = inject('editor-context') as editorContextType;
+    const getEditor = (): CanvasTextEditor => {
+      const editor = editorContext.editorData.editor as CanvasTextEditor;
+      return editor;
+    };
+    const getSelectionState = (): SelectionState => getEditor().selectionState;
+
+    const insertMH = (obj) => {
+      emrExtraF.insertMH(getSelectionState(), editorContext.editorData, obj);
+    };
+    // insertMH()
+    
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertImage"><code>插入图片 insertImage(SelectionState, editorData, src)</code></h3>
+说明：对当前位置插入图片；
+
+#### 参数
+1. `SelectionState` : 必需。当前选中状态,调用时手动传入;  
+2. `editorData` : 必需。当前编辑器,调用时手动传入;
+2. `src` *(string)*: 必需。插入图片地址支持 网络地址和当前项目内地址;
+
+> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
+
+#### 例如：
+```js
+    // 需要获取当前编辑器上下文所需引入文件；
+        ...
+    import { CanvasTextEditor } from "@/med_editor/texteditor";
+    import { SelectionState } from "@/med_editor/framework/document-selection";
+    import { editorContextType } from '@/components/emrComponents/code/types';
+    import { emrExtraF } from '@/components/emrComponents/common/emrExtraF'
+    
+        ...
+    const editorContext: editorContextType = inject('editor-context') as editorContextType;
+    const getEditor = (): CanvasTextEditor => {
+      const editor = editorContext.editorData.editor as CanvasTextEditor;
+      return editor;
+    };
+    const getSelectionState = (): SelectionState => getEditor().selectionState;
+
+    const insertImage = (src) => {
+      emrExtraF.insertImage(getSelectionState(), editorContext.editorData, src);
+    };
+    // insertImage()
+    
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="appendString"><code>对当前数据元追加内容 appendString(val, SelectionState)</code></h3>
+说明：对当前数据元追加内容；
+
+#### 参数
+1. `val` *(string[] | string)*: 必需。需要追加的内容;  
+2. `SelectionState` : 必需。当前选中状态,调用时手动传入;
+
+> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
+
+#### 例如：
+```js
+    // 需要获取当前编辑器上下文所需引入文件；
+        ...
+    import { CanvasTextEditor } from "@/med_editor/texteditor";
+    import { SelectionState } from "@/med_editor/framework/document-selection";
+    import { editorContextType } from '@/components/emrComponents/code/types';
+    import { emrExtraF } from '@/components/emrComponents/common/emrExtraF'
+    
+        ...
+    const editorContext: editorContextType = inject('editor-context') as editorContextType;
+    const getEditor = (): CanvasTextEditor => {
+      const editor = editorContext.editorData.editor as CanvasTextEditor;
+      return editor;
+    };
+    const getSelectionState = (): SelectionState => getEditor().selectionState;
+
+    const appendString = (val) => {
+      emrExtraF.appendString(val, getSelectionState());
+    };
+    // appendString()
+    
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setDataEleVal"><code>设置数据元的值 setDataEleVal(SelectionState, editorData, src)</code></h3>
+说明：设置当前数据元的值；
+
+#### 参数
+1. `val` *(string)*: 必需。设置数据元的值;  
+2. `SelectionState` : 必需。当前选中状态,调用时手动传入;
+
+> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
+
+#### 例如：
+```js
+    // 需要获取当前编辑器上下文所需引入文件；
+        ...
+    import { CanvasTextEditor } from "@/med_editor/texteditor";
+    import { SelectionState } from "@/med_editor/framework/document-selection";
+    import { editorContextType } from '@/components/emrComponents/code/types';
+    import { emrExtraF } from '@/components/emrComponents/common/emrExtraF'
+    
+        ...
+    const editorContext: editorContextType = inject('editor-context') as editorContextType;
+    const getEditor = (): CanvasTextEditor => {
+      const editor = editorContext.editorData.editor as CanvasTextEditor;
+      return editor;
+    };
+    const getSelectionState = (): SelectionState => getEditor().selectionState;
+
+    const setDataEleVal = (val) => {
+      emrExtraF.setDataEleVal(val, getSelectionState());
+    };
+    // appendString()
+    
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="validate"><code>文档校验 validate()</code></h3>
+说明：校验当前文档下所有数据元的有效性；
+
+> 该校验是根据数据元属性的 `required` 属性值来判断是否做校验；数据元结构详见<a href="#basicDataJson">数据元结构示例</a>
+
+#### 例如：
+```js
+    const validate = (src) => {
+        editorContext.editorData.editor.validate();
+
+    };
+    // insertImage()
+    
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="selectionChanged"><code>选区事件 selectionChanged(callBack)</code></h3>
+说明：获取当前光标的选中事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。选区事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前选中对象.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.selectionChanged.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="onClickEvent"><code>单击事件 onClickEvent(callBack)</code></h3>
+说明：获取当前光标的单击事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。单击事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前单击事件源.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.onClickEvent.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="onContextMenuItemChanged"><code>右击事件 onContextMenuItemChanged(callBack)</code></h3>
+说明：获取当前光标的右击事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。右击事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前右击事件源.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.onContextMenuItemChanged.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="onDblClickEvent"><code>双击事件 onDblClickEvent(callBack)</code></h3>
+说明：获取当前光标的双击事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。双击事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前双击事件源.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.onDblClickEvent.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="onScrollViewEvent"><code>滚动事件 onScrollViewEvent(callBack)</code></h3>
+说明：获取当前光标的滚动事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。滚动事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前滚动事件源.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.onScrollViewEvent.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="onDocChangedEvent"><code>文档变更事件 onDocChangedEvent(callBack)</code></h3>
+说明：获取当前文档变更事件；
+
+#### 参数
+1. `callBack` *( function(selectionState?) )*: 必需。文档变更事件触发后的回调函数.
+2. `selectionState` *(selectionState)*: 可选。当前文档变更事件源.
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.onDocChangedEvent.subscribe(callBack)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="fullPageView"><code>全页面视图模式 fullPageView</code></h3>
+
+说明：设置当前页面是否为全页面视图模式 默认是 `false` 分页模式 ；
+
+#### 例如：
+```js
+    editorContext.editorData.editor!.viewOptions.fullPageView = true;
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="createNewDoc"><code>新建文档 createNewDoc()</code></h3>
+说明：新建编辑器内容；
+
+#### 例如：
+```js
+    const createNewDoc = () => {
+      editorContext.editorData.editor!.createNewDoc();
+    };
+    // 调用 createNewDoc()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="printAllPages"><code>打印文档 printAllPages(printRanges)</code></h3>
+说明：打印当前编辑器内容；
+
+#### 参数
+1. `printRanges` *(Array<number>)*: 可选。 要打印指定的页的下标，初始值 0，不传则全部打印.
+
+#### 例如：
+```js
+    const printAllPages = (printRanges) => {
+      editorContext.editorData.editor!.printAllPages(printRanges);
+    };
+    // 调用 printAllPages() // 打印全部;
+    // 调用 printAllPages([1]) // 只打印第二页;
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="loadDoc"><code>导入文档 loadDoc(docJSON)</code></h3>
+说明：将json文件转化为编辑器内容；
+
+#### 参数
+1. `docJSON` *(json)*: 必需。 导入文件的json 对象.
+
+#### 例如：
+```js
+    const loadDoc = (docJSON) => {
+      editorContext.editorData.editor?.loadDoc(docJSON);
+    };
+    // 调用 loadDoc()
+```
+> 如果是 json 文件需要将读取的文件内容转化为json对象. 参考：
+
+```js
+    const reader = new FileReader(); //实例化一个FileReader对象
+    reader.readAsText(filedList.raw, 'utf8'); //借助 FileReader 的方法，按照文本格式读入文件，第二个参数是编码方式（可空）
+    reader.onload = function (ret: any) {
+        //然后在FileReader的onload方法里，然后在FileReader的onload方法里，刚刚读入的文件能以文本的形式得到了
+        //注意这个对象还是文本，不能拿来直接用，但首先你可以把它带出来。
+        const { target: { result } } = ret;
+        const docJSON = JSON.parse(result);
+        editorContext.editorData.editor?.loadDoc(docJSON);
+    };
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="textBold"><code>文本加粗 switchTextStyle(style,matchValue,defaultValue)</code></h3>
+说明：对当前选中的文本字体加粗；
+
+#### 参数
+1. `fontWeight` *(string)*: 必需。 字体操作的样式.
+2. `bold` *(string)* 必需。 加粗.
+3. `defaultValue`*(string)* 可选。 设置的默认值，默认为`undefined`;
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+    // 调用 switchTextStyle('fontWeight', 'bold')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="textIncline"><code>文本斜体 switchTextStyle(style,matchValue,defaultValue)</code></h3>
+说明：对当前选中的文本字体倾斜；
+
+#### 参数
+1. `fontStyle` *(string)*: 必需。 字体操作的样式.
+2. `italic` *(string)* 必需。 斜体.
+3. `defaultValue`*(string)* 可选。 设置的默认值，默认为`undefined`;
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+
+    // 调用 switchTextStyle('fontStyle', 'italic')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="textIncline"><code>下划线 switchTextStyle(style,matchValue,defaultValue)</code></h3>
+说明：对当前选中的文本加下划线；
+
+#### 参数
+1. `underline` *(string)*: 必需。 字体操作的样式.
+2. `true` *(string)* 必需。 下划线.
+3. `false`*(string)* 可选。 设置的默认值，默认为`undefined`;
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+
+    // 调用 switchTextStyle('underline', true, false)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="textIncline"><code>删除线 switchTextStyle(style,matchValue,defaultValue)</code></h3>
+说明：对当前选中的文本加删除线；
+
+#### 参数
+1. `linethrough` *(string)*: 必需。 字体操作的样式.
+2. `true` *(string)* 必需。 下划线.
+3. `false`*(string)* 可选。 设置的默认值，默认为`undefined`;
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+
+    // 调用 switchTextStyle('linethrough', true, false)
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="textIncline"><code>上标 switchTextStyle(style,matchValue)</code></h3>
+说明：对当前选中的文本上标；
+
+#### 参数
+1. `style` *('vertAlign')*: 必需。 字体操作的样式.
+2. `matchValue` *('superscript')* 必需。 上标.
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+
+    // 调用 switchTextStyle('vertAlign', 'superscript')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="textIncline"><code>下标 switchTextStyle(style,matchValue)</code></h3>
+说明：对当前选中的文本下标；
+
+#### 参数
+1. `style` *('vertAlign')*: 必需。 字体操作的样式.
+2. `matchValue` *('subscript')* 必需。 上标.
+
+#### 例如：
+```js
+    // 判断设置属性是否在当前属性对象上面；
+    const getEffectiveTextGroupStyle = (textProps, style, matchValue) => {
+      if (!textProps) {
+        return false;
+      }
+      return textProps[style] === matchValue;
+    };
+
+    const switchTextStyle = (style,matchValue,defaultValue: any = undefined)=>{
+      const textProps = editorContext.editorData.editor?.getSelectionTextGroupProps();
+      if (!textProps) {
+        return;
+      }
+      const isEffective = getEffectiveTextGroupStyle(textProps, style, matchValue);
+      editorContext.editorData.editor!.switchTextStyle(isEffective, style, matchValue, defaultValue);
+    }
+
+    // 调用 switchTextStyle('vertAlign', 'subscript')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setTextFontSize"><code>设置字体大小 setTextFontSize(fontSize)</code></h3>
+说明：对当前选中的文本下标；
+
+#### 参数
+1. `fontSize` *('number')*: 必需。 设置字体大小.
+
+#### 例如：
+```js
+    const setFontSize = (fontSize) => {
+      editorContext.editorData.editor!.setTextFontSize(fontSize);
+    };
+
+    // 调用 setFontSize(16)
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setTextColor"><code>设置字体颜色 setTextFontSize(color)</code></h3>
+说明：对当前选中的文本设置颜色 ；
+
+#### 参数
+1. `color` *('string')*: 必需。 设置字体颜色 目前是支持 `rgba` 和  十六进制 .
+
+#### 例如：
+```js
+    const setTextColor = (color) => {
+      editorContext.editorData.editor!.setTextColor(color);
+    };
+
+    // 调用 setTextColor('rgba(34, 34, 34, 1)')
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="setTextFont"><code>设置字体 setTextFont(font)</code></h3>
+说明：设置当前选中文本的字体类型；
+
+#### 参数
+1. `font` *('string')*: 必需。 设置字体 .
+
+#### 例如：
+```js
+    const setTextFont = (font) => {
+      editorContext.editorData.editor!.setTextFont(font);
+    };
+
+    // 调用 setTextFont('微软雅黑')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setTextBackColor"><code>设置文本的背景色 setTextBackColor(color)</code></h3>
+说明：设置当前选中文本的背景颜色；
+
+#### 参数
+1. `color` *('string')*: 必需。 设置字体 目前是支持 `rgba` 和  十六进制 ..
+
+#### 例如：
+```js
+    const setTextBackColor = (color) => {
+      editorContext.editorData.editor!.setTextBackColor(color);
+    };
+
+    // 调用 setTextBackColor('#000000')
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="switchParaAlign"><code>文本对齐 switchParaAlign(align)</code></h3>
+说明：设置当前文本的对齐位置；
+
+#### 参数
+1. `align` *('left','center','right','justify')*: 必需。 当前行对齐位置 文本默认左对齐.
+
+#### 例如：
+```js
+    const switchAlign = (align) => {
+      editorContext.editorData.editor!.switchParaAlign(align);
+    };
+
+    // 调用 switchAlign('left')
+```
+<!-- /div -->
+
+
+设计模式、只读模式、表单模式
+
+格式刷
+
+
+
+<!-- div -->
+<h3 id="exportPDF"><code>导出PDF exportPDF()</code></h3>
+说明：导出当前编辑器内容为PDF；
+
+#### 例如：
+```js
+    const exportPDF = () => {
+      editorContext.editorData.editor!.exportPDF();
+    };
+    // 调用 exportPDF()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="exportPhoto"><code>导出图片 exportAllPagesToBase64(pthotoName)</code></h3>
+说明：导出当前编辑器内容为图片；
+
+#### 参数
+1. `pthotoName` *(string)*: 必需。 导出图片的名称.
+
+#### 例如：
+```js
+    const exportPhoto = (pthotoName)=>{
+      editorContext.editorData.editor!.exportAllPagesToBase64(pthotoName);
+    }
+    // 调用 exportPhoto('test')
+```
+
+<h3 id="setParagraphNumberType"><code>设置项目符号 setParagraphNumberType()</code></h3>
+说明：设置当前行的项目符号
+
+#### 例如：
+```js
+    const setParagraphNumberType = () => {
+      editorContext.editorData.editor!.setParagraphNumberType();
+    };
+    // 调用 setParagraphNumberType();
+```
+<!-- div -->
+<h3 id="tableConfig"><code>表格操作的基础配置</code></h3>
+
+> <span style="color:red">重要</span> 所有的表格操作，都要基于下面的引入文件
+
+```js
+// 表格操作 所需要文件；
+import { CanvasTextEditor } from "@/med_editor/texteditor";
+import { SelectionState } from "@/med_editor/framework/document-selection";
+import { TableUtil } from "@/med_editor/framework/impl/table/table-util";
+import { TableSplitCell } from "@/med_editor/framework/impl/table/table-split-cell";
+import { editorContextType } from '@/components/emrComponents/code/types';
+import { emrExtraF, TableType } from '@/components/emrComponents/common/emrExtraF'
+
+    ...
+// 获取操作表格的初始化；
+const editorContext: editorContextType = inject('editor-context') as editorContextType;
+
+const getEditor = (): CanvasTextEditor => {
+    const editor = editorContext.editorData.editor as CanvasTextEditor;
+    return editor;
+};
+
+const getSelectionState = (): SelectionState => getEditor().selectionState;
+    ...
+```
+
+<!-- /div -->
+
+<!-- div -->
+<h3 id="tableJson"><code>表格的数据结构</code></h3>
+
+#### 表格的数据结构（JSON、table\row\cell）
+```json
+    // 3*3 的表格数据结构 示例：
+    {
+        "type": "tb",
+        "props": {
+            "width": 649,
+            "cols": [
+                {
+                    "width": 216
+                },
+                {
+                    "width": 216
+                },
+                {
+                    "width": 217
+                }
+            ],
+            "border": "all"
+        },
+        "children": [
+            {
+                "type": "tr",
+                "children": [
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "type": "tr",
+                "children": [
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "type": "tr",
+                "children": [
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    },
+                    {
+                        "type": "tbc",
+                        "children": [
+                            {
+                                "type": "p"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertTable"><code>插入表格 insertTable(row, col, editor, editorTableType)</code></h3>
+说明： 在当前光标处插入表格；
+
+#### 参数
+1. 'row' *（number）*: 插入表格行数；
+2. 'col' *（number）*: 插入表格列数；
+2. 'editor' : 当前编辑器，该字段调用时手动传入；
+2. 'editorTableType' : 表格类型 该字段调用时手动传入 默认值‘tb’；
+
+#### 例如：
+```js
+    const insertTable = (row, col) => {
+      emrExtraF.insertTable(row, col, editorContext.editorData.editor!, TableType.tb)
+    };
+    // insertTable()
+```
+<!-- /div -->
+
+
+<!-- div -->
+<h3 id="insertRowBelow"><code>向下新增行 insertRowBelow(getSelectionState)</code></h3>
+说明： 在当前行下面新增一行；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const insertRowBelow = () => {
+      emrExtraF.insertRowBelow(getSelectionState())
+    };
+    // insertRowBelow()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertRowAbove"><code>向上新增行 insertRowAbove(getSelectionState)</code></h3>
+说明： 在当前行上面新增一行；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const insertRowAbove = () => {
+      emrExtraF.insertRowAbove(getSelectionState())
+    };
+    // insertRowAbove()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertColToRight"><code>向右新增列 insertColToRight(getSelectionState)</code></h3>
+说明：在当前单元格右面新增一列；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const insertColToRight = () => {
+      emrExtraF.insertColToRight(getSelectionState())
+    };
+    // insertColToRight()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="insertColToLeft"><code>向左新增列 insertColToLeft(getSelectionState)</code></h3>
+说明：在当前单元格左面新增一列；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const insertColToLeft = () => {
+      emrExtraF.insertColToLeft(getSelectionState())
+    };
+    // insertColToLeft()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="removeCurrRow"><code>删除行 removeCurrRow(getSelectionState)</code></h3>
+说明：在当前光标所在的行；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const removeCurrRow = () => {
+      TableUtil.removeCurrRow(getSelectionState());
+    };
+    // removeCurrRow()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="removeCurrCol"><code>删除列 removeCurrCol(getSelectionState)</code></h3>
+说明：在当前光标所在的列；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const removeCurrCol = () => {
+      TableUtil.removeCurrCol(getSelectionState());
+    };
+    // removeCurrCol()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="mergeCells"><code>合并单元格 mergeCells(getSelectionState)</code></h3>
+说明：合并当前选中单元格；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+
+#### 例如：
+```js
+    const mergeCells = () => {
+      TableUtil.mergeCells(getSelectionState());
+    };
+    // mergeCells()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="splitCell"><code>拆分单元格 splitCell(getSelectionState)</code></h3>
+说明：拆分当前选中单元格；
+
+#### 参数
+1. 'getSelectionState' 当前光标的状态；
+
+#### 例如：
+```js
+    const splitCell = () => {
+      TableSplitCell.splitCell(selectionState(), 0, 2)
+    };
+    // splitCell()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="restoreCell"><code>合并单元格还原 restoreCell(getSelectionState)</code></h3>
+说明：还原当前合并单元格；
+
+#### 参数
+1. 'getSelectionState' 当前光标的状态；
+
+#### 例如：
+```js
+    const restoreCell = () => {
+      TableSplitCell.restoreCell(selectionState())
+    };
+    // restoreCell()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setRowHeight"><code>设置行高 setRowHeight(getSelectionState, rowHeight=20)</code></h3>
+说明：设置当前光标所在行的行高；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态；
+2. 'rowHeight' *（number）*: 行高值 默认值为20；
+
+#### 例如：
+```js
+    const setRowHeight = () => {
+      TableUtil.setRowHeight(getSelectionState(), rowHeight=20);
+    };
+    // setRowHeight()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setColWidth"><code>设置列宽 目前支持拖动</code></h3>
+说明：拖动设置当前列宽（后续配置文档待完善）；
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setTableCellDiagonal"><code>表格对角线操作 setTableCellDiagonal(getSelectionState, diagonal)</code></h3>
+说明：设置当前单元格的对角线和删除对角线；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
+2. 'diagonal' *（"main" | "sub" | ''）*: `main` 主对角线 `sub` 副对角线 `''` 删除对角线;
+
+#### 例如：
+```js
+    const setTableCellDiagonal = (diagonal) => {
+      TableUtil.setTableCellDiagonal(getSelectionState(), diagonal);
+    };
+    // setTableCellDiagonal()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setTableBorderProps"><code>设置边框线 setTableBorderProps(getSelectionState, diagonal)</code></h3>
+说明：设置当前表格边框线；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
+2. 'diagonal' *("all" | "none")*: `all` 有边框; `none` 无边框; 
+
+#### 例如：
+```js
+    const setTableBorderProps = (diagonal) => {
+      TableUtil.setTableBorderProps(getSelectionState(), diagonal);
+    };
+    // setTableBorderProps()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setCellValign"><code>设置表格内容对齐方式 setCellValign(getSelectionState, diagonal)</code></h3>
+说明：设置表格内容对齐方式；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
+2. 'diagonal' *("top" | "middle" |"bottom")*: `top` 顶部对齐; `middle` 居中对齐; `bottom` 底部对齐; 
+
+#### 例如：
+```js
+    const setCellValign = (diagonal) => {
+      TableUtil.setCellValign(getSelectionState(), diagonal);
+    };
+    // setCellValign()
+```
+<!-- /div -->
+
+<!-- div -->
+<h3 id="setCellBackground"><code>设置表格内容对齐方式 setCellBackground(getSelectionState, diagonal)</code></h3>
+说明：设置当前选中的单元格背景色；
+
+#### 参数
+1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
+2. 'diagonal' *(string)*: 背景颜色 支持`rgba` 和十六进制; 
+
+#### 例如：
+```js
+    const setCellBackground = (color) => {
+      TableUtil.setCellBackground(getSelectionState(), color);
+    };
+    // setCellBackground()
+```
+<!-- /div -->
+
+
+<!-- 
+编辑页脚页眉
+双击页眉，body，页脚 开启是否可编辑，默认body 是可编辑；
+default 设置viewoption;
+删除数据元、删除段落、删除数据组
+条形码、二维码
+排版：标尺处理，悬挂
+ -->