跳至主要內容

配置

大约 6 分钟

更新记录

  • Ver1.0-20241124 增加了 userProperty, 支持用户给组件添加自定义附加属性,如 userProperty:{'de_code':'卫生标准编码','prov_domain':'省平台字段'}
  • Ver1.0-20240901 增加了 dataSource.server, 支持数据源服务器配置前缀地址,如 editor.option.dataSource.server = "https://www.x-emr.cn:80/api"
  • Ver1.0-20240818 增加了 reversionStyle:[...], 支持为不同级别用户配置修订样式。
  • Ver1.0-20240627 增加了 fitWidth,添加了文档加载后是否自动适应编辑器宽度。
  • Ver1.0-20240426 增加了 defaultFont,添加了文档默认字体,不设置的情况下使用“宋体”。
  • Ver1.0-20240128 增加了 propertySelector,添加了属性候选下拉列表及数据过滤函数。
  • Ver1.0-20240128 修改了 dynamicList,添加了全局动态数据源及数据过滤处理函数。
  • Ver1.0-20240115 删除了 baseUrl,第三方JS可以在editor.html中引用。
  • Ver1.0-20240114 增加了 userToolMenu 用户自定义工具菜单及事件处理
  • Ver1.0-20240112 增加了 treeFilteritemFilter 用户自定义知识库数据处理函数,参考知识库;
  • Ver1.0-20240110 增加了 userContextMenu 用户自定义右键菜单及事件处理
  • Ver1.0-20240106 增加了 fonts
  • Ver1.0-20240102 增加了 fieldMinWidthfieldMaxWidth
  • Ver1.0-20231223 增加了 directPrintUrl: 'http://127.0.0.1:2023/print/' 直接打印请求地址配置项;
  • Ver1.0-20231217 删除了 editor.option.enabeUserPaste 无浏览器剪切板权限时,自动使用浏览器存储交换粘贴数据;
  • Ver1.0-20231215 增加了 editor.option.control;
  • Ver1.0-20231211 增加了 editor.option.dictSetting.labelAlign;
  • Ver1.0-20231211 修改了 editor.option.withDictLabeleditor.option.dictSetting.withLabel;
  • Ver1.0-20231130 增加了 userImageUrl;
  • Ver1.0-20231124 修改为异步初始化编辑器 editor.init(option).then();
  • Ver1.0-20231124 增加了 enabeUserPaste:'auto';
  • Ver1.0-20231116 增加了 dataSource:{dynamicListUrl: '' };
  • Ver1.0-20231109 修改了 dictionary 相关配置方式,参考知识库;

基础配置

不需配置所项目,会使用默认设置

let option = {
     license: 'xxxxxxxxxxxx', //授权码(错误授权码或授权码过期后会影响病历打印功能)
     container:'#editor',     //编辑器容器对象ID
}

//追加配置也可以使用以下示例代码方式
option.toolbar = {file: false}
option.userContextMenu =  [...]

//编辑器初始化
editor.init(option).then(()=>{
    //初始化完成后,进行文档操作
    editor.loadUrl('./doc/xxxx.html')
})

打印配置

let option = {
    pdfUrl:'https://www.x-emr.cn/pdf/post',       //pdf生成服务(可修改为本地路径)
    directPrintUrl: 'http://127.0.0.1:2023/print/'//直接打印请求地址配置项
}

//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

工具栏开关

let option = {
    toolbar : {             //隐藏工具栏 :toolbar: false
        file: true,         //显示文件
        edit: true,         //显示编辑
        insert: true,       //显示插入
        expression: true,   //显示表达式
        table: true,        //显示表格
        revision: true,     //显示修订
        view: true,         //显示查看
        print: true,        //显示打印
        import: true,       //显示导入
        export: true,       //显示导出
        develop: true,      //显示开发工具
        help: true          //显示帮助
    },
    toolButton : true,      //是否显示工具按钮
    statusbar : true,       //是否显示状态栏
    disableCommand:['template','save'],  //屏蔽文档命令,同时隐藏命令对应工具栏按钮
}

//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

模板工具开关

let option = {
    property: true, //组件属性是否显示
    structure: true, //数据结构是否显示
    dictionary:false //知识库是否显示
}

组件附加属性

//如下示例,导出元数据时也会附带以下属性
let option = {
    userProperty:{
        'de_code':'卫生标准编码', 
        'prov_domain':'省平台字段'
    }
}

自定义菜单

let option = {
    //用户定义工具菜单
    userToolMenu:[
        {   
            id: 'file', //指定工具栏分类,参考工具栏开关列表
            children: [{cmd:'saveToServer', title:'自定义', icon: 'icon-submit'}]
        },
        {   
            id: 'userMenu1', title:'用户菜单', //定义其他名称则单独分类
            children: [{cmd:'userCommand', title:'自定义', icon: 'icon-submit'}]
        }
    ],
  }
//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

//处理命令示例
editor.on('saveToServer',(e) =>{
    //用户代码
})

//处理命令示例
editor.on('userMenu1',(e) =>{
    //用户代码
})

自定义右键

let option = {
    //自定义右键菜单示例
    userContextMenu:[
        {cmd: '-', mode:'form'}, //菜单分割符号
        {cmd:'saveAs', prefix:'field.title', //附加当前输入域描述,如主诉
           title: '另存为...', icon:'icon-fragment', mode:'form'
        }, 
        {cmd:'savefragment', //无附加描述
            title: '选中片段存为...', icon:'icon-fragment', mode:'form'}, 
        {title: '引用片段', icon:'icon-paste', mode:'form', 
            children:[ //子菜单
                {cmd:'complaint', title: '患者主诉', icon:'icon-text'},
                {cmd:'allergy', title: '患者过敏史', icon:'icon-text'},
                {cmd:'illness', title: '患者现病史', icon:'icon-text'}
            ]
        }
    ]
  }
//编辑器初始化
editor.init(option).then(()=>{
    //初始化完成后,进行文档操作
    editor.loadUrl('./doc/xxxx.html')
})

//处理菜单命令示例
//另存为
editor.on('saveAs',(e) =>{
    //获取当前光标处的输入域元素
    let field = editor.control.getFocusField()
    editor.showDialog(field.innerHTML, '选中输入域内容')
})

//选中片段存为
editor.on('savefragment',(e) =>{
    //获取选中区域的HTML和TXT字符串
    let data = editor.getFragment()
    editor.showDialog("HTML:"+ data.html + " Text:"+ data.text, '自定义菜单测试')
})

//引用患者主诉
editor.on('complaint',(e) =>{   
    //插入用户接口返回内容
    editor.control.insertHTML('插入用户主诉自定义模板...')
})

自定义修订样式


//默认修订样式
reversionStyle:[
    {added:'color:blue;text-decoration-style:solid;', removed: 'color:red;text-decoration-style:solid;'}, //用户级别0
    {added:'color:blue;text-decoration-style:double;', removed: 'color:red;text-decoration-style:double;'}, //用户级别1
    {added:'color:blue;text-decoration-style:wavy;', removed: 'color:red;text-decoration-style:wavy;'}, //用户级别2
]


//用户级别示例
editor.user = {
    name:'唐晓明主任'
    level:1
}

自定义字体

let option = {
   fonts:['-', 'PingFang SC''草书'], //自定义字体 可加入 '-' 作为分割线 
}

//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

自定义图片工具

let option = {
    userImageUrl:[ //用户自定义图片工具图标列表,可以拖动到图片中。(图片URL为同一域名下或支持跨域)
        {url: './asset/x.svg', lable:'删除'},
        {url: './asset/check.svg', lable:'选择'},
        {url: './asset/delete.svg', lable:'禁止'}
    ],
}

//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

打印分页控制

let option = {
    paging{
        splitTR:true //默认true, 如果打印医嘱时需要每行医嘱内容打印到同一页上,打印前设置为false
        startPage: { //续打页配置
            hideFooter: true, //隐藏续打页的页脚
            hideTableBorder: true //隐藏续打页的表格边框
        }
    }
}

全局控件风格

let option = {
        control: { //控件配置
            fieldPrefix:'field_', //ID前缀
            fieldBorderBottomStyle: '', //输入域底边框风格 solid dashed dotted
            fieldBackgroundColor:'#eff', //输入域背景色
            fieldFocusColor:'#fef', // 输入域活动背景色
            fieldMinWidth: '',   //最小宽度 例如:200px
            fieldMaxWidth: '',   //最大宽度
        },
}

//编辑器初始化
editor.init(option).then(()=>{
    //用户代码
})

全局数据源

let option = {
    dataSource:{ //数据源配置
        server:'', //数据源的后台服务器地址,如 https://www.x-emr.cn:80/api
        propertySelector:{ //属性候选下拉列表
            url:'/property.json', //默认为空
            filter: function(data){ return data } //自定义数据处理函数
        }, 
        dynamicList: {//动态下拉框数据源全局默认配置
            url: '/icd.json',  //默认为空
            filter: function(data){ return data } //自定义数据处理函数
        },
        selector: {//词条选择器
            url: '',  //默认URL
            filter: function(data){ return data } //自定义数据处理函数
        }
    }
}

复制粘贴

//需要禁止用户复制粘贴当前患者的病历,可以动态设置当前病历的 editor.option.enableCopy = false; editor.option.enablePaste =false;
let option = {
    enableCopy: true,       //默认允许复制&剪切
    enablePaste: true,      //默认允许粘贴
}

其他配置

let option = {
    lang:'zh-cn',            //语言 zh-cn 简体中文(默认), zh-tw 繁体中文
                             //en-us 英文, zh-bo: 藏文, zh-ug:维吾尔文
    mode:'form',             //readonly:只读模式 ,form:表单模式,design:设计模式
    scale: .9,               //缩放比例
    tag: false,              //标签开关
    revision: false,         //修订开关
    remark: false,           //批注开关
    fitWidth: false,         //是否适应宽度
    showPageLine: true,      //是否显示分页线
    defaultFont: '宋体',     //文档默认字体
}