为什么推荐的人这么少~~~~
 
更新(2017-4-18):
截止目前已知的已有2个三甲医院在使用该编辑器,容我内心澎湃以下,O(∩_∩)O哈哈~
 
首先,这不是愚人节的玩笑,,,
本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖到了愚人节这天。
我是个追求完美的人,这点认识我的人,都能够从我的相貌中看出来。
转眼五个月过去了,期间不断有人发来邮件进行鼓励,并在不打赏的情况下厚着脸皮的来问我什么时候进行下一版的更新!
 
静下心来,再次翻看原来的病历编辑器发现了几个问题:
  • 当我想添加扩展时,卧槽,没留位置,不能扩展;
  • 当性能出问题时,卧槽,代码不清晰,不好排查;
  • 当要解决bug时,卧槽,code分布太多,改死狗;
  • 当其他人拿出code问我时,卧槽,这不是我写的code吧…
 
我焦虑了,code跟屎一样,怎么可能是我这么优秀的人写出来的?
“算了谁没个过去啊”就这样我先原谅了自己。
 
然后举着充满老茧的右手起誓:
新的版本中
  • ta必须能够扩展;
  • ta必须容易使用;
  • ta必须考虑兼容性;
  • ta性能必须足够优化;
  • ta设计必须足够合理;
所以就只能重构了。
 
 
当然对比之前版本的优势还是很明显的:
  1. 接口更加简洁
  2. 可扩展性更高
  3. 框架调整,为后续更新发力
  4. ...(想好再补充)
未来希望增加图像控件,体温的这些。
老版本模板如果要升级现有版本:
  1. 模板中的样式去掉tl-改成sde-
  2. 模板中去除所有click绑定

以下为github中内容:

SoDiaoEditor.v2

预览(国外站点打开会比较慢,请耐心等待,或者自己下载过来在本地打开)

  1. 设计模式--电子病历设计器(扩展toolbar)
  1.     建议给病历模板设计者(开发人员,或者科主任)使用。
  2.     可用来设计电子病历模板,也可以当做电子病历编辑器使用。
  3.     此时输入的值可利用SDE对象暴露出的接口获取。
  1. 编辑模式--电子病历设计器)
  1.     建议给医生使用。
  2.     此时医生可以在原有模板中添加已有的控件,也可以给科主任用来设计模板。
  3.     亦可通过SDE对象暴露出来的接口获取数据。
  1. 只读模式--电子病历设计器)
  1.     建议该模式给医生查看使用,在该模式下电子病历中所有控件均不可编辑。
  1. 按钮控制--电子病历设计器
  1.     按钮通过事件控制!
  1. 编辑模式--电子病历编辑器
  1.     建议给医生使用,此模式下医生只能编辑控件中的值,其余均不可修改。
  1. 只读模式--电子病历编辑器
  1.     该模式只允许查看,控件不可被编辑。
  1. 按钮控制--电子病历编辑器
  1.     按钮通过事件控制!

更新

本次更新以下内容:

  1. 新增以下toolbar:
  1. 编辑
  2. i. 剪切板
  3. . 复制、粘贴、切剪
  4. ii. 字体
  5. . 字体、字号、增大字体、缩小字体
  6. 插入
  7. i. 字符
  8. ii. 链接
  9. . 取消链接
  10. iii. 图片
  11. . 图片、涂鸦(蛮好用的你可以试试)
  12. iv. 表格
  13. 表格
  14. i. 表格
  15. 1. 插入表格
  1. 设计器中新增SED对象
  2. 修复事件兼容性(暂不支持IE8及其以下的浏览器,后续会有解决方案)
  3. 增加toolbar可配置性。
  4. 解决上一个版本中的bug。

结构

  1. data 模拟异步请求的数据,正式项目中可忽略
  2. dialogs 扩展百度ueditordialogs
  3. dist 核心js文件
  4. js
  5. sde.design.js SoDiaoEditor设计器核心js
  6. sde.editor.js SoDiaoEditor编辑器核心js
  7. example 一些demo
  8. ueditor 百度ueditor库,可替换成自己版本
  9. sde.config.js 核心配置文件

使用

电子病历设计器:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <title>设计模式--电子病历设计器</title>
  9. <!-- 注意以下各脚本之间的加载顺序! -->
  10. <script type="text/javascript" src="sde.config.js"></script>
  11. <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css" />
  12. <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
  13. <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
  14. <script type="text/javascript" src="dist/js/sde.design.js"></script>
  15. </head>
  16. <body>
  17. <script id="myEditor" type="text/plain" style="width:680px;height:1000px;">
  18. 病历模板...
  19. </script>
  20. <script type="text/javascript">
  21. window.onload = function() {
  22. var sde = new SDE({
  23. id: "myEditor",
  24. title: '<div style="height: 45px;overflow: hidden;">' +
  25. '<div class="left" style="position:absolute;top:0;left:0;">' +
  26. '<img src="../data/img/SoDiaoL.png" style="height:35px;margin:5px;border:none;" />' +
  27. '</div>' +
  28. '<h1 style="font-size: 14px;height: 45px;line-height: 45px;margin: 0 auto;text-align: center;font-weight: normal;color:#fff;" >SoDiaoEditor电子病历编辑器</h1>' +
  29. '</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'],
                }//可自行删减
  1. });
  2. };
  3. </script>
  4. </body>
  5. </html>
注意:

各个脚本之间的加载顺序,已本例为准。 配置项(sde.config.js):

  1. /*
  2. 默认配置项
  3. */
  4. (function() {
  5. var URL = window.UEDITOR_HOME_URL || getUEBasePath();
  6. /*
  7. SDE_CONFIG 配置项
  8. */
  9. window.SDE_CONFIG = {
  10. HOME_URL: URL,
  11. HOME_URL_DIALOGS: URL + 'dialogs/',//SoDiaoEditor扩展ueditor的dialogs位置
  12. EDITOR_URL: URL + 'dist/js/sde.editor.js',
  13. MODE: "DESIGN", //DESIGN:设计|EDITOR:编辑|READONLY:只读(所有节点都不可编辑)
  14. CONTROL_TEMPLATES: []//控件模板
  15. };
  16. /**
  17. * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
  18. */
  19. window.UEDITOR_CONFIG = {
  20. UEDITOR_HOME_URL: URL + 'ueditor/', //为编辑器实例添加一个路径,这个不能被注释
  21. serverUrl: URL + "data/config.json", //URL + "net/controller.ashx", // 服务器统一请求接口路径
  22. toolbars: [], //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
  23. autoClearinitialContent: false, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
  24. //iframeJsUrl: URL + window.SDE_CONFIG.EDITOR_URL + '?temp=' + new Date().getTime(), //给编辑区域的iframe引入一个js文件
  25. // iframeCssUrl: URL + 'EMR/css/default.css?temp=' + new Date().getTime(), //给编辑区域的iframe引入一个css文件
  26. allowDivTransToP: false, //允许进入编辑器的div标签自动变成p标签
  27. wordCount: false, //关闭字数统计
  28. elementPathEnabled: false, //关闭elementPath
  29. autoClearinitialContent: false
  30. };
  31. function getUEBasePath(docUrl, confUrl) {
  32. return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());
  33. }
  34. function getConfigFilePath() {
  35. var configPath = document.getElementsByTagName('script');
  36. return configPath[configPath.length - 1].src;
  37. }
  38. function getBasePath(docUrl, confUrl) {
  39. var basePath = confUrl;
  40. if (/^(\/|\\\\)/.test(confUrl)) {
  41. basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, '');
  42. } else if (!/^[a-z]+:/i.test(confUrl)) {
  43. docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, '');
  44. basePath = docUrl + "" + confUrl;
  45. }
  46. return optimizationPath(basePath);
  47. }
  48. function optimizationPath(path) {
  49. var protocol = /^[a-z]+:\/\//.exec(path)[0],
  50. tmp = null,
  51. res = [];
  52. path = path.replace(protocol, "").split("?")[0].split("#")[0];
  53. path = path.replace(/\\/g, '/').split(/\//);
  54. path[path.length - 1] = "";
  55. while (path.length) {
  56. if ((tmp = path.shift()) === "..") {
  57. res.pop();
  58. } else if (tmp !== ".") {
  59. res.push(tmp);
  60. }
  61.  
  62. }
  63. return protocol + res.join("/");
  64. }
  65. window.UE = {
  66. getUEBasePath: getUEBasePath
  67. };
  68. })();

注意:

请重点关注window.SDE_CONFIG 和 window.UEDITOR_CONFIG 。 建议window.UEDITOR_CONFIG不要修改,可根据需求该window.SDE_CONFIG对象

电子病历编辑器:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>编辑模式--电子病历编辑器</title>
  8. <script type="text/javascript" src="dist/js/sde.editor.js"></script>
  9. </head>
  10. <body>
  11. <div id="myEditor" style="width:680px;height:1000px;margin:0 auto;">
  12. 病历内容...
  13. </div>
  14. <script type="text/javascript">
  15. window.onload = function() {
  16. var sde = new SDE({
  17. id: "myEditor",
  18. title: '<div style="height: 45px;overflow: hidden;">' +
  19. '<div class="left" style="position:absolute;top:0;left:0;">' +
  20. '<img src="../data/img/SoDiaoL.png" style="height:35px;margin:5px;border:none;" />' +
  21. '</div>' +
  22. '<h1 style="font-size: 14px;height: 45px;line-height: 45px;margin: 0 auto;text-align: center;font-weight: normal;color:#fff;" >SoDiaoEditor电子病历编辑器</h1>' +
  23. '</div>', //自定义title
  24. mode: 'EDITOR'//配置模式
  25. });
  26. };
  27. </script>
  28. </body>
  29. </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提交

  1. 可邮件至dd@sodiao.org
  2. 可以在github中的Iss中提交;

后续~~

本次框架调整相对合理,后续会持续跟进,toolbar也会相对完善。

最后

谨以此,献给那些还在医疗行业奋斗的小伙伴们

相关链接:

【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器(B/S架构)

【SoDiaoEditor电子病历编辑器更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们的更多相关文章

  1. 【SoDiaoEditor更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们

    先放github地址:https://github.com/tlzzu/SoDiaoEditor.v2 首先,这不是愚人节的玩笑,,, 本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖 ...

  2. SoDiaoEditor电子病历编辑器更新至V3版本,愿与各位一路同行!

    简单闲聊两句-- 记得刚参加工作那会儿,去医院实施,信息科不远处就是手术室,门口每天都挤满了人,他们中大多数都是等待手术结果的患者家属,有的还会把折叠床带来,应该是陪床有段时间了.有时路过,还会听到一 ...

  3. 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  4. 【SoDiaoEditor电子病历编辑器】阶段性更新啦

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  5. 【SoDiaoEditor电子病历编辑器】编辑器支持移动化

    写在前面 每次写SoDiao时都是一次灵魂拷问,这么猥琐的名字,会对程序媛产生多少误导啊,我是一个正直的人,不管你信不信每个见到我的人都这么说.本次更新拖了很久,本来半个月前应该实现的,却一直拖到昨天 ...

  6. 【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器(B/S架构)

    此刻我的内心是忐忑的,这个标题给了我很大的压力,虽然很久以前我就在github上搜索一圈了,也没发现有其他更好的开源电子病历编辑器,如各位亲发现有更好的,烦请知会我一声. 该编辑器其实已经憋了很久了, ...

  7. 正在开发纯BS的可在线编辑内容的电子病历编辑器

    在线电子病历编辑器功能预览,支持Firefox/Chrome/Opera/UC/IE/Safari.演示地址 http://www.dcwriter.cn:9090/ 在WINFORM.NET中的效果 ...

  8. 都昌 DCWriter电子病历编辑器演示文档截屏

  9. 中文分词实战——基于jieba动态加载字典和调整词频的电子病历分词

    分词是自然语言处理中最基本的一个任务,这篇小文章不介绍相关的理论,而是介绍一个电子病历分词的小实践. 开源的分词工具中,我用过的有jieba.hnlp和stanfordnlp,感觉jieba无论安装和 ...

随机推荐

  1. 所有文章的测试Demo

    Mqtt C++ Client 测试Demo https://pan.baidu.com/s/1Ue00GYv2SUd8aTquhvOW1w

  2. js检测密码强度

    <script> function AuthPasswd(string) {     if(string.length >=6) {         if(/[a-zA-Z]+/.t ...

  3. 【CF809E】Surprise me!

    题目 这是一道神仙题 看到这样一个鬼畜的柿子 \[\sum_{i=1}^n\sum_{j=1}^n\varphi(a_i\times a_j)\times dis(i,j)\] 又是树上距离又是\(\ ...

  4. PHP中对用户身份认证实现两种方法

    用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制.     当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...

  5. DNS_PROBE_FINISHED_NXDOMAIN 问题解决

    手动设置   (说明:如果您使用DNS有特殊设置,请保存设置后再进行操作) 1.打开[控制面板]→[网络连接]→打开[本地连接]→[属性]:2.双击[Internet 协议(TCP/IP)]→选择[自 ...

  6. leetcode 141. Linked List Cycle 、 142. Linked List Cycle II

    判断链表有环,环的入口结点,环的长度 1.判断有环: 快慢指针,一个移动一次,一个移动两次 2.环的入口结点: 相遇的结点不一定是入口节点,所以y表示入口节点到相遇节点的距离 n是环的个数 w + n ...

  7. 数字电路中应避免产生不必要的锁存器 Latch

    锁存器(Latch)是数字逻辑电路中很重要的一种基本电路,常见的锁存器包括三个端口:数据输入口.数据输出口.使能端.当使能端为高电平时,输入口的数据直接送到输出口,此时输入输出口可以看成是直接连通的: ...

  8. 【转】Android:No implementation found for native

    解决方法: 1.检查native c code的定义: JNIEXPORT void Java_com_example_something_MyClass_getMyString(JNIEnv * e ...

  9. JDBC数据对象存储

    一:将查询的结果生成对象,储存在数组中. package day31; import java.sql.Connection; import java.sql.PreparedStatement; i ...

  10. Python学习笔记系列——函数

    今年下半年的计划主要是Python和Mysql了,公司不方便看书和视频,就照着廖雪峰的Python网站开始看了.以下纯为个人笔记记录,若是想系统学习的小伙伴还是看这里的好一些,毕竟系统.https:/ ...