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

- 当我想添加扩展时,卧槽,没留位置,不能扩展;
- 当性能出问题时,卧槽,代码不清晰,不好排查;
- 当要解决bug时,卧槽,code分布太多,改死狗;
- 当其他人拿出code问我时,卧槽,这不是我写的code吧…


- ta必须能够扩展;
- ta必须容易使用;
- ta必须考虑兼容性;
- ta性能必须足够优化;
- ta设计必须足够合理;

- 接口更加简洁
- 可扩展性更高
- 框架调整,为后续更新发力
- ...(想好再补充)
- 模板中的样式去掉tl-改成sde-
- 模板中去除所有click绑定
以下为github中内容:
SoDiaoEditor.v2
预览(国外站点打开会比较慢,请耐心等待,或者自己下载过来在本地打开)
建议给病历模板设计者(开发人员,或者科主任)使用。
可用来设计电子病历模板,也可以当做电子病历编辑器使用。
此时输入的值可利用SDE对象暴露出的接口获取。
建议给医生使用。
此时医生可以在原有模板中添加已有的控件,也可以给科主任用来设计模板。
亦可通过SDE对象暴露出来的接口获取数据。
建议该模式给医生查看使用,在该模式下电子病历中所有控件均不可编辑。
按钮通过事件控制!
建议给医生使用,此模式下医生只能编辑控件中的值,其余均不可修改。
该模式只允许查看,控件不可被编辑。
按钮通过事件控制!
更新
本次更新以下内容:
- 新增以下toolbar:
- 编辑
- i. 剪切板
- . 复制、粘贴、切剪
- ii. 字体
- . 字体、字号、增大字体、缩小字体
- 插入
- i. 字符
- ii. 链接
- . 取消链接
- iii. 图片
- . 图片、涂鸦(蛮好用的你可以试试)
- 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: {
- });
- };
- </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架构)
【SoDiaoEditor电子病历编辑器更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们的更多相关文章
- 【SoDiaoEditor更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们
先放github地址:https://github.com/tlzzu/SoDiaoEditor.v2 首先,这不是愚人节的玩笑,,, 本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖 ...
- SoDiaoEditor电子病历编辑器更新至V3版本,愿与各位一路同行!
简单闲聊两句-- 记得刚参加工作那会儿,去医院实施,信息科不远处就是手术室,门口每天都挤满了人,他们中大多数都是等待手术结果的患者家属,有的还会把折叠床带来,应该是陪床有段时间了.有时路过,还会听到一 ...
- 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
- 【SoDiaoEditor电子病历编辑器】阶段性更新啦
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
- 【SoDiaoEditor电子病历编辑器】编辑器支持移动化
写在前面 每次写SoDiao时都是一次灵魂拷问,这么猥琐的名字,会对程序媛产生多少误导啊,我是一个正直的人,不管你信不信每个见到我的人都这么说.本次更新拖了很久,本来半个月前应该实现的,却一直拖到昨天 ...
- 【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器(B/S架构)
此刻我的内心是忐忑的,这个标题给了我很大的压力,虽然很久以前我就在github上搜索一圈了,也没发现有其他更好的开源电子病历编辑器,如各位亲发现有更好的,烦请知会我一声. 该编辑器其实已经憋了很久了, ...
- 正在开发纯BS的可在线编辑内容的电子病历编辑器
在线电子病历编辑器功能预览,支持Firefox/Chrome/Opera/UC/IE/Safari.演示地址 http://www.dcwriter.cn:9090/ 在WINFORM.NET中的效果 ...
- 都昌 DCWriter电子病历编辑器演示文档截屏
- 中文分词实战——基于jieba动态加载字典和调整词频的电子病历分词
分词是自然语言处理中最基本的一个任务,这篇小文章不介绍相关的理论,而是介绍一个电子病历分词的小实践. 开源的分词工具中,我用过的有jieba.hnlp和stanfordnlp,感觉jieba无论安装和 ...
随机推荐
- 所有文章的测试Demo
Mqtt C++ Client 测试Demo https://pan.baidu.com/s/1Ue00GYv2SUd8aTquhvOW1w
- js检测密码强度
<script> function AuthPasswd(string) { if(string.length >=6) { if(/[a-zA-Z]+/.t ...
- 【CF809E】Surprise me!
题目 这是一道神仙题 看到这样一个鬼畜的柿子 \[\sum_{i=1}^n\sum_{j=1}^n\varphi(a_i\times a_j)\times dis(i,j)\] 又是树上距离又是\(\ ...
- PHP中对用户身份认证实现两种方法
用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制. 当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...
- DNS_PROBE_FINISHED_NXDOMAIN 问题解决
手动设置 (说明:如果您使用DNS有特殊设置,请保存设置后再进行操作) 1.打开[控制面板]→[网络连接]→打开[本地连接]→[属性]:2.双击[Internet 协议(TCP/IP)]→选择[自 ...
- leetcode 141. Linked List Cycle 、 142. Linked List Cycle II
判断链表有环,环的入口结点,环的长度 1.判断有环: 快慢指针,一个移动一次,一个移动两次 2.环的入口结点: 相遇的结点不一定是入口节点,所以y表示入口节点到相遇节点的距离 n是环的个数 w + n ...
- 数字电路中应避免产生不必要的锁存器 Latch
锁存器(Latch)是数字逻辑电路中很重要的一种基本电路,常见的锁存器包括三个端口:数据输入口.数据输出口.使能端.当使能端为高电平时,输入口的数据直接送到输出口,此时输入输出口可以看成是直接连通的: ...
- 【转】Android:No implementation found for native
解决方法: 1.检查native c code的定义: JNIEXPORT void Java_com_example_something_MyClass_getMyString(JNIEnv * e ...
- JDBC数据对象存储
一:将查询的结果生成对象,储存在数组中. package day31; import java.sql.Connection; import java.sql.PreparedStatement; i ...
- Python学习笔记系列——函数
今年下半年的计划主要是Python和Mysql了,公司不方便看书和视频,就照着廖雪峰的Python网站开始看了.以下纯为个人笔记记录,若是想系统学习的小伙伴还是看这里的好一些,毕竟系统.https:/ ...