SoDiaoEditor电子病历编辑器更新至V3版本，愿与各位一路同行！

时间 2019-11-19

标签 sodiaoeditor 电子病历编辑器更新 v3 版本各位一路同行繁體版

原文原文链接

简单闲聊两句……javascript

记得刚参加工做那会儿，去医院实施，信息科不远处就是手术室，门口天天都挤满了人，他们中大多数都是等待手术结果的患者家眷，有的还会把折叠床带来，应该是陪床有段时间了。有时路过，还会听到一群人在手术室门口哭，那是我毕业前最接近死亡的一段时间，当时就想着有天能为医疗行业作点什么。css

后来有几回接触到医院自研的电子病历，编辑器那叫一个丑啊，并且设计模板的方式也很奇葩，但当时咱也是个初入医疗行业的菜鸟，不敢瞎逼逼，况且也给不出更好的方案。不过想作一款更好的电子病历编辑器的想法就这么萌生了。html

再后来 16 年由于我的+公司的缘故，迷茫了一段时间。当时想着抽空把编辑器作出来，告终了这件事，按照以往怀胎十月也该生了，况且我这都一年多了，而后就利用闲时初步写了一款编辑器（就是如今的 SoDiaoEditor 啦--如下简称 SDE），还取了一个贼恶心的名字，为了恶心到底，我还买了个更恶心的域名，豁出去了。。。vue

好啦，恍恍惚惚，SDE 从创建到如今也有 18 个月了，中间提交了上百次的 commit，也经历了多个小伙伴们的二级&三级&云电子病历项目的上线，加上中间遇到的各类 bug，，，一路走来，感谢各位小伙伴的信任、理解与支持。也算是为医疗行业尽了一份力。共勉！java

如下为具体更新内容，更多接口详情请见V3 API接口：git

愿景github

交流shell

更新设计模式

愿景

成为电子病历编辑器的通用标准；
愿为医疗行业作点力所能及的事；
愿各位码农少加班；

交流

QQ 群：370844065 （已有近百家医疗企业开发人员，欢迎进群探讨）

更新记录

查看详情

Vue 中使用

详见另外一个 github 项目：SoDiaoEditor-Vue

待完善！

效果展现

V3 版本：

在线预览

SDE 分为两大编辑器：

截止到目前的旧模式

设计器
- 设计模式-DESIGN
- 编辑模式-EDITOR
- 只读模式-READONLY
编辑器
- 设计模式-DESIGN（可编辑控件及病历内容）
- 编辑模式-EDITOR（只容许操做非只读控件）
- 只读模式-READONLY（不可编辑）

新模式将在 4 月底实现

由于时间关系，SDE 的模式调整将于 4 月底完成，届时各位的使用将不受影响，只需根据本身的选择适当调整便可。

设计器
- 设计模式-DESIGN
  - 建议设计电子病历模板时使用该模式。可自由添加模板，设计控件。
- 编辑模式-EDITOR
  - 建议操做人员（医生、护士、检查科室等）使用该模式。编辑模板，不可添加/删除控件。
- 输入模式-INPUT
  - 建议操做人员使用该模式。该模式只容许修改非只读控件的值。
- 只读模式-READONLY
  - 建议在部分查看、调阅电子病历的场景下使用。该模式下模板不可编辑。
编辑器
- 编辑模式-EDITOR
  - 建议给医生使用，或移动版使用。该模式下可编辑控件及病历内容。
- 输入模式-INPUT
  - 建议给医生使用。只容许操做非只读控件。
- 只读模式-READONLY
  - 建议在部分查看、调阅电子病历的场景下使用。该模式下不可编辑。

目录结构

data                    //模拟异步请求的数据，正式项目中可忽略
dialogs                 //扩展百度ueditor的dialogs
lang                    //toolbar多语言支持，可自定义toolbar标题
dist
    js
        sde.design.js   //SoDiaoEditor设计器核心js
        sde.editor.js   //SoDiaoEditor编辑器核心js
example                 //一些demo
ueditor                 //因ue存在部分bug，请使用通过本人调整过的版本。
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>SoDiaoEditor.v3 电子病历设计器</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="lang/sde-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;">
        病历模板/后续调用sde.html设置...
    </script>
    <script type="text/javascript">
        window.onload = function() {
            var sde = new SDE({
                id: "myEditor",
                title: '<div>SoDiaoEditor.v3 电子病历设计器</div>',
                ready:function(){
                    //sde为异步渲染，若想在sde加载完成后 设置html或修改模式等，可在这里触发
                }
            });
        };
    </script>
</body>
</html>

编辑器：

<!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>SoDiaoEditor.v3 电子病历编辑器</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;">
        病历模板/后续调用sde.html设置...
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var sde = new SDE({
                id: "myEditor"
            });
            //注：在编辑器SDE为同步渲染
        };
    </script>
</body>
</html>

点击查看更多示例

API 文档

SDE 尽可能保证 设计器 与 编辑器 接口一致，以下降各位同窗的学习成本。

点击查看详情

需求&bug 提交

可邮件至dd@sodiao.org；
能够在 github 中的 Iss 中提交；

打赏

展望

18 年的重点在兼容 IE8 上，并努力将功能向三级医院的需求靠拢。

2018，愿与各位一路同行！