@hailin-zheng/editor-core 2.0.54 → 2.1.1

package/README.md

@@ -1,1756 +1 @@
-## 开始
-* <a href="#summary">简介</a>
-* <a href="#install">安装</a>
-* <a href="#import">引入编辑器</a>
-* <a href="#init">初始化编辑器</a>
-* <a href="#config">编辑器配置</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="#textUnderline">switchTextStyle 下划线</a>
-* <a href="#textLinethrough">switchTextStyle 删除线</a>
-* <a href="#textOverline">switchTextStyle 文本上标</a>
-* <a href="#textUnderline">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>
-
-<h3 id="summary"><code>简介</code></h3>
-编辑器 基于 ts+canvas。运行环境现代主流浏览器(chrome等)。
-
-<h3 id="install"><code>安装</code></h3>
-执行 npm i editor-core，安装编辑器。从 “editor-core” 可以引入编辑器类editor-core、loadDoc等导出的属性方法。
-
-<!-- div -->
-<h3 id="import"><code>引入编辑器</code></h3>
-编辑器的dom结构在 editor-body.vue 组件中，是编辑器的body部分。如需添加工具栏，需要对接编辑器抛出的事件、属性实现工具栏的控制功能。
-editor-body.vue 的结构如下：
-
-``` html
-    <template>
-    <div class="doc-container">
-        <div class="doc-rule-container" :class="isRuleHide ? 'hideRuleClass':''">
-        <canvas ref="ruleCanvas" />
-        </div>
-        <div class="doc-scroll" :class="isRuleHide ? 'doc-scroll-height':''" ref="docScroll">
-        <div class="doc-hold-space" ref="docHoldSpace"></div>
-        <div class="edit-canvas-container" ref="editCanvasContainer">
-            <div class="canvas-center-fix" ref="scaleContainer">
-            <canvas ref="editCanvas" />
-            <div class="edit-selection" ref="cursorWrapper">
-                <span class="edit-input-wrap">
-                <input type="text" class="edit-input" ref="editInput" />
-                </span>
-                <span class="edit-cursor" ref="editCursor"></span>
-            </div>
-            <slot></slot>
-            </div>
-        </div>
-        </div>
-    </div>
-    </template>
-
-```
->源码 `editor-body` 组件是编辑器dom结构; 组件EditTools是工具栏部分,控制字体属性、文档缩放、打印等功能；`ContextMenuApp`、'component' 组件是基于监听单击（或右键）事件，触发的功能;
-
-```js
-    // 编辑器容器文件 .vue
-  <template>
-    <div class="doc-editor">
-      <template v-if="showTools">
-        <EditTools v-bind="$attrs" @emitSetRule="setRuleStatus"></EditTools>
-      </template>
-      <editor-body ref="editorBodyRef" :isRuleHide="isRuleHide">
-        <ContextMenuApp v-show="contextMenuVisible" :positionObj="positionObj" @close="close" />
-        <!-- 修改提示 -->
-        <div class="updateTips">
-          <!-- <div v-for="item in updateTipsList"> </div> -->
-        </div>
-      </editor-body>
-      <component v-if="compt" :is="compt"></component>
-    </div>
-  </template>
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="init"><code>初始化编辑器</code></h3>
-
-初始化编辑器，实例CanvasTextEditor对象，提供给子组件ref参数（docScroll, docHoldSpace, ruleCanvas, editCanvasContainer, editCanvas, editInput, editCursor, cursorWrapper）给CanvasTextEditor，获得编辑器对象。属性的修改和编辑器的方法均通过CanvasTextEditor暴露出来；
-> 注意：这里需要引入类型 `editorContextType` (位于 emrComponents/code/types.ts 中)
-
-```js
-    /** CanvasTextEditor实例属性 */
-private
-contentCtx: CanvasRenderingContext2D;
-viewOptions: ViewOptions;
-docCtx: EditorContext;
-private
-docComment: DocumentComment;
-private
-renderContext: RenderContext;
-private
-documentPaint: DocumentPaint;
-elementReader: ElementReader;
-private
-documentEvent: DocumentEvent;
-private
-documentSelection: DocumentSelection;
-private
-documentInput: DocumentInput;
-private
-documentChange: DocumentChange;
-private
-selectionOverlays: SelectionOverlays;
-private
-docRule: DocRule;
-private
-eventMap: EventMap = new EventMap();
-historyMange: ElementTrackManage;
-selectionChanged: Subject < SelectionState > = new Subject();
-beforeRenderSubject: Subject < void > = new Subject();
-afterRenderSubject: Subject < void > = new Subject();
-selectionState: SelectionState;
-//显示右键菜单
-onContextMenuItemChanged: Subject < EditorContextProps > = new Subject();
-onDblClickEvent: Subject < Event > = new Subject();
-onClickEvent: Subject < Event > = new Subject();
-onScrollViewEvent: Subject < number > = new Subject();
-//文档改变事件:内容及样式，业务模块需要根据此事件，来追踪当前文档是否改变的状态
-onDocChangedEvent: Subject < void > = new Subject();
-//执行flushTask,refreshDoc之前，此时可以在文档计算排版之前改变内容
-onBeforeRefreshDocument: Subject < void > = new Subject();
-.....
-
-/** 实例化编辑器 */
-const {
-    docScroll,
-    docHoldSpace,
-    ruleCanvas,
-    editCanvasContainer,
-    editCanvas,
-    editInput,
-    editCursor,
-    cursorWrapper
-} = editorBodyRef.value;
-let textEditor = new CanvasTextEditor(docScroll, docHoldSpace, ruleCanvas, editCanvasContainer, editCanvas, editInput, editCursor, cursorWrapper);
-textEditor.createNewDoc();
-
-```
-<!-- /div -->
-<!-- div -->
-<h3 id="config"><code>编辑器配置</code></h3>
-
-修改CanvasTextEditor对象上的viewOptions对象中的值，修改编辑器配置。viewOptions.copyRightInfo 修改版权信息，viewOptions.watermark 修改水印，等等。
-```js
-    export class ViewOptions {
-    copyRightInfo!: string;  // 修改版权信息
-    watermark?: string; // 修改水印
-    drawLineRectColor = "rgb(0,0,0)";
-    drawCharRectColor = "rgb(0,0,0)";
-    drawSymbolsColor = 'rgb(128,128,128)';
-    defaultFontName = '宋体';
-    defaultFontSize = 14;
-    defaultColor = "rgb(0,0,0)";
-    selectionOverlaysColor = 'rgb(131,175,155,0.5)';
-    dataEleOverlaysColor = 'rgb(131,175,155,0.5)';
-    dataEleReadOnlyOverlayColor = '#d9d9d9';
-    dataEleOutlineColor = 'rgb(131,175,155,0.7)';
-    viewBackcolor = 'rgb(230,230,230)';
-    paraSymbolColor = 'rgb(128,128,128)';
-    dataGroupColor = 'rgb(0,80,179)';
-    //新增-留痕块文本颜色
-    trackInsColor = '#ff4d4f';
-    //删除-留痕块文本颜色
-    trackDelColor = '#000';
-    showLineRect!: boolean;
-    showCharRect!: boolean;
-    showParaMark!: boolean;
-    showTabChar!: boolean;
-    showSpaceChar!: boolean;
-    showLineBreak!: boolean;
-    bodyMarginTop = 8;
-    devMode: boolean = false;
-    showDebug!: boolean;
-    resourceMode: 'lazy' | 'immediate' = 'immediate';
-    secretBrowse: boolean = false;
-    //中文版式，处理中文换行；前置标点和后置标点
-    chineseLayout: boolean = true;
-    //记录变更
-    enableTrackHistory: boolean = false;
-    //记录变更的次数
-    trackHistoryMaxLength: number = 500;
-    //整页模式，不分页
-    private _fullPageView: boolean = false;
-    get fullPageView(): boolean {
-        return this._fullPageView;
-    }
-
-    set fullPageView(value: boolean) {
-        if (this.fullPageView === value) {
-            return;
-        }
-        this._fullPageView = value;
-        this.onChange.next('force');
-    }
-
-    //毫米和像素的转换比
-    mmToPixelsRatio: number = 0;
-    cursor: CursorType = 'text';
-    //当前文档偏移量，取决于滚动条位置
-    translateY = 0;
-    //文档大小
-    docPageSettings: PageOptions = new PageOptions(0, 0);
-    //视图大小,canvas
-    viewSettings!: {
-        width: number;
-        height: number;
-    };
-    pageNumFormat: string = '第{index}页/共{count}页';
-    pageNumOffset: number = 0;
-    //页排版模式：单页模式、多页模式、适应页宽模式
-    pageLayoutMode: PageLayoutMode = 'singlePage';
-
-    //内容区宽度，受审阅窗口宽度影响
-    get contentWidth(): number {
-        if (this.showReviewWindow) {
-            return this.docPageSettings.width + this.reviewWindowWidth;
-        }
-        return this.docPageSettings.width;
-    }
-
-    /**
-     * 内容区域的高度
-     * 同时限定canvas的最小宽度
-     */
-    get ContentWidth(): number {
-        let width = this.docPageSettings.width;
-        if (this.showReviewWindow) {
-            width = width + this.reviewWindowWidth;
-        }
-        return width;
-    }
-
-    //两个页的间距
-    docSpace: number = 0;
-    //是否显示审阅窗口
-    private _showReviewWindow: boolean = false;
-    public get showReviewWindow(): boolean {
-        return this._showReviewWindow;
-    }
-
-    public set showReviewWindow(value: boolean) {
-        if (value === this._showReviewWindow) {
-            return;
-        }
-        this._showReviewWindow = value;
-        this.onChange.next();
-    }
-
-    //审阅窗口宽度
-    reviewWindowWidth: number = 200;
-    //缩放
-    private _scale: number = 1;
-    get scale(): number {
-        return this._scale;
-    }
-
-    set scale(val: number) {
-        this._scale = val;
-    }
-
-    docMode: DocMode = DocMode.Design;
-    //是否显示审阅痕迹
-    private _showTrackChanges: boolean = true;
-    public get showTrackChanges(): boolean {
-        return this._showTrackChanges;
-    }
-
-    public set showTrackChanges(value: boolean) {
-        if (this._showTrackChanges === value) {
-            return;
-        }
-        this._showTrackChanges = value;
-        this.onChange.next('force');
-    }
-
-    //医嘱打印模式，文字行模式,将表格多行对象转换为多个表格行对象
-    textRowLineMode: boolean = false;
-    editUser: DocUser = {id: '', name: ''};
-    //留痕区域的生效时间段，同一用户的留痕块在此时间外需要生成新的留痕块
-    trackChangePeriod: number = 10;
-    onChange: Subject<'demand' | 'force'> = new Subject();
-    //打印模式，普通模式，续打模式
-    printMode: 'normal' | 'continuation' = 'normal';
-    constructor() {
-    }
-}
-
-```
-<!-- /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、 调用 编辑器实例的 loadDoc 方法，根据 序列化的对象 渲染页面
-
-> 注意：docCombineIns.add() 第二个要添加唯一值，用来区分不同的文档。
-```js
-    
-    // 将模板JSON转化为对象
-    const docTemplateData = JSON.parse(docTemplateJSON);
-    //引入合并病程录工具类，并实例化
-    const docCombineIns = new DocumentCombine();
-    //读取JSON对象转化为文档对象
-    docCombineIns.mainTemplate = editor.elementReader.readElement(docTemplateData) as DocumentElement;
-    //循环读取多个文档数据并添加到为病程录部件对象中
-    docJSONItems.forEach(({content,docId}) => {
-      const docBody = editor.elementReader.readElement(
-        JSON.parse(content)
-      ) as DocumentElement;
-      //docBody为当前文档的内容体
-      //docId为当前文档的编号，在完成合并文档的结构组装后，该ID标识病程录对象，用于查找定位
-      docCombineIns.add(docBody, docId);
-    });
-    //完成合并病程录的结构加载
-    const result = docCombineIns.load();
-    //将合并后的对象序列化为JSON
-    let partJson = ElementSerialize.serialize(result, 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) {
-      editor.bringToView(ele);
-    }
-  }
-  getBodyPartElementById(id: string): DocumentBodyPartElement | null {
-    return this.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.editor.docCtx.document.headerElement;
-    const headerDataEleList = this.editor.docCtx.getCtx(headerEle).getDataElementValues() || []
-
-    const docJsons: jsonSProp[] = this.split();
-    const bodyPartS: DocumentBodyPartElement[] = this.editor.docCtx.document.treeFilter(
-      (item) => item instanceof DocumentBodyPartElement
-    ) as DocumentBodyPartElement[];
-
-    let list = 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.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
-     /** 获取当前光标所在数据元内的内容 */
-    const ele = editor.getCurrentDataElement();
-
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="getNowHtml"><code>获取当前选中的元素</code></h3>
-说明：获取当前选中的元素，editor.selectionState.startControl 是当前选中的元素；
-
-#### 例如：
-```js
-    editor.selectionState.startControl
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="getNowBasic"><code>获取当前选中的数据元</code></h3>
-说明：获取当前编辑的数据元的内容；
-
-#### 例如：
-```js
-     /** 获取数据元对象 */
-    const ele = editor.getCurrentDataElement();
-```
-<!-- /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
-/** 获取病历实例集合 */
-    editor.docCtx.defaultCtx.getControlInstanceList();
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="getSelectObj"><code>获取选区内容的对象</code></h3>
-说明：获取选区内容的对象 this.selectionState.selectedRange ；
-
-#### 例如：
-```js
-    editor.selectionState.selectedRange
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="groupData"><code>数据组</code></h3>
-说明：1、数据组可以将不同的数据元和文字组合，获取其文本值；
-2、数据组 可以控制 显示隐藏。
-
-> 注意：文本值在  表单编辑模式下，不能修改。
-
-#### 例如：
-```js
-    //实例化数据组对象
-    const dataGroup = new DataGroupElement();
-    //插入数据组并返回光标定位点元素
-    const focusPoint = editor.insertNewElement(dataGroup);
-    //获取用于定位的光标元素
-    const focusEle = ElementUtil.getNextSiblingElement(focusPoint);
-    if (focusEle) {
-      //设置光标到数据组开头
-      editor.selectionState.resetRange(focusEle, 0);
-    }
-```
-#### 属性说明
-```js
-    id!: string;
-    name!: string;
-    //是否隐藏数据组
-    hidden!: boolean;
-```
-<!-- /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
-        /** 插入批注 */
-    editor.insertComment();
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="trace"><code>留痕</code></h3>
-开启留痕模式，会将修改记录下来。
-
-> 注意：需要开启留痕记录，设置显示痕迹记录，才会显示痕迹
-
-#### 例如：
-```js
-    /**  切换审阅痕迹 */
-  switchTrackChanges(editorContext: editorContextType, isAdd?: boolean) {
-    if ((isAdd && !editorContext.editorData.editor!.selectionState.enableTrackChanges) ||
-        (!isAdd && editorContext.editorData.editor!.selectionState.enableTrackChanges)) {
-          // editorContext.editorData.editor!.switchTrackChanges(editorContext.editorData.editor!.docCtx.document)
-      const editor = editorContext.editorData.editor!;
-      const parentEleCtx = editor.docCtx.getCurrentEleCtx();
-      if (parentEleCtx) { // 病程录切换
-        editor.switchTrackChanges(parentEleCtx);
-      } else { // 普通切换
-        editor.switchTrackChanges(editorContext.editorData.editor!.docCtx.document);
-      }
-    }
-  },
-    /**  显示审阅痕迹 */
-  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(jsonData: any) {
-    const documentOffscreenPrint = new DocumentPrintOffscreen();
-    const doc = documentOffscreenPrint.elementReader.readElement(jsonData) as DocumentElement;
-    documentOffscreenPrint.print(doc);
-  }
-```
-<!-- /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
-    editor.viewOptions.copyRightInfo='XXX电子病历编辑器';
-```
-<!-- /div -->
-
-
-<!-- div -->
-<h3 id="setPaperOrient"><code>设置纸张方向 setPaperOrient(OrientType)</code></h3>
-说明：设置纸张方向；
-
-#### 参数
-1. `OrientType` *("landscape" | "portrait")*: 必需。默认 `portrait`. `landscape` 横向；`portrait` 纵向;  
-
-#### 例如：
-```js
-   editor.setPaperOrient(OrientType)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="setPaperSize"><code>设置纸张方向 setPaperSize({width,height})</code></h3>
-说明：设置纸张大小；
-
-#### 参数
-1. `width` *(numer)*: 可选。单位为毫米(mm);  
-2. `height` *(numer)*: 可选。单位为毫米(mm);  
-
-#### 例如：
-```js
-    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
-    //实例化月经史数据元
-    const ele=new DataElementMH();
-    //月经史属性赋值
-    ele.props...;
-    //在当前文档光标处插入对象
-    editor.insertNewElement(ele);
-    
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="insertImage"><code>插入图片 insertImage(SelectionState, editorData, src)</code></h3>
-说明：对当前位置插入图片；
-
-> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
-
-#### 例如：
-```js
-    //实例化图片对象
-    const ele=new PictureElement();
-    //图片对象赋值
-    ele.props.src='图片地址';
-    //在当前文档光标处插入对象
-    editor.insertNewElement(ele);
-    
-```
-<!-- /div -->
-
-
-<!-- div -->
-<h3 id="setDataEleVal"><code>设置数据元的值 setDataEleVal(SelectionState, editorData, src)</code></h3>
-说明：设置当前数据元的值；
-
-#### 参数
-1. `val` *(string)*: 必需。设置数据元的值;  
-2. `SelectionState` : 必需。当前选中状态,调用时手动传入;
-
-> <span style="color:red">提示</span>：需要引入相关文件,并导入所需对象;
-
-#### 例如：
-```js
-    //获取当前数据元
-    const ele=editor.getCurrentDataElement();
-    //数据元赋值
-    dataEle.setValue(val);
-    //重置光标到当前数据元末尾处
-    selectionState.resetRange(dataEle, -1);
-    
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="validate"><code>文档校验 validate()</code></h3>
-说明：校验当前文档下所有数据元的有效性；
-
-> 该校验是根据数据元属性的 `required` 属性值来判断是否做校验；数据元结构详见<a href="#basicDataJson">数据元结构示例</a>
-
-#### 例如：
-```js
-    editorContext.editorData.editor.validate();
-    // insertImage()
-    
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="selectionChanged"><code>选区事件 selectionChanged(callBack)</code></h3>
-说明：获取当前光标的选中事件,可以添加监听selectionChanged，触发所需功能；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。选区事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前选中对象.
-
-#### 例如：
-```js
-    editor.selectionChanged.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="onClickEvent"><code>单击事件 onClickEvent(callBack)</code></h3>
-说明：获取当前光标的单击事件；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。单击事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前单击事件源.
-
-#### 例如：
-```js
-    editor.onClickEvent.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="onContextMenuItemChanged"><code>右击事件 onContextMenuItemChanged(callBack)</code></h3>
-说明：获取当前光标的右击事件；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。右击事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前右击事件源.
-
-#### 例如：
-```js
-    editor.onContextMenuItemChanged.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="onDblClickEvent"><code>双击事件 onDblClickEvent(callBack)</code></h3>
-说明：获取当前光标的双击事件；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。双击事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前双击事件源.
-
-#### 例如：
-```js
-    editor.onDblClickEvent.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="onScrollViewEvent"><code>滚动事件 onScrollViewEvent(callBack)</code></h3>
-说明：获取当前光标的滚动事件；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。滚动事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前滚动事件源.
-
-#### 例如：
-```js
-    editor.onScrollViewEvent.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="onDocChangedEvent"><code>文档变更事件 onDocChangedEvent(callBack)</code></h3>
-说明：获取当前文档变更事件；
-
-#### 参数
-1. `callBack` *( function(selectionState?) )*: 必需。文档变更事件触发后的回调函数.
-2. `selectionState` *(selectionState)*: 可选。当前文档变更事件源.
-
-#### 例如：
-```js
-    editor.onDocChangedEvent.subscribe(callBack)
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="fullPageView"><code>全页面视图模式 fullPageView</code></h3>
-
-说明：设置当前页面是否为全页面视图模式 默认是 `false` 分页模式 ；
-
-#### 例如：
-```js
-    editor.viewOptions.fullPageView = true;
-```
-<!-- /div -->
-
-
-<!-- div -->
-<h3 id="createNewDoc"><code>新建文档 createNewDoc()</code></h3>
-说明：新建编辑器内容；
-
-#### 例如：
-```js
-     editor.createNewDoc();
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="printAllPages"><code>打印文档 printAllPages(printRanges)</code></h3>
-说明：打印当前编辑器内容；
-
-#### 参数
-1. `printRanges` *(Array<number>)*: 可选。 要打印指定的页的下标，初始值 0，不传则全部打印.
-
-#### 例如：
-```js
-    editor.printAllPages(printRanges);
-    // 调用 printAllPages() // 打印全部;
-    // 调用 printAllPages([1]) // 只打印第二页;
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="loadDoc"><code>导入文档 loadDoc(docJSON)</code></h3>
-说明：将json文件转化为编辑器内容；
-
-#### 参数
-1. `docJSON` *(json)*: 必需。 导入文件的json 对象.
-
-#### 例如：
-```js
-    editor.loadDoc(docJSON);
-```
-> 如果是 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);
-        editor.loadDoc(docJSON);
-    };
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="textBold"><code>文本加粗 switchTextStyle(style,matchValue,defaultValue)</code></h3>
-说明：对当前选中的文本字体加粗；
-
-#### 参数
-1. `fontWeight` *(string)*: 必需。 字体操作的样式.
-2. `bold` *(string)* 必需。 加粗.
-3. `defaultValue`*(string)* 可选。 设置的默认值，默认为`normal`;
-
-#### 例如：
-```js
-    editor.setTextFormat({fontWeight:'bold'});
-    //恢复操作
-    editor.setTextFormat({fontWeight:'normal'});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="textIncline"><code>文本斜体 switchTextStyle(style,matchValue,defaultValue)</code></h3>
-说明：对当前选中的文本字体倾斜；
-
-#### 参数
-1. `fontStyle` *(string)*: 必需。 字体操作的样式.
-2. `italic` *(string)* 必需。 斜体.
-3. `defaultValue`*(string)* 可选。 设置的默认值，默认为`normal`;
-
-#### 例如：
-```js
-    editor.setTextFormat({fontStyle:'italic'});
-    //恢复默认值
-    editor.setTextFormat({fontStyle:'normal'});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="textUnderline"><code>下划线 switchTextStyle(style,matchValue,defaultValue)</code></h3>
-说明：对当前选中的文本加下划线；
-
-#### 参数
-1. `underline` *(string)*: 必需。 字体操作的样式.
-2. `true` *(string)* 必需。 下划线.
-3. `false`*(string)* 可选。 设置的默认值，默认为`false`;
-
-#### 例如：
-```js
-    //设置下划线
-    editor.setTextFormat({underline:true});
-    //恢复默认值
-    editor.setTextFormat({underline:false});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="textLinethrough"><code>删除线 switchTextStyle(style,matchValue,defaultValue)</code></h3>
-说明：对当前选中的文本加删除线；
-
-#### 参数
-1. `linethrough` *(string)*: 必需。 字体操作的样式.
-2. `true` *(boolean)* 必需。 下划线.
-3. `false`*(boolean)* 可选。 设置的默认值，默认为`false`;
-
-#### 例如：
-```js
-    //设置删除线
-    editor.setTextFormat({linethrough:true});
-    //恢复默认值
-    editor.setTextFormat({linethrough:false});
-```
-<!-- /div -->
-
-
-<!-- div -->
-<h3 id="textOverline"><code>上标 setTextFormat(config)</code></h3>
-说明：对当前选中的文本上标；
-
-#### 参数
-1. `style` *('vertAlign')*: 必需。 字体操作的样式.
-2. `matchValue` *('superscript')* 必需。 上标.
-
-#### 例如：
-```js
-    //设置上标
-    editor.setTextFormat({vertAlign:'superscript'});
-    //恢复默认值
-    editor.setTextFormat({vertAlign:null});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="textUnderline"><code>下标 setTextFormat(config)</code></h3>
-说明：对当前选中的文本下标；
-
-#### 参数
-1. `style` *('vertAlign')*: 必需。 字体操作的样式.
-2. `matchValue` *('subscript')* 必需。 上标.
-
-#### 例如：
-```js
-    //设置下标
-    editor.setTextFormat({vertAlign:'subscript'});
-    //恢复默认值
-    editor.setTextFormat({vertAlign:null});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="setTextFontSize"><code>设置字体大小 setTextFormat(config)</code></h3>
-说明：对当前选中的文本下标；
-
-#### 参数
-1. `fontSize` *('number')*: 必需。 设置字体大小.单位像素
-
-#### 例如：
-```js
-    editor.setTextFormat({fontSize:16});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="setTextColor"><code>设置字体颜色 setTextFontSize(config)</code></h3>
-说明：对当前选中的文本设置颜色 ；
-
-#### 参数
-1. `color` *('string')*: 必需。 设置字体颜色 目前是支持 `rgba` 和  十六进制 .
-
-#### 例如：
-```js
-    //设置字体颜色
-     editor.setTextFormat({color:'#70DB93'});
-     //rgba设置
-     editor.setTextFormat({color:'rgba(112,219,147,1)'});
-```
-<!-- /div -->
-
-
-<!-- div -->
-<h3 id="setTextFont"><code>设置字体 setTextFont(config)</code></h3>
-说明：设置当前选中文本的字体类型；
-
-#### 参数
-1. `font` *('string')*: 必需。 设置字体 .
-#### 重要：当前环境下，当前机器必须安装设定的字体
-
-
-#### 例如：
-```js
-       //设置字体颜色
-     editor.setTextFormat({fontName:'楷体'});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="setTextBackColor"><code>设置文本的背景色 setTextBackColor(color)</code></h3>
-说明：设置当前选中文本的背景颜色；
-
-#### 参数
-1. `color` *('string')*: 必需。 设置字体 目前是支持 `rgba` 和  十六进制 ..
-
-#### 例如：
-```js
-    //设置文本背景颜色
-     editor.setTextFormat({background:'#70DB93'});
-     //rgba设置
-     editor.setTextFormat({background:'rgba(112,219,147,1)'});
-```
-<!-- /div -->
-
-<!-- div -->
-<h3 id="switchParaAlign"><code>段落文本对齐 switchParaAlign(align)</code></h3>
-说明：设置当前文本所在段落的对齐位置；
-
-#### 参数
-1. `align` *('left','center','right','justify')*: 必需。 当前行对齐位置 文本默认左对齐.
-
-#### 例如：
-```js
-    //设置段落文本居中对齐
-    editor.switchParaAlign('center')
-```
-<!-- /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, SelectionState, TableUtil, TableSplitCell} from "editor-core";
-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' : 当前编辑器，该字段调用时手动传入；
-
-#### 例如：
-```js
-    //向当前表格光标处插入
-    editor.insertTable(rows,cols);
-```
-<!-- /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 -->
-
-<h3>如果当前性别为男性，隐藏月经史数据元</h3>
-```js
- //获取文档上下文
-        const docEleCtx = this.docCtx.getCtx(this.docCtx.document);
-        //获取年龄数据元
-        const dataEle = docEleCtx.getControlById('1493477712134672386') as DataElementText;
-        //获取要隐藏的数据组
-        const dataGroup = docEleCtx.ctx.treeFind((item) => item instanceof DataElementGroupElement) as DataElementGroupElement;
-        //侦听数据元更改时间
-        dataEle.onChangeSubject.subscribe((e) => {
-            //在文档重新排版、绘制前，获取最终的指定节点的内容
-            const beforeRefreshSub = this.onBeforeRefreshDocument.subscribe((e2) => {
-                console.log('内容发生改变，隐藏数据组');
-                //获取年龄数据元输入的值
-                const age = Number.parseInt(dataEle.getValue());
-                //年龄大于20，隐藏数据元
-                dataGroup.props.hidden = age > 20;
-                //取消订阅事件
-                beforeRefreshSub.unsubscribe();
-            });
-
-        });
-```
-<h3>插入新段落</h3>
-说明：在当前段落后面插入新段落,段落的内容为当前时间
-
-```typescript
-        const {startControl} = this.selectionState;
-        if (!startControl) {
-            return;
-        }
-        //1.获取当前段落
-        const currentParagraph = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
-        //2.创建新段落对象
-        const newPara = ParagraphElement.createElement();
-        //3.创建文本对象
-        const newText = new TextGroupElement();
-        newText.text = '当前时间为' + new Date();
-        newText.props.fontName = '楷体';
-        newText.props.fontSize = 18;
-        newText.props.color = '#5b8c00';
-        //4.将文本对象追加到新段落中
-        newPara.addChild(newText);
-        //5.在当前段落后面追加新段落
-        currentParagraph.parent.addChild(newPara, currentParagraph.getIndex() + 1);
-        //6.定位光标到新段落末尾处
-        this.selectionState.resetRange(newText,-1);
-```
-<h3>插入文本数据元</h3>
-说明：在当前位置插入文本数据元
-```typescript
-const {startControl} = this.selectionState;
-        if (!startControl) {
-            return;
-        }
-        const newDataTextElement=new DataElementText();
-        newDataTextElement.props.nullText='请输入内容';
-        newDataTextElement.props.nullTextProps=new TextProps();
-        newDataTextElement.props.nullTextProps.fontSize=16;
-        newDataTextElement.props.nullTextProps.fontName='宋体';
-        newDataTextElement.props.nullTextProps.color='#ffc53d';
-        newDataTextElement.props.valueTextProps=new TextProps();
-        newDataTextElement.props.valueTextProps.fontSize=18;
-        newDataTextElement.props.valueTextProps.fontName='楷体';
-        newDataTextElement.props.valueTextProps.color='#096dd9';
-        this.insertNewElement(newDataTextElement);
-```
-<h3>修改页眉</h3>
-说明：可以批量修改所有模板的页眉
-```typescript
-        //1.获取页眉对象
-        const headerElement=this.docCtx.document.headerElement;
-
-        //2.创建新段落对象
-        const newPara = ParagraphElement.createElement();
-        //3.段落文本居中显示
-        newPara.props.textAlign='center';
-        //4.创建文本对象
-        const newText = new TextGroupElement();
-        newText.text = 'XXX人民医院病历文书';
-        newText.props.fontName = '楷体';
-        newText.props.fontSize = 28;
-        newText.props.color = '#000';
-        //5.将文本对象追加到新段落中
-        newPara.addChild(newText);
-
-        //6.清除页眉内容，并添加新内容
-        headerElement.clearItems();
-        headerElement.addChild(newPara);
-```
-<!-- 
-编辑页脚页眉
-双击页眉，body，页脚 开启是否可编辑，默认body 是可编辑；
-default 设置viewoption;
-删除数据元、删除段落、删除数据组
-条形码、二维码
-排版：标尺处理，悬挂
- -->
+### 欢迎使用电子病历编辑器