【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（只讀）