赞
踩
OnlyOffice是一款强大的在线office工具,我们通过他可以让客户脱离于客户端环境,直接从web端进行文档编写。
这篇文章只是介绍一下onlyOffice的所需要的环境和基本使用方法(在线打开预览,在线编辑与保存)。
官网:https://www.onlyoffice.com/
官方示例 https://api.onlyoffice.com/app_data/editor/Java%20Example.zip
首页 index.jsp中使用fileupload方法上传文件,调用data-url后台方法把文件上传到服务器,js方法在jscript.js第31行。
<input type="file" id="fileupload" name="file" data-url="IndexServlet?type=upload" />
jscript.js中有编辑(beginEdit)和查看(beginView)两个事件,两个事件使用了一个后台方法,区分只是传入的mode参数不同。
- jq(document).on("click", "#beginEdit:not(.disable)", function () {
var fileId = encodeURIComponent(jq("#hiddenFileName").val());
var url = UrlEditor + "?mode=edit&fileName=" + fileId;
window.open(url, "_blank");
jq("#hiddenFileName").val("");
jq.unblockUI();
});
jq(document).on("click", "#beginView:not(.disable)", function () {
var fileId = encodeURIComponent(jq("#hiddenFileName").val());
var url = UrlEditor + "?mode=view&fileName=" + fileId;
window.open(url, "_blank");
jq("#hiddenFileName").val("");
jq.unblockUI();
});`
调用EditorServlet,后台代码设置一些参数,跳转到edit.jsp,现在说一下edit.jsp如何调用onlyoffice,以及调用onlyoffice所必要的参数。
edit.jsp必须引用onlyoffice服务器所对应的api.js,onlyoffice相关参数可在settings.properties里配置
jsp源码为 <script type="text/javascript" src="${docserviceApiUrl}"></script>
实际引用的是 http://ip:port/web-apps/apps/api/documents/api.js
jsp中调用onlyoffice只需要在div中加载onlyoffice组件即可
html部分 <body> <div class="form"> <div id="iframeEditor"></div> </div> </body> JS部分及相关参数说明: var сonnectEditor = function () { var config={ "document":{ "fileType": "文件类型如 '.docx' ", "key": "文件唯一标识(详见代码逻辑)", "title": "文件名称", "url": "文件所在的网络地址(http://ip:port/demo.docx),此地址必须是onlyoffice服务器所能访问到的地址" }, "documentType": "文档类型", "editorConfig": { "callbackUrl":"http://xxxx:xxx/CallBackServlet?fileName=xxx.docx 此地址为保存文档时的回调方法,用于保存文件", "customization":{ "forcesave":"true" }, "mode":"view 插件加载的类型,view只允许查看 edit可以编辑", "lang":"zh-CN" }, "height": "100%", "width": "100%" }; docEditor = new DocsAPI.DocEditor("iframeEditor", config); }; if (window.addEventListener) { window.addEventListener("load", сonnectEditor); } else if (window.attachEvent) { window.attachEvent("load", сonnectEditor); }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。