轉眼距離上一次v2正式發布已經過去一個半月了。github期間不定期push了二十幾次，同時感謝分布在廣州、福建、上海、北京的一眾小伙伴，正是你們給出的建議，才讓SoDiaoEditor不斷完善。
我所知道的編輯器目前已經在至少2家三甲醫院有應用，部分小伙伴還在開發中，聽說反饋效果還都不錯，加載快、對表格支持友好、易上手、界面美觀等，說真的，這讓我知道自己在做一件有價值的事，讓我知道業余時間的犧牲是有價值的。總之希望醫療行業不再辛苦，希望你們一切都好。
大致總結一下，這1.5個月主要更新了以下幾個內容：
- 增加復選框控件；
- 增加日期控件；
- 對編輯器增加設計模式；
- 增加對表格內容排版的支持；
- 完善toolbar，增加對段落格式化支持；
- 支持多語言，支持重新定義toolbar按鈕名；
- 解決了我都數不過來的bug；
具體效果如下：
1. 日期控件
2. 復選框
3. 表格排版
4. 段落
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. 增加復選框控件。
預覽
建議給病歷模板設計者（開發人員，或者科主任）使用。
可用來設計電子病歷模板，也可以當做電子病歷編輯器使用。
此時輸入的值可利用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（只讀） |
貢獻&bug提交
- 可郵件至dd@sodiao.org；
- 可以在github中的Iss中提交；