Java小强个人技术博客站点    手机版
当前位置: 首页 >> 开源 >> SoDiaoEditor电子病历编辑器初步学习

SoDiaoEditor电子病历编辑器初步学习

9030 开源 | 2021-5-11

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文件夹中

pdfviewer.zip


启动项目你会看到如下效果

崔素强博客使用


附上:

官方地址:

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 

在线演示:

http://www.tlzzu.com/#/ 


推荐您阅读更多有关于“ 开源 ueditor 免费 SoDiaoEditor 病历编辑器 ”的文章

上一篇:Myeclipse显示default package 下一篇:JDBC新增数据返回主键(MySQL)

猜你喜欢

发表评论: