@hailin-zheng/editor-core v2.2.44
开始
- 简介
- 安装
- 引入编辑器
- 初始化编辑器
- 编辑器配置
- 数据元结构示例
- 合并病程录
- 跳转病程录
- 保存病程录
- 获取当前编辑的内容
- 获取当前选中的元素
- 获取当前选中的数据元
- 获取当前所在的段落
- 获取当前文档所有的数据元列表
- 获取选区内容的对象
- 数据组
- 段落
- 批注设置
- 留痕
- 离线打印
文档操作
- 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电子病历编辑器';
参数
OrientType
("landscape" | "portrait"): 必需。默认portrait
.landscape
横向;portrait
纵向;
例如:
editor.setPaperOrient(OrientType)
参数
width
(numer): 可选。单位为毫米(mm);height
(numer): 可选。单位为毫米(mm);
例如:
editor.setPaperSize(width, height)
// setPaperSize()
参数
SelectionState
: 必需。当前选中状态,调用时手动传入;editorData
: 必需。当前编辑器,调用时手动传入;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);
参数
val
(string): 必需。设置数据元的值;SelectionState
: 必需。当前选中状态,调用时手动传入;
提示:需要引入相关文件,并导入所需对象;
例如:
//获取当前数据元
const ele=editor.getCurrentDataElement();
//数据元赋值
dataEle.setValue(val);
//重置光标到当前数据元末尾处
selectionState.resetRange(dataEle, -1);
该校验是根据数据元属性的
required
属性值来判断是否做校验;数据元结构详见数据元结构示例
例如:
editorContext.editorData.editor.validate();
// insertImage()
参数
callBack
( function(selectionState?) ): 必需。选区事件触发后的回调函数.selectionState
(selectionState): 可选。当前选中对象.
例如:
editor.selectionChanged.subscribe(callBack)
参数
callBack
( function(selectionState?) ): 必需。单击事件触发后的回调函数.selectionState
(selectionState): 可选。当前单击事件源.
例如:
editor.onClickEvent.subscribe(callBack)
参数
callBack
( function(selectionState?) ): 必需。右击事件触发后的回调函数.selectionState
(selectionState): 可选。当前右击事件源.
例如:
editor.onContextMenuItemChanged.subscribe(callBack)
参数
callBack
( function(selectionState?) ): 必需。双击事件触发后的回调函数.selectionState
(selectionState): 可选。当前双击事件源.
例如:
editor.onDblClickEvent.subscribe(callBack)
参数
callBack
( function(selectionState?) ): 必需。滚动事件触发后的回调函数.selectionState
(selectionState): 可选。当前滚动事件源.
例如:
editor.onScrollViewEvent.subscribe(callBack)
参数
callBack
( function(selectionState?) ): 必需。文档变更事件触发后的回调函数.selectionState
(selectionState): 可选。当前文档变更事件源.
例如:
editor.onDocChangedEvent.subscribe(callBack)
说明:设置当前页面是否为全页面视图模式 默认是 false
分页模式 ;
例如:
editor.viewOptions.fullPageView = true;
例如:
editor.createNewDoc();
参数
printRanges
(Array): 可选。 要打印指定的页的下标,初始值 0,不传则全部打印.
例如:
editor.printAllPages(printRanges);
// 调用 printAllPages() // 打印全部;
// 调用 printAllPages([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);
};
参数
fontWeight
(string): 必需。 字体操作的样式.bold
(string) 必需。 加粗.defaultValue
(string) 可选。 设置的默认值,默认为normal
;
例如:
editor.setTextFormat({fontWeight:'bold'});
//恢复操作
editor.setTextFormat({fontWeight:'normal'});
参数
fontStyle
(string): 必需。 字体操作的样式.italic
(string) 必需。 斜体.defaultValue
(string) 可选。 设置的默认值,默认为normal
;
例如:
editor.setTextFormat({fontStyle:'italic'});
//恢复默认值
editor.setTextFormat({fontStyle:'normal'});
参数
underline
(string): 必需。 字体操作的样式.true
(string) 必需。 下划线.false
(string) 可选。 设置的默认值,默认为false
;
例如:
//设置下划线
editor.setTextFormat({underline:true});
//恢复默认值
editor.setTextFormat({underline:false});
参数
linethrough
(string): 必需。 字体操作的样式.true
(boolean) 必需。 下划线.false
(boolean) 可选。 设置的默认值,默认为false
;
例如:
//设置删除线
editor.setTextFormat({linethrough:true});
//恢复默认值
editor.setTextFormat({linethrough:false});
参数
style
('vertAlign'): 必需。 字体操作的样式.matchValue
('superscript') 必需。 上标.
例如:
//设置上标
editor.setTextFormat({vertAlign:'superscript'});
//恢复默认值
editor.setTextFormat({vertAlign:null});
参数
style
('vertAlign'): 必需。 字体操作的样式.matchValue
('subscript') 必需。 上标.
例如:
//设置下标
editor.setTextFormat({vertAlign:'subscript'});
//恢复默认值
editor.setTextFormat({vertAlign:null});
参数
fontSize
('number'): 必需。 设置字体大小.单位像素
例如:
editor.setTextFormat({fontSize:16});
参数
color
('string'): 必需。 设置字体颜色 目前是支持rgba
和 十六进制 .
例如:
//设置字体颜色
editor.setTextFormat({color:'#70DB93'});
//rgba设置
editor.setTextFormat({color:'rgba(112,219,147,1)'});
参数
font
('string'): 必需。 设置字体 .
重要:当前环境下,当前机器必须安装设定的字体
例如:
//设置字体颜色
editor.setTextFormat({fontName:'楷体'});
参数
color
('string'): 必需。 设置字体 目前是支持rgba
和 十六进制 ..
例如:
//设置文本背景颜色
editor.setTextFormat({background:'#70DB93'});
//rgba设置
editor.setTextFormat({background:'rgba(112,219,147,1)'});
参数
align
('left','center','right','justify'): 必需。 当前行对齐位置 文本默认左对齐.
例如:
//设置段落文本居中对齐
editor.switchParaAlign('center')
设计模式、只读模式、表单模式
格式刷
例如:
const exportPDF = () => {
editorContext.editorData.editor!.exportPDF();
};
// 调用 exportPDF()
参数
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"
}
]
}
]
}
]
}
参数
- 'row' (number): 插入表格行数;
- 'col' (number): 插入表格列数;
- 'editor' : 当前编辑器,该字段调用时手动传入;
例如:
//向当前表格光标处插入
editor.insertTable(rows,cols);
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const insertRowBelow = () => {
emrExtraF.insertRowBelow(getSelectionState())
};
// insertRowBelow()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const insertRowAbove = () => {
emrExtraF.insertRowAbove(getSelectionState())
};
// insertRowAbove()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const insertColToRight = () => {
emrExtraF.insertColToRight(getSelectionState())
};
// insertColToRight()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const insertColToLeft = () => {
emrExtraF.insertColToLeft(getSelectionState())
};
// insertColToLeft()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const removeCurrRow = () => {
TableUtil.removeCurrRow(getSelectionState());
};
// removeCurrRow()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const removeCurrCol = () => {
TableUtil.removeCurrCol(getSelectionState());
};
// removeCurrCol()
参数
- 'getSelectionState' 当前光标选中的状态;
例如:
const mergeCells = () => {
TableUtil.mergeCells(getSelectionState());
};
// mergeCells()
参数
- 'getSelectionState' 当前光标的状态;
例如:
const splitCell = () => {
TableSplitCell.splitCell(selectionState(), 0, 2)
};
// splitCell()
参数
- 'getSelectionState' 当前光标的状态;
例如:
const restoreCell = () => {
TableSplitCell.restoreCell(selectionState())
};
// restoreCell()
参数
- 'getSelectionState' 当前光标选中的状态;
- 'rowHeight' (number): 行高值 默认值为20;
例如:
const setRowHeight = () => {
TableUtil.setRowHeight(getSelectionState(), rowHeight=20);
};
// setRowHeight()
参数
- 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入;
- 'diagonal' ("main" | "sub" | ''):
main
主对角线sub
副对角线''
删除对角线;
例如:
const setTableCellDiagonal = (diagonal) => {
TableUtil.setTableCellDiagonal(getSelectionState(), diagonal);
};
// setTableCellDiagonal()
参数
- 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入;
- 'diagonal' ("all" | "none"):
all
有边框;none
无边框;
例如:
const setTableBorderProps = (diagonal) => {
TableUtil.setTableBorderProps(getSelectionState(), diagonal);
};
// setTableBorderProps()
参数
- 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入;
- 'diagonal' ("top" | "middle" |"bottom"):
top
顶部对齐;middle
居中对齐;bottom
底部对齐;
例如:
const setCellValign = (diagonal) => {
TableUtil.setCellValign(getSelectionState(), diagonal);
};
// setCellValign()
参数
- 'getSelectionState' 当前光标选中的状态 该字段调用时手动传入;
- '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;
删除数据元、删除段落、删除数据组
条形码、二维码
排版:标尺处理,悬挂
-->
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago