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

更新

本次更新以下内容:

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

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

后续~~

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

最后

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

相关链接:

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

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

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

    为什么推荐的人这么少~~~~   更新(2017-4-18): 截止目前已知的已有2个三甲医院在使用该编辑器,容我内心澎湃以下,O(∩_∩)O哈哈~   先放github地址:https://gith ...

  2. Android SDK无法更新问题解决 ---- 还可解决无法上google的问题

    Android SDK无法更新问题解决 2012-10-14 10:13:01|  分类: Android|举报|字号 订阅     1.在SDK Manager下Tools->Options打 ...

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

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

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

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

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

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

  6. js的动态加载、缓存、更新以及复用(一)

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  7. HDU 1698 Just a Hook(线段树/区间更新)

    题目链接: 传送门 Minimum Inversion Number Time Limit: 1000MS     Memory Limit: 32768 K Description In the g ...

  8. 墙内无缝更新Android SDK

    https://www.caoqq.net/android-sdk-offine-download.html Lucas · 10 个月前 打开Android SDK Manager, 打开设置 2. ...

  9. 更新页面缓存OutputCache

    为什么要使用OutputCache 我认为OutputCache是最简单的缓存技术了,它针对的是页面级别的,简单的一条指令就可以达到缓存的效果,有效的减轻服务器的压力和减少带宽,对于网站一些不会频繁更 ...

随机推荐

  1. [Spark] - Spark部署安装

    环境:centos6.0 虚拟机 搭建单机版本的spark 前提条件:搭建好hadoop环境 1. 下载scala进行安装 只需要设置环境变量SCALA_HOME和PATH即可 export SCAL ...

  2. CentOS 6.5安装jdk1.8

    1.源码包准备: 首先到官网下载jdk-8u66-linux-x64.tar.gz, http://www.oracle.com/technetwork/java/javase/downloads/j ...

  3. 球谐光照(Spherical Harmonics Lighting)及其应用-应用篇

    上一篇介绍了球谐函数的一些原理和性质,本篇主要介绍如何实现球谐光照,将这种光照应用到实际的场景中去. 我们知道,球谐光照实际上就是将周围的环境光采样成几个系数,然后渲染的时候用这几个系数来对光照进行还 ...

  4. ASP.NET通用权限框架 权限管理系统源码jquery 精美UI源码

    软件技术开发,合作请联系QQ:858-048-581 开发工具 VS2010 .sql2005.2008等(在Sql server数据执行脚本即可)  VS2010 打开保证本地运行成功(数据库.源代 ...

  5. Struts2之环境配置

    在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的好处就 ...

  6. 一个想法照进现实-《IT连》创业项目:万事开头难

    前言: 之前是一个想法,现在已经进入创业阶段,所以这个系列的标题,改了. 众筹的事在今天也停止了. 7-9号会在深圳龙岗布吉参加一个风投对接的活动,今晚(6号)会出发. 因为:在深圳会呆几天,而且这个 ...

  7. MES设备支持快速完工

    1) 在菜单界面点击指定快速键 2) 初始界面 3) 一般流程 a) 扫描任务单号,即可完成工序加工 a1) 获取任务单工序的条件 按任务单卡号或配模的模具卡号搜索行状态为O的工序 a2) 工序完工操 ...

  8. 自定义分页Gridview中Excel导出

    先上图,如图所示导出所有查询出的数据 用的是AspNetPager分页控件,这个导出方法,不受分页和gridview列中数据的约束,可以导出您想导出的数据 首先前台页面代码,lblink即为导出exc ...

  9. Java面试系列

    如果你的面试简历是如下这样写的,请务必准备回答下面的所有问题. 面试职位:Java高级工程师 专业技能: (1)牢固掌握Java基础知识,如集合.并发.I/O等,并对Java源码有一定的研究. (2) ...

  10. [lua] 游戏客户端逻辑使用lua协程

    我们的游戏有这样一种情景:客户端中角色需要用到一些公会的数据,但服务器不会在玩家(创角后)一进入到游戏里就推送给玩家,而是需要客户端自己在需要的时候向服务器请求公会的数据,之前的实现就是在请求消息的时 ...