SoDiaoEditor电子病历编辑器初步学习
2021-5-11 10939 3
SoDiaoEditor电子病历编辑器，核心是ueditor，在该文本编辑器基础上根据医疗行业需求进行的改造。该产品已在多家三甲医院上线，是目前国内免费开源以及使用上比较友好的一块产品。为了研究学习和使用该产品，第一步下载并引入到项目中。
下载其源码后解压获得SoDiaoEditor-4.0，重命名为sed并拷贝到web项目中。
修改index.html，让其更整洁，并增加一个按钮叫打印，用于演示如何调用sde的API：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设计器</title>
<script type="text/javascript" charset="utf-8" src="/js/modernizr/2.8.3/modernizr.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" charset="utf-8" src="/js/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/es5-shim/4.5.9/es5-shim.min.js"></script>
<![endif]-->
<script type="text/javascript" charset="utf-8" src="sde.config.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css">
<script>
function drag(evt) {
evt.dataTransfer.setData("Text", evt.target.innerHTML);
}
function dayin(){
sde.execCommand('seniorprint');
}
</script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js?_=1528990315106"></script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js?_=1528990315106"></script>
<script type="text/javascript" src="js/sde-ie8-design.js?ba2b4d4610f330f6e1ad"></script>
</head>
<body>
<button onclick="dayin()">打印</button>
<div style="width:1200px;margin:0 auto; box-shadow: 0 0 0 1px #d1d1d1, 0 0 3px 1px #ccc;;height:1500px;" id='sde'>
</div>
<script type="text/javascript" charset="utf-8" src="demo.js"></script>
</body>
</html>修改demo.js，移除不用的代码，并修改将高级打印的样式初始化，写到初始化配置中：
window.onload = function() {
var sde = window.sde = new SDE({
el : document.querySelector('#sde'),
iframe_css_src : null, //string/Array数组 扩展css
iframe_js_src : 'demoforeditor.js',
page_start_num : 1, //页面起始页//默认为1
seniorprint : {
resettingPrint (opt, viewDom) {}, //默认重置（包括首次设置）打印页面前触发。优先级高于render系列函数
resetedPrint (opt, viewDom) {}, //默认重置（包括首次设置）打印页面后触发。优先级高于render系列函数
renderHeader (index, page) {
return '<div style="line-height:55px;background:red;border:1px solid yellow;">这里是header</div>';
}, //返回要渲染的页眉。默认从零开始
renderFooter (index, page) {
return '<div style="line-height:35px;background:blue;border:1px solid green;"><center>第${index+1}页<center></div>';
}, //返回要渲染的页脚。默认从零开始
renderedHeader (index, count, page, header) {}, //渲染后
renderedFooter (index, count, page, footer) {}, //渲染后
scale : 2, //放大比例，默认2倍，越大越清晰，相应的渲染也更慢
autoPrint : true, //是否默认打开pdfviewer即执行打印操作
isDownload : false, //是否下载，如果为true，则不再打开pdfviewer页面
fileName : 'SDE 测试打印', //如果isDownload=true时的pdf文件下载名称
pageMode : 'A4', //页面模式:A3|A4|A5 ……
width : 794, //以下默认值
height : 1123,
top : 100,
right : 100,
bottom : 100,
left : 100,
printMode : 'normal', //打印模式：normal|neat|revise|comment
ctrlMode : 'normal', //控件模式：normal|hidden|remove
printDirection : 'vertical', //打印方向 vertical|horizontal
printCssUrl : null, //打印的样式表，可以是string，也可以是array
printJsUrl : null, //打印的js，可以是string，也可以是array
},
ctrl_remote_handle : function(data) {
//这里可以处理url，对url进行再加工。如果此时执行 this.isLoadAsyncData(true)，则表示代替sde自带的异步请求方法，
//场景1，二次处理发起异步请求前的参数设置，比如因模板打开路径不同，导致的控件中的url路径不对的问题；
console.log(data);
data.url = data.url + '?' + new Date().getTime();
return data;
},
default_open_toolbar : 'sde-toolbar-tools', //默认打开的toolbar的集合，如果不填，默认使用第一个集合
});
sde.addListener('ready', function() {
sde.mode('DESIGN'); //执行到这一行时 sde对象才加载成功！
console.log(this);
console.log('design ready ok!');
});
window.sde = sde;
};这里还要修改下sde-ie8-design.js，但是要注意的是官方给出的是压缩版，所以要自己解压缩，找到sde-toolbar-tools-print可以看到下载到的源码并没有将高级打印显示出来，这里修改下：
{
name: "sde-toolbar-tools-print",
title: "打印",
items: [{
name: "print",
title: "普通打印"
},
{
name: "seniorprint",
title: "高级打印"
}]
}还有注意一点，它的高级打印需要PDF预览，但是官方示例中有但是给的源码中没有，所以要自己拷贝到项目的dialogs文件夹中
启动项目你会看到如下效果
附上：
官方地址：
https://github.com/tlzzu/SoDiaoEditor
所有的配置项目如下：
https://github.com/tlzzu/SoDiaoEditor/blob/v4.0/doc/sde.options.md
SDE API：
https://github.com/tlzzu/SoDiaoEditor/blob/v4.0/doc/sde.api.md
SDE控件 API：
https://github.com/tlzzu/SoDiaoEditor/blob/v4.0/doc/sde.ctrl.api.md
在线演示：
同问有源码包吗？github上面的是阉割版的000....
同问有源码包吗？github上面的是阉割版的000....
兄弟有源码包吗？github上面的是阉割版的