2.2.44 • Published 11 months ago

@hailin-zheng/editor-core v2.2.44

Weekly downloads
-
License
ISC
Repository
-
Last release
11 months ago

开始

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

文档操作

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

1 year ago

2.2.39

1 year ago

2.2.37

1 year ago

2.2.38

1 year ago

2.2.35

1 year ago

2.2.36

1 year ago

2.2.33

1 year ago

2.2.34

1 year ago

2.2.31

1 year ago

2.2.32

1 year ago

2.2.30

1 year ago

2.2.44

11 months ago

2.2.42

12 months ago

2.2.43

12 months ago

2.2.40

1 year ago

2.2.41

12 months ago

2.2.28

1 year ago

2.2.27

1 year ago

2.2.26

1 year ago

2.2.24

1 year ago

2.2.25

1 year ago

2.2.23

1 year ago

2.2.22

1 year ago

2.2.21

1 year ago

2.2.17

1 year ago

2.2.18

1 year ago

2.2.19

1 year ago

2.2.20

1 year ago

2.2.15

1 year ago

2.2.16

1 year ago

2.2.14

1 year ago

2.2.13

1 year ago

2.2.11

1 year ago

2.2.12

1 year ago

2.2.10

1 year ago

2.2.9

1 year ago

2.2.8

1 year ago

2.2.7

1 year ago

2.2.5

1 year ago

2.2.6

1 year ago

2.2.4

1 year ago

2.2.3

1 year ago

2.2.2

1 year ago

2.2.1

1 year ago

2.1.28

1 year ago

2.2.0

1 year ago

2.1.27

1 year ago

2.1.26

1 year ago

2.1.25

1 year ago

2.1.23

2 years ago

2.1.22

2 years ago

2.1.21

2 years ago

2.1.17

2 years ago

2.1.18

2 years ago

2.1.19

2 years ago

2.1.20

2 years ago

2.1.16

2 years ago

2.1.14

2 years ago

2.1.15

2 years ago

2.1.12

2 years ago

2.1.13

2 years ago

2.0.28

2 years ago

2.0.29

2 years ago

2.0.37

2 years ago

2.0.38

2 years ago

2.0.35

2 years ago

2.0.36

2 years ago

2.0.33

2 years ago

2.0.34

2 years ago

2.0.31

2 years ago

2.0.32

2 years ago

2.0.30

2 years ago

2.1.9

2 years ago

2.0.39

2 years ago

2.0.48

2 years ago

2.0.49

2 years ago

2.0.46

2 years ago

2.0.47

2 years ago

2.0.44

2 years ago

2.0.45

2 years ago

2.1.10

2 years ago

2.0.42

2 years ago

2.1.11

2 years ago

2.0.43

2 years ago

2.0.40

2 years ago

2.0.41

2 years ago

2.0.53

2 years ago

2.0.54

2 years ago

2.0.51

2 years ago

2.0.52

2 years ago

2.0.50

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

2.0.19

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

2 years ago

2.0.25

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

1.1.29

3 years ago

1.1.28

3 years ago

1.1.30

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.23

3 years ago

1.1.22

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.24

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.0.62

3 years ago

1.0.61

3 years ago

1.0.60

3 years ago

1.0.48

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.45

3 years ago

1.0.49

3 years ago

1.0.51

3 years ago

1.0.50

3 years ago

1.0.55

3 years ago

1.0.54

3 years ago

1.0.53

3 years ago

1.0.52

3 years ago

1.0.58

3 years ago

1.0.57

3 years ago

1.0.56

3 years ago

1.0.44

3 years ago

1.0.43

3 years ago

1.0.42

3 years ago

1.0.41

3 years ago

1.0.40

3 years ago

1.0.39

3 years ago

1.0.38

3 years ago

1.0.37

3 years ago

1.0.36

3 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.18

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago