為什么推薦的人這么少~~~~
更新（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中內容：
SoDiaoEditor.v2
預覽(國外站點打開會比較慢，請耐心等待，或者自己下載過來在本地打開)
建議給病歷模板設計者（開發人員，或者科主任）使用。
可用來設計電子病歷模板，也可以當做電子病歷編輯器使用。
此時輸入的值可利用SDE對象暴露出的接口獲取。 建議給醫生使用。
此時醫生可以在原有模板中添加已有的控件，也可以給科主任用來設計模板。
亦可通過SDE對象暴露出來的接口獲取數據。 建議該模式給醫生查看使用，在該模式下電子病歷中所有控件均不可編輯。 按鈕通過事件控制！ 建議給醫生使用，此模式下醫生只能編輯控件中的值，其余均不可修改。 該模式只允許查看，控件不可被編輯。 按鈕通過事件控制！更新
本次更新以下內容：
- 新增以下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)：
/* 默認配置項 */ (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（只讀） |
電子病歷編輯器：
| 方法 | 說明 | 描述 |
|---|---|---|
| getControl([id]) | 獲取編輯器中的控件 | id為可選，若為無則是獲取所有控件 |
| setControl(ctl) | 設置編輯器中指定id的控件值 | ctl：{ID:'',VALUE:''}如果是select控件類型ctl：{ID:'',VALUE:'',TEXT:''}。ctl可以為數組也可以為對象，設置凍結REQUIRED：1為凍結，只讀不可操作 |
| setMode(mode) | 設置編輯器模式 | mode可選：DESIGN（設計）、EDITOR（編輯）、READONLY（只讀） |
貢獻&bug提交
- 可郵件至dd@sodiao.org；
- 可以在github中的Iss中提交；
后續~~
本次框架調整相對合理，后續會持續跟進，toolbar也會相對完善。
最后
謹以此，獻給那些還在醫療行業奮斗的小伙伴們
相關鏈接：
【開源】SoDiaoEditor 可能是目前最好用的開源電子病歷編輯器（B/S架構）