【SoDiaoEditor電子病歷編輯器】階段性更新--新增複選框、日期控件、表格排版支持等--B/S架構

時間 2019-11-13

標籤 sodiaoeditor 電子病歷編輯器階段性更新新增複選框日期控件表格排版支持架構欄目系統架構简体版

原文原文鏈接

轉眼距離上一次v2正式發佈已通過去一個半月了。github期間不按期push了二十幾回，同時感謝分佈在廣州、福建、上海、北京的一衆小夥伴，正是大家給出的建議，才讓SoDiaoEditor不斷完善。javascript

我所知道的編輯器目前已經在至少2家三甲醫院有應用，部分小夥伴還在開發中，據說反饋效果還都不錯，加載快、對錶格支持友好、易上手、界面美觀等，說真的，這讓我知道本身在作一件有價值的事，讓我知道業餘時間的犧牲是有價值的。總之但願醫療行業再也不辛苦，但願大家一切都好。css

大體總結一下，這1.5個月主要更新瞭如下幾個內容：html

增長複選框控件；
增長日期控件；
對編輯器增長設計模式；
增長對錶格內容排版的支持；
完善toolbar，增長對段落格式化支持；
支持多語言，支持從新定義toolbar按鈕名；
解決了我都數不過來的bug；

具體效果以下：java

1. 日期控件git

2. 複選框github

3. 表格排版shell

4. 段落json

5. 對編輯器增長設計模式，部分小夥伴反饋在編輯中也能夠設置文字字體，編輯內容等。因此在編輯器中增長如下內容。設計模式

後續還會增長對插入圖片的二次塗鴉、表格斜線、目錄、移動版支持等。數組

如下爲最新文檔：

更新

首次更新（2017-3-30）

新增如下toolbar：

編輯
  i. 剪切板
      1. 複製、粘貼、切剪
  ii. 字體
      1. 字體、字號、增大字體、縮小字體
插入
  i. 字符
  ii. 連接
      1. 取消連接
  iii. 圖片
      1. 圖片、塗鴉
  iv. 表格
表格
  i. 表格
      1. 插入表格

設計器中新增SED對象，並增長如下接口：
修復事件兼容性（暫不支持IE8及其如下的瀏覽器，後續會有解決方案）
增長toolbar可配置性。
解決上一個版本中的bug。
等

編輯器支持設計模式（2017-4-21）

可在 [設計模式--電子病歷編輯器]中選中文字，便可出現編輯下過，若是須要這個效果，需設置初始化的mode爲DESIGN

增長自定義toolbar標題&支持對字體的操做（2017-4-26）

1. 增長了對自定義toolbar標題的支持，支持多語言，參考[設計模式--電子病歷設計器(擴展toolbar)](http://editor.sodiao.org/example/design-design.html)，只需在html中引用/lang/sde-zh-cn.js文件便可，能夠更改文件中顯示的內容值，達到自定義toolbar標題的功能
2. 原來對控件字體格式化時會損壞控件，現該bug已經修復。

增長表格中的對齊方向（2017-4-28）

表格中字體的對齊方向可在 表格-》對齊方向 中設置

增長日期控件、複選框控件（2017-5-14）

1. 增長日期控件。能夠設置最大、最小範圍。
2. 增長複選框控件。

預覽

設計模式--電子病歷設計器(擴展toolbar)

建議給病歷模板設計者（開發人員，或者科主任）使用。
可用來設計電子病歷模板，也能夠當作電子病歷編輯器使用。
此時輸入的值可利用SDE對象暴露出的接口獲取。
增長自定義toolbar標題功能，可支持多語言。

編輯模式--電子病歷設計器)

建議給醫生使用。
此時醫生能夠在原有模板中添加已有的控件，也能夠給科主任用來設計模板。
亦可經過SDE對象暴露出來的接口獲取數據。

只讀模式--電子病歷設計器)

建議該模式給醫生查看使用，在該模式下電子病歷中全部控件均不可編輯。

按鈕控制--電子病歷設計器

按鈕經過事件控制！

設計模式--電子病歷編輯器

建議給醫生使用，此模式下醫生能夠編輯控件中的值，而且可編譯控件的內容。選中文字後有驚喜。

編輯模式--電子病歷編輯器

建議給醫生使用，此模式下醫生只能編輯控件中的值，其他均不可修改。

只讀模式--電子病歷編輯器

該模式只容許查看，控件不可被編輯。

按鈕控制--電子病歷編輯器

按鈕經過事件控制！

結構

data                    模擬異步請求的數據，正式項目中可忽略
dialogs                 擴展百度ueditor的dialogs
lang                 	toolbar多語言支持，可自定義toolbar標題
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
            });
        };
    </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（只讀）

toolbar完整配置項

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', 'alignmergecells'],//表格
    'sde-toolbar-views': ['directory', 'showcomment', 'preview'],//視圖
    'sde-toolbar-tools': ['drafts', 'print', 'searchreplace', 'wordcount'],//工具
    'sde-toolbar-records': ['sdetemplate', 'sdecontrols']//病歷控件
}

電子病歷編輯器：

方法	說明	描述
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（只讀）