天天看點
傳回

【SoDiaoEditor電子病曆編輯器更新啦】--謹以獻給那些還在醫療行業奮鬥的小夥伴們

為什麼推薦的人這麼少~~~~

更新（2017-4-18）：

截止目前已知的已有2個三甲醫院在使用該編輯器，容我内心澎湃以下，O(∩_∩)O哈哈~

先放github位址：https://github.com/tlzzu/SoDiaoEditor.v2

首先，這不是愚人節的玩笑，，，

本想着三月底釋出來着，結果昨天又在相容性上調出幾個bug，然後拖到了愚人節這天。

我是個追求完美的人，這點認識我的人，都能夠從我的相貌中看出來。

轉眼五個月過去了，期間不斷有人發來郵件進行鼓勵，并在不打賞的情況下厚着臉皮的來問我什麼時候進行下一版的更新！

【SoDiaoEditor電子病曆編輯器更新啦】--謹以獻給那些還在醫療行業奮鬥的小夥伴們
靜下心來，再次翻看原來的病曆編輯器發現了幾個問題：

  • 當我想添加擴充時，卧槽，沒留位置，不能擴充；
  • 當性能出問題時，卧槽，代碼不清晰，不好排查；
  • 當要解決bug時，卧槽，code分布太多，改死狗；
  • 當其他人拿出code問我時，卧槽，這不是我寫的code吧…
【SoDiaoEditor電子病曆編輯器更新啦】--謹以獻給那些還在醫療行業奮鬥的小夥伴們

我焦慮了，code跟屎一樣，怎麼可能是我這麼優秀的人寫出來的？

“算了誰沒個過去啊”就這樣我先原諒了自己。

【SoDiaoEditor電子病曆編輯器更新啦】--謹以獻給那些還在醫療行業奮鬥的小夥伴們

然後舉着充滿老繭的右手起誓：

新的版本中

  • ta必須能夠擴充；
  • ta必須容易使用；
  • ta必須考慮相容性；
  • ta性能必須足夠優化；
  • ta設計必須足夠合理；

是以就隻能重構了。

【SoDiaoEditor電子病曆編輯器更新啦】--謹以獻給那些還在醫療行業奮鬥的小夥伴們

當然對比之前版本的優勢還是很明顯的：

  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. 剪切闆
      1. 複制、粘貼、切剪
  ii. 字型
      1. 字型、字号、增大字型、縮小字型
插入
  i. 字元
  ii. 連結
      1. 取消連結
  iii. 圖檔
      1. 圖檔、塗鴉（蠻好用的你可以試試）
  iv. 表格
表格
  i. 表格
      1. 插入表格
  1. 設計器中新增SED對象
  2. 修複事件相容性（暫不支援IE8及其以下的浏覽器，後續會有解決方案）
  3. 增加toolbar可配置性。
  4. 解決上一個版本中的bug。
  5. 等

結構 

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（隻讀）

貢獻&bug送出

  1. 可郵件至[email protected]；
  2. 可以在github中的Iss中送出；

後續~~

本次架構調整相對合理，後續會持續跟進，toolbar也會相對完善。

最後 

謹以此，獻給那些還在醫療行業奮鬥的小夥伴們

 相關連結：

【開源】SoDiaoEditor 可能是目前最好用的開源電子病曆編輯器（B/S架構）

SoDiaoEditor 電子病曆編輯器
上一篇: 校招碎碎念
下一篇: Java8 Collectors.toMap的坑

繼續閱讀