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

时间 2019-12-13

标签 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中内容：javascript

SoDiaoEditor.v2

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

设计模式--电子病历设计器(扩展toolbar)

　　　　建议给病历模板设计者（开发人员，或者科主任）使用。
　　　　可用来设计电子病历模板，也能够当作电子病历编辑器使用。
　　　　此时输入的值可利用SDE对象暴露出的接口获取。

编辑模式--电子病历设计器)

　　　　建议给医生使用。
　　　　此时医生能够在原有模板中添加已有的控件，也能够给科主任用来设计模板。
　　　　亦可经过SDE对象暴露出来的接口获取数据。

只读模式--电子病历设计器)

　　　　建议该模式给医生查看使用，在该模式下电子病历中全部控件均不可编辑。

按钮控制--电子病历设计器

　　　　按钮经过事件控制！

编辑模式--电子病历编辑器

　　　　建议给医生使用，此模式下医生只能编辑控件中的值，其他均不可修改。

只读模式--电子病历编辑器

　　　　该模式只容许查看，控件不可被编辑。

按钮控制--电子病历编辑器

　　　　按钮经过事件控制！

更新

本次更新如下内容：css

新增如下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)：html

/*
默认配置项
*/
(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
    };
})();

注意：java

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

电子病历编辑器：

<!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中提交；

后续~~github

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

最后设计模式

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