【SoDiaoEditor电子病历编辑器更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们
为什么推荐的人这么少~~~~
更新(2017-4-18):
截止目前已知的已有2个三甲医院在使用该编辑器,容我内心澎湃以下,O(∩_∩)O哈哈~
先放github地址:https://github.com/tlzzu/SoDiaoEditor.v2
首先,这不是愚人节的玩笑,,,
本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖到了愚人节这天。
我是个追求完美的人,这点认识我的人,都能够从我的相貌中看出来。
转眼五个月过去了,期间不断有人发来邮件进行鼓励,并在不打赏的情况下厚着脸皮的来问我什么时候进行下一版的更新!
静下心来,再次翻看原来的病历编辑器发现了几个问题:
- 当我想添加扩展时,卧槽,没留位置,不能扩展;
- 当性能出问题时,卧槽,代码不清晰,不好排查;
- 当要解决bug时,卧槽,code分布太多,改死狗;
- 当其他人拿出code问我时,卧槽,这不是我写的code吧…
我焦虑了,code跟屎一样,怎么可能是我这么优秀的人写出来的?
“算了谁没个过去啊”就这样我先原谅了自己。
然后举着充满老茧的右手起誓:
新的版本中
- ta必须能够扩展;
- ta必须容易使用;
- ta必须考虑兼容性;
- ta性能必须足够优化;
- ta设计必须足够合理;
所以就只能重构了。
当然对比之前版本的优势还是很明显的:
- 接口更加简洁
- 可扩展性更高
- 框架调整,为后续更新发力
- ...(想好再补充)
未来希望增加图像控件,体温的这些。
老版本模板如果要升级现有版本:
- 模板中的样式去掉tl-改成sde-
- 模板中去除所有click绑定
以下为github中内容:
SoDiaoEditor.v2
预览(国外站点打开会比较慢,请耐心等待,或者自己下载过来在本地打开)
建议给病历模板设计者(开发人员,或者科主任)使用。
可用来设计电子病历模板,也可以当做电子病历编辑器使用。
此时输入的值可利用SDE对象暴露出的接口获取。
建议给医生使用。
此时医生可以在原有模板中添加已有的控件,也可以给科主任用来设计模板。
亦可通过SDE对象暴露出来的接口获取数据。
建议该模式给医生查看使用,在该模式下电子病历中所有控件均不可编辑。
按钮通过事件控制!
建议给医生使用,此模式下医生只能编辑控件中的值,其余均不可修改。
该模式只允许查看,控件不可被编辑。
按钮通过事件控制!
更新
本次更新以下内容:
- 新增以下toolbar:
编辑 i. 剪切板 1. 复制、粘贴、切剪 ii. 字体 1. 字体、字号、增大字体、缩小字体 插入 i. 字符 ii. 链接 1. 取消链接 iii. 图片 1. 图片、涂鸦(蛮好用的你可以试试) iv. 表格 表格 i. 表格 1. 插入表格
- 设计器中新增SED对象
- 修复事件兼容性(暂不支持IE8及其以下的浏览器,后续会有解决方案)
- 增加toolbar可配置性。
- 解决上一个版本中的bug。
- 等
结构
data 模拟异步请求的数据,正式项目中可忽略
dialogs 扩展百度ueditor的dialogs
dist 核心js文件
js
sde.design.js SoDiaoEditor设计器核心js
sde.editor.js SoDiaoEditor编辑器核心js
example 一些demo
ueditor 百度ueditor库,可替换成自己版本
sde.config.js 核心配置文件
使用
电子病历设计器:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>设计模式--电子病历设计器</title> <!-- 注意以下各脚本之间的加载顺序! --> <script type="text/javascript" src="sde.config.js"></script> <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css" /> <script type="text/javascript" src="ueditor/ueditor.all.js"></script> <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="dist/js/sde.design.js"></script> </head> <body> <script id="myEditor" type="text/plain" style="width:680px;height:1000px;"> 病历模板... </script> <script type="text/javascript"> window.onload = function() { var sde = new SDE({ id: "myEditor", title: '<div style="height: 45px;overflow: hidden;">' + '<div class="left" style="position:absolute;top:0;left:0;">' + '<img src="../data/img/SoDiaoL.png" style="height:35px;margin:5px;border:none;" />' + '</div>' + '<h1 style="font-size: 14px;height: 45px;line-height: 45px;margin: 0 auto;text-align: center;font-weight: normal;color:#fff;" >SoDiaoEditor电子病历编辑器</h1>' + '</div>', //自定义title
toolbars: {
'sde-toolbar-file': 'file',
'sde-toolbar-editor': ['history', 'clipboard', 'fonts', 'paragraphs', 'styles'],
'sde-toolbar-insert': ['horizontal', 'spechars', 'link', 'img', 'map', 'code', 'table', 'formula', 'comment'],
'sde-toolbar-tables': ['table', 'blockmergecells'],
'sde-toolbar-views': ['directory', 'showcomment', 'preview'],
'sde-toolbar-tools': ['drafts', 'print', 'searchreplace', 'wordcount'],
'sde-toolbar-records': ['sdetemplate', 'sdecontrols'],
}//可自行删减
}); }; </script> </body> </html>
注意:
各个脚本之间的加载顺序,已本例为准。 配置项(sde.config.js):
/* 默认配置项 */ (function() { var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /* SDE_CONFIG 配置项 */ window.SDE_CONFIG = { HOME_URL: URL, HOME_URL_DIALOGS: URL + 'dialogs/',//SoDiaoEditor扩展ueditor的dialogs位置 EDITOR_URL: URL + 'dist/js/sde.editor.js', MODE: "DESIGN", //DESIGN:设计|EDITOR:编辑|READONLY:只读(所有节点都不可编辑) CONTROL_TEMPLATES: []//控件模板 }; /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { UEDITOR_HOME_URL: URL + 'ueditor/', //为编辑器实例添加一个路径,这个不能被注释 serverUrl: URL + "data/config.json", //URL + "net/controller.ashx", // 服务器统一请求接口路径 toolbars: [], //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义 autoClearinitialContent: false, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了 //iframeJsUrl: URL + window.SDE_CONFIG.EDITOR_URL + '?temp=' + new Date().getTime(), //给编辑区域的iframe引入一个js文件 // iframeCssUrl: URL + 'EMR/css/default.css?temp=' + new Date().getTime(), //给编辑区域的iframe引入一个css文件 allowDivTransToP: false, //允许进入编辑器的div标签自动变成p标签 wordCount: false, //关闭字数统计 elementPathEnabled: false, //关闭elementPath autoClearinitialContent: false }; function getUEBasePath(docUrl, confUrl) { return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath()); } function getConfigFilePath() { var configPath = document.getElementsByTagName('script'); return configPath[configPath.length - 1].src; } function getBasePath(docUrl, confUrl) { var basePath = confUrl; if (/^(\/|\\\\)/.test(confUrl)) { basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, ''); } else if (!/^[a-z]+:/i.test(confUrl)) { docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, ''); basePath = docUrl + "" + confUrl; } return optimizationPath(basePath); } function optimizationPath(path) { var protocol = /^[a-z]+:\/\//.exec(path)[0], tmp = null, res = []; path = path.replace(protocol, "").split("?")[0].split("#")[0]; path = path.replace(/\\/g, '/').split(/\//); path[path.length - 1] = ""; while (path.length) { if ((tmp = path.shift()) === "..") { res.pop(); } else if (tmp !== ".") { res.push(tmp); } } return protocol + res.join("/"); } window.UE = { getUEBasePath: getUEBasePath }; })();
注意:
请重点关注window.SDE_CONFIG 和 window.UEDITOR_CONFIG 。 建议window.UEDITOR_CONFIG不要修改,可根据需求该window.SDE_CONFIG对象
电子病历编辑器:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>编辑模式--电子病历编辑器</title> <script type="text/javascript" src="dist/js/sde.editor.js"></script> </head> <body> <div id="myEditor" style="width:680px;height:1000px;margin:0 auto;"> 病历内容... </div> <script type="text/javascript"> window.onload = function() { var sde = new SDE({ id: "myEditor", title: '<div style="height: 45px;overflow: hidden;">' + '<div class="left" style="position:absolute;top:0;left:0;">' + '<img src="../data/img/SoDiaoL.png" style="height:35px;margin:5px;border:none;" />' + '</div>' + '<h1 style="font-size: 14px;height: 45px;line-height: 45px;margin: 0 auto;text-align: center;font-weight: normal;color:#fff;" >SoDiaoEditor电子病历编辑器</h1>' + '</div>', //自定义title mode: 'EDITOR'//配置模式 }); }; </script> </body> </html>
文档
电子病历设计器:
方法 | 说明 | 描述 |
---|---|---|
ready(function(){}) | 编辑器加载完成 | (之后的所有方法必须在ready加载完成后使用) |
html([html]) | 获取/设置所有编辑器中的html模板 | 如果html不传递,则为获取,有值则为设置 |
getControl([id]) | 获取编辑器中的控件 | id为可选,若为无则是获取所有控件 |
setControl(ctl) | 设置编辑器中指定id的控件值 | ctl:{ID:'',VALUE:''}如果是select控件类型ctl:{ID:'',VALUE:'',TEXT:''}。ctl可以为数组也可以为对象,设置冻结REQUIRED:1为冻结,只读不可操作 |
setMode(mode) | 设置编辑器模式 | mode可选:DESIGN(设计)、EDITOR(编辑)、READONLY(只读) |
电子病历编辑器:
方法 | 说明 | 描述 |
---|---|---|
getControl([id]) | 获取编辑器中的控件 | id为可选,若为无则是获取所有控件 |
setControl(ctl) | 设置编辑器中指定id的控件值 | ctl:{ID:'',VALUE:''}如果是select控件类型ctl:{ID:'',VALUE:'',TEXT:''}。ctl可以为数组也可以为对象,设置冻结REQUIRED:1为冻结,只读不可操作 |
setMode(mode) | 设置编辑器模式 | mode可选:DESIGN(设计)、EDITOR(编辑)、READONLY(只读) |
贡献&bug提交
- 可邮件至dd@sodiao.org;
- 可以在github中的Iss中提交;
后续~~
本次框架调整相对合理,后续会持续跟进,toolbar也会相对完善。
最后
谨以此,献给那些还在医疗行业奋斗的小伙伴们
相关链接:
【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器(B/S架构)