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>

點擊查看更多示例