@hailin-zheng/editor-core v2.2.20

开始

• 简介
• 安装
• 引入编辑器
• 初始化编辑器
• 编辑器配置
• 数据元结构示例
• 合并病程录
• 跳转病程录
• 保存病程录
• 获取当前编辑的内容
• 获取当前选中的元素
• 获取当前选中的数据元
• 获取当前所在的段落
• 获取当前文档所有的数据元列表
• 获取选区内容的对象
• 数据组
• 段落
• 批注设置
• 留痕
• 离线打印

文档操作

• createNewDoc 新建文档
• printAllPages 打印文档
• exportPDF 导出PDF
• exportAllPagesToBase64 导出为图片
• watermark 设置水印
• copyRightInfo 设置版权
• setPaperOrient 纸张方向
• setPaperSize 纸张大小
• insertMH 插入月经史公式
• insertImage 插入图片
• appendString 对当前数据元追加内容
• setDataEleVal 设置当前数据元内容
• validate 文档校验
• selectionChanged 选区事件
• onClickEvent 单击事件
• onContextMenuItemChanged 右击事件
• onDblClickEvent 双击事件
• onScrollViewEvent 滚动事件
• onDocChangedEvent 文档变更事件
• fullPageView 全页实图模式

文字

• switchTextStyle 文字加粗
• switchTextStyle 文字斜体
• switchTextStyle 下划线
• switchTextStyle 删除线
• switchTextStyle 文本上标
• switchTextStyle 文本下标
• setTextFontSize 设置字体大小
• setTextColor 设置字体颜色
• setTextFont 设置字体类型
• setTextBackColor 设置字体背景色
• switchParaAlign 文本行的对齐方式
• setParagraphNumberType 设置当前行的项目符号

表格

• 表格操作的基本配置文件
• 表格的数据结构
• insertTable 插入表格
• insertRowBelow 向下新增行
• insertRowAbove 向上新增行
• insertColToRight 向右新增列
• insertColToLeft 向左新增列
• removeCurrRow 删除行
• removeCurrCol 删除列
• mergeCells 合并单元格
• splitCell 拆分单元格
• restoreCell 合并单元格还原
• setRowHeight 设置行高
• 调整列宽度（拖动）
• setTableCellDiagonal 对角线操作
• setTableBorderProps 边框操作
• setCellValign 表格内容对齐方式
• setCellBackground 表格背景颜色

    <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' 组件是基于监听单击（或右键）事件，触发的功能;

    // 编辑器容器文件 .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>

初始化编辑器，实例CanvasTextEditor对象，提供给子组件ref参数（docScroll, docHoldSpace, ruleCanvas, editCanvasContainer, editCanvas, editInput, editCursor, cursorWrapper）给CanvasTextEditor，获得编辑器对象。属性的修改和编辑器的方法均通过CanvasTextEditor暴露出来；

注意：这里需要引入类型 editorContextType (位于 emrComponents/code/types.ts 中)

    /** 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<EditorContenxtProps> = 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() {
    }
}

• 文本类型 数据属性示例：

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; // 字体边框
      ...
  }

• 复选框类型 数据属性示例：

class CheckBoxProps{
      ...
    size!: number;// 大小
    isChecked!: boolean; // 当前选择的状态
    groupName!: string | null; //用于复选框分组
      ...
  }

• 单选框类型 数据属性示例：

class RadioBoxProps{
      ...
    size!: number;// 大小
    isChecked!: boolean; // 当前选择的状态
      ...
  }

• 图片类型 数据属性示例：

class PictureProps{
      ...
    title!: string; // 图片名称
    width!: number; // 图片宽度
    height!: number; // 图片高度
    src!: string; // 图片地址
    border!: 'all' | 'none'; //图片边框
      ...
  }

• 日期类型 数据属性示例：

class DataEleDateProps{
      ...
    minValue?: Date; // 最大日期
    maxValue?: Date; // 最小日期
    format?: string; // 格式化
      ...
  }

• 下拉选择框类型 数据属性示例：

class DataEleCheckProps{
      ...
    size!: number; // 大小
    checked!: boolean; // 选择状态
    checkedValue: string = ''; // 选中的值
    groupName!: string; // 下拉框的组合值 
    multiSelect: boolean = false; // 是否多选
      ...
  }

病程录合并是将多个文档合并到一起，是医院记录病程录的一种特别的展示样式。 1、实例化DocumentCombine 文档合并类， 2、选择一份文档作为模板，将格式 赋给 docCombineIns.mainTemplate。docCombineIns类会 将其header 和 footer作为合并后的header 和 footer，3、调用 docCombineIns.add 方法，将 多个文档的body合并到一起，调用 docCombineIns.load() 生成合并实例， 4、调用 ElementSerialize.serialize 生成序列化的对象， 5、 调用 编辑器实例的 loadDoc 方法，根据 序列化的对象 渲染页面

注意：docCombineIns.add() 第二个要添加唯一值，用来区分不同的文档。

// 将模板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;
  }

注意：根据partId匹配JSON对象 和 数据元内容集合。

    /** 合并文档类型 保存 */
  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();

例如：

    editor.selectionState.startControl

例如：

     /** 获取数据元对象 */
    const ele = editor.getCurrentDataElement();

例如：

       /** 获取当前所在的段落 */
  getParagraph() {
    const { startControl } = this.editorData.selectionState!;
    const currPara = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
    if (currPara) {
      return currPara;
    }
  }

例如：

/** 获取病历实例集合 */
    editor.docCtx.defaultCtx.getControlInstanceList();

例如：

    editor.selectionState.selectedRange

注意：文本值在 表单编辑模式下，不能修改。

例如：

    //实例化数据组对象
    const dataGroup = new DataGroupElement();
    //插入数据组并返回光标定位点元素
    const focusPoint = editor.insertNewElement(dataGroup);
    //获取用于定位的光标元素
    const focusEle = ElementUtil.getNextSiblingElement(focusPoint);
    if (focusEle) {
      //设置光标到数据组开头
      editor.selectionState.resetRange(focusEle, 0);
    }

属性说明

    id!: string;
    name!: string;
    //是否隐藏数据组
    hidden!: boolean;

注意：

例如：

    /** 设置段落属性 */
    const setParagraph= ()=> {
      const cont = emrUtilF.getParagraph()
      if (cont) {
        cont.props.indent = 10;  // 设置字体样式
      } 
    }

注意：

例如：

        /** 插入批注 */
    editor.insertComment();

注意：需要开启留痕记录，设置显示痕迹记录，才会显示痕迹

例如：

    /**  切换审阅痕迹 */
  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);
    }
  },

例如：

    /** 离屏打印 */
  offScreenPrint(jsonData: any) {
    const documentOffscreenPrint = new DocumentPrintOffscreen();
    const doc = documentOffscreenPrint.elementReader.readElement(jsonData) as DocumentElement;
    documentOffscreenPrint.print(doc);
  }

例如：

    editorContext.editorData.editor!.viewOptions.watermark='万达信息智慧医院';

例如：

    editor.viewOptions.copyRightInfo='XXX电子病历编辑器';

参数

1. OrientType ("landscape" | "portrait"): 必需。默认 portrait. landscape 横向；portrait 纵向;

例如：

   editor.setPaperOrient(OrientType)

参数

1. width (numer): 可选。单位为毫米(mm);
2. height (numer): 可选。单位为毫米(mm);

例如：

    editor.setPaperSize(width, height)
    // setPaperSize()

参数

1. SelectionState : 必需。当前选中状态,调用时手动传入;
2. editorData : 必需。当前编辑器,调用时手动传入;
3. obj ({age:string,cycles:string,days:string,lastDate:string}): 可选。月经史公式参数;

提示：需要引入相关文件,并导入所需对象;

例如：

    //实例化月经史数据元
    const ele=new DataElementMH();
    //月经史属性赋值
    ele.props...;
    //在当前文档光标处插入对象
    editor.insertNewElement(ele);
    

提示：需要引入相关文件,并导入所需对象;

例如：

    //实例化图片对象
    const ele=new PictureElement();
    //图片对象赋值
    ele.props.src='图片地址';
    //在当前文档光标处插入对象
    editor.insertNewElement(ele);
    

参数

1. val (string): 必需。设置数据元的值;
2. SelectionState : 必需。当前选中状态,调用时手动传入;

提示：需要引入相关文件,并导入所需对象;

例如：

    //获取当前数据元
    const ele=editor.getCurrentDataElement();
    //数据元赋值
    dataEle.setValue(val);
    //重置光标到当前数据元末尾处
    selectionState.resetRange(dataEle, -1);
    

该校验是根据数据元属性的 required 属性值来判断是否做校验；数据元结构详见数据元结构示例

例如：

    editorContext.editorData.editor.validate();
    // insertImage()
    

参数

1. callBack ( function(selectionState?) ): 必需。选区事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前选中对象.

例如：

    editor.selectionChanged.subscribe(callBack)

参数

1. callBack ( function(selectionState?) ): 必需。单击事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前单击事件源.

例如：

    editor.onClickEvent.subscribe(callBack)

参数

1. callBack ( function(selectionState?) ): 必需。右击事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前右击事件源.

例如：

    editor.onContextMenuItemChanged.subscribe(callBack)

参数

1. callBack ( function(selectionState?) ): 必需。双击事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前双击事件源.

例如：

    editor.onDblClickEvent.subscribe(callBack)

参数

1. callBack ( function(selectionState?) ): 必需。滚动事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前滚动事件源.

例如：

    editor.onScrollViewEvent.subscribe(callBack)

参数

1. callBack ( function(selectionState?) ): 必需。文档变更事件触发后的回调函数.
2. selectionState (selectionState): 可选。当前文档变更事件源.

例如：

    editor.onDocChangedEvent.subscribe(callBack)

说明：设置当前页面是否为全页面视图模式 默认是 false 分页模式 ；

例如：

    editor.viewOptions.fullPageView = true;

例如：

     editor.createNewDoc();

参数

1. printRanges (Array): 可选。 要打印指定的页的下标，初始值 0，不传则全部打印.

例如：

    editor.printAllPages(printRanges);
    // 调用 printAllPages() // 打印全部;
    // 调用 printAllPages([1]) // 只打印第二页;

参数

1. docJSON (json): 必需。 导入文件的json 对象.

例如：

    editor.loadDoc(docJSON);

如果是 json 文件需要将读取的文件内容转化为json对象. 参考：

    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);
    };

参数

1. fontWeight (string): 必需。 字体操作的样式.
2. bold (string) 必需。 加粗.
3. defaultValue(string) 可选。 设置的默认值，默认为normal;

例如：

    editor.setTextFormat({fontWeight:'bold'});
    //恢复操作
    editor.setTextFormat({fontWeight:'normal'});

参数

1. fontStyle (string): 必需。 字体操作的样式.
2. italic (string) 必需。 斜体.
3. defaultValue(string) 可选。 设置的默认值，默认为normal;

例如：

    editor.setTextFormat({fontStyle:'italic'});
    //恢复默认值
    editor.setTextFormat({fontStyle:'normal'});

参数

1. underline (string): 必需。 字体操作的样式.
2. true (string) 必需。 下划线.
3. false(string) 可选。 设置的默认值，默认为false;

例如：

    //设置下划线
    editor.setTextFormat({underline:true});
    //恢复默认值
    editor.setTextFormat({underline:false});

参数

1. linethrough (string): 必需。 字体操作的样式.
2. true (boolean) 必需。 下划线.
3. false(boolean) 可选。 设置的默认值，默认为false;

例如：

    //设置删除线
    editor.setTextFormat({linethrough:true});
    //恢复默认值
    editor.setTextFormat({linethrough:false});

参数

1. style ('vertAlign'): 必需。 字体操作的样式.
2. matchValue ('superscript') 必需。 上标.

例如：

    //设置上标
    editor.setTextFormat({vertAlign:'superscript'});
    //恢复默认值
    editor.setTextFormat({vertAlign:null});

参数

1. style ('vertAlign'): 必需。 字体操作的样式.
2. matchValue ('subscript') 必需。 上标.

例如：

    //设置下标
    editor.setTextFormat({vertAlign:'subscript'});
    //恢复默认值
    editor.setTextFormat({vertAlign:null});

参数

1. fontSize ('number'): 必需。 设置字体大小.单位像素

例如：

    editor.setTextFormat({fontSize:16});

参数

1. color ('string'): 必需。 设置字体颜色 目前是支持 rgba 和 十六进制 .

例如：

    //设置字体颜色
     editor.setTextFormat({color:'#70DB93'});
     //rgba设置
     editor.setTextFormat({color:'rgba(112,219,147,1)'});

参数

1. font ('string'): 必需。 设置字体 .

重要：当前环境下，当前机器必须安装设定的字体

例如：

       //设置字体颜色
     editor.setTextFormat({fontName:'楷体'});

参数

1. color ('string'): 必需。 设置字体 目前是支持 rgba 和 十六进制 ..

例如：

    //设置文本背景颜色
     editor.setTextFormat({background:'#70DB93'});
     //rgba设置
     editor.setTextFormat({background:'rgba(112,219,147,1)'});

参数

1. align ('left','center','right','justify'): 必需。 当前行对齐位置 文本默认左对齐.

例如：

    //设置段落文本居中对齐
    editor.switchParaAlign('center')

设计模式、只读模式、表单模式

格式刷

例如：

    const exportPDF = () => {
      editorContext.editorData.editor!.exportPDF();
    };
    // 调用 exportPDF()

参数

1. pthotoName (string): 必需。 导出图片的名称.

例如：

    const exportPhoto = (pthotoName)=>{
      editorContext.editorData.editor!.exportAllPagesToBase64(pthotoName);
    }
    // 调用 exportPhoto('test')

例如：

    const setParagraphNumberType = () => {
      editorContext.editorData.editor!.setParagraphNumberType();
    };
    // 调用 setParagraphNumberType();

重要 所有的表格操作，都要基于下面的引入文件

// 表格操作 所需要文件；
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;
    ...

表格的数据结构（JSON、table\row\cell）

    // 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"
                            }
                        ]
                    }
                ]
            }
        ]
    }

参数

1. 'row' （number）: 插入表格行数；
2. 'col' （number）: 插入表格列数；
3. 'editor' : 当前编辑器，该字段调用时手动传入；

例如：

    //向当前表格光标处插入
    editor.insertTable(rows,cols);

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const insertRowBelow = () => {
      emrExtraF.insertRowBelow(getSelectionState())
    };
    // insertRowBelow()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const insertRowAbove = () => {
      emrExtraF.insertRowAbove(getSelectionState())
    };
    // insertRowAbove()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const insertColToRight = () => {
      emrExtraF.insertColToRight(getSelectionState())
    };
    // insertColToRight()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const insertColToLeft = () => {
      emrExtraF.insertColToLeft(getSelectionState())
    };
    // insertColToLeft()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const removeCurrRow = () => {
      TableUtil.removeCurrRow(getSelectionState());
    };
    // removeCurrRow()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const removeCurrCol = () => {
      TableUtil.removeCurrCol(getSelectionState());
    };
    // removeCurrCol()

参数

1. 'getSelectionState' 当前光标选中的状态；

例如：

    const mergeCells = () => {
      TableUtil.mergeCells(getSelectionState());
    };
    // mergeCells()

参数

1. 'getSelectionState' 当前光标的状态；

例如：

    const splitCell = () => {
      TableSplitCell.splitCell(selectionState(), 0, 2)
    };
    // splitCell()

参数

1. 'getSelectionState' 当前光标的状态；

例如：

    const restoreCell = () => {
      TableSplitCell.restoreCell(selectionState())
    };
    // restoreCell()

参数

1. 'getSelectionState' 当前光标选中的状态；
2. 'rowHeight' （number）: 行高值 默认值为20；

例如：

    const setRowHeight = () => {
      TableUtil.setRowHeight(getSelectionState(), rowHeight=20);
    };
    // setRowHeight()

参数

1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
2. 'diagonal' （"main" | "sub" | ''）: main 主对角线 sub 副对角线 '' 删除对角线;

例如：

    const setTableCellDiagonal = (diagonal) => {
      TableUtil.setTableCellDiagonal(getSelectionState(), diagonal);
    };
    // setTableCellDiagonal()

参数

1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
2. 'diagonal' ("all" | "none"): all 有边框; none 无边框;

例如：

    const setTableBorderProps = (diagonal) => {
      TableUtil.setTableBorderProps(getSelectionState(), diagonal);
    };
    // setTableBorderProps()

参数

1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
2. 'diagonal' ("top" | "middle" |"bottom"): top 顶部对齐; middle 居中对齐; bottom 底部对齐;

例如：

    const setCellValign = (diagonal) => {
      TableUtil.setCellValign(getSelectionState(), diagonal);
    };
    // setCellValign()

参数

1. 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入；
2. 'diagonal' (string): 背景颜色 支持rgba 和十六进制;

例如：

    const setCellBackground = (color) => {
      TableUtil.setCellBackground(getSelectionState(), color);
    };
    // setCellBackground()

    });

<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);

    //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;
删除数据元、删除段落、删除数据组
条形码、二维码
排版：标尺处理，悬挂
 -->