简单使用 HTML 集成 OnlyOffice
发布于: 46 分钟前
前言
ONLYOFFICE，简单地说，就是将 Word 、Excel、PPT 3 大办公套件搬到了云端，只需要一个浏览器即可以在线使用 Office 的各种功能。
前提条件
确保相应的 js 文件可以被正常访问
https://documentserver/web-apps/apps/api/documents/api.js
复制代码
快速入门
新建 html 文档，引入 api.js
<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
复制代码
添加 div 元素
<div id="placeholder"></div>
复制代码
可变参数的传递
var docEditor = new DocsAPI.DocEditor("placeholder", config);
复制代码
config = { "document": { "fileType": "docx", "key": "Khirz6zTPdfd7", "title": "Example Document Title.docx", "url": "https://example.com/url-to-example-document.docx" }, "documentType": "word", "editorConfig": { "callbackUrl": "https://example.com/url-to-callback.ashx" } };
复制代码
完整示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ONLYOFFICE使用方法</title> <!-- 引入外部JavaScript文件 --> <script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script> </head> <body> <div id="placeholder"></div> <script language="javascript" type="text/javascript"> var docEditor = new DocsAPI.DocEditor("placeholder",{ "document": { "fileType": "docx", "key": "Khirz6zTPdfd7", "title": "Example Document Title.docx", "url": "https://example.com/url-to-example-document.docx" }, "documentType": "word", "editorConfig": { "callbackUrl": "https://example.com/url-to-callback.ashx" } }); </script> </body> </html>
复制代码
参数进阶
ONLYOFFICE 文档服务 API 文档，大体上可以分为以下几个部分：
config
document：文档相关
info：文档信息（
标题、地址、类型）permissions：文档权限（
只读、编辑、下载）editorConfig：编辑器相关
customization：自定义
embedded：嵌入式
plugins：插件
events：事件
配置参数进阶示例：
config = { "document": { "fileType": "docx", "info": { "favorite": true, "folder": "Example Files", "owner": "John Smith", "sharingSettings": [ { "permissions": "Full Access", "user": "John Smith" }, { "isLink": true, "permissions": "Read Only", "user": "External link" }, ... ], "uploaded": "2010-07-07 3:46 PM" }, "key": "Khirz6zTPdfd7", "permissions": { "comment": true, "copy": true, "deleteCommentAuthorOnly": false, "download": true, "edit": true, "editCommentAuthorOnly": false, "fillForms": true, "modifyContentControl": true, "modifyFilter": true, "print": true, "review": true, "reviewGroups": ["Group1", "Group2", ""] }, "title": "Example Document Title.docx", "url": "https://example.com/url-to-example-document.docx" }, "documentType": "word", "editorConfig": { "actionLink": ACTION_DATA, "callbackUrl": "https://example.com/url-to-callback.ashx", "createUrl": "https://example.com/url-to-create-document/", "customization": { "anonymous": { "request": true, "label": "Guest" }, "autosave": true, "chat": true, "comments": true, "compactHeader": false, "compactToolbar": false, "compatibleFeatures": false, "customer": { "address": "My City, 123a-45", "info": "Some additional information", "logo": "https://example.com/logo-big.png", "mail": "john@example.com", "name": "John Smith and Co.", "www": "example.com" }, "feedback": { "url": "https://example.com", "visible": true }, "forcesave": false, "goback": { "blank": true, "requestClose": false, "text": "Open file location", "url": "https://example.com" }, "help": true, "hideRightMenu": false, "hideRulers": false, "logo": { "image": "https://example.com/logo.png", "imageEmbedded": "https://example.com/logo_em.png", "url": "https://example.com" }, "macros": true, "macrosMode": "warn", "mentionShare": true, "plugins": true, "reviewDisplay": "original", "showReviewChanges": false, "spellcheck": true, "toolbarHideFileName": false, "toolbarNoTabs": false, "trackChanges": false, "unit": "cm", "zoom": 100 }, "embedded": { "embedUrl": "https://example.com/embedded?doc=exampledocument1.docx", "fullscreenUrl": "https://example.com/embedded?doc=exampledocument1.docx#fullscreen", "saveUrl": "https://example.com/download?doc=exampledocument1.docx", "shareUrl": "https://example.com/view?doc=exampledocument1.docx", "toolbarDocked": "top" }, "lang": "en", "location": "us", "mode": "edit", "plugins": { "autostart": [ "asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}", "asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}", ... ], "pluginsData": [ "https://example.com/plugin1/config.json", "https://example.com/plugin2/config.json", ... ] }, "recent": [ { "folder": "Example Files", "title": "exampledocument1.docx", "url": "https://example.com/exampledocument1.docx" }, { "folder": "Example Files", "title": "exampledocument2.docx", "url": "https://example.com/exampledocument2.docx" }, ... ], "region": "en-US", "templates": [ { "image": "https://example.com/exampletemplate1.png", "title": "exampletemplate1.docx", "url": "https://example.com/url-to-create-template1" }, { "image": "https://example.com/exampletemplate2.png", "title": "exampletemplate2.docx", "url": "https://example.com/url-to-create-template2" }, ... ], "user": { "group": "Group1", "id": "78e1e841", "name": "John Smith" } }, "events": { "onAppReady": onAppReady, "onCollaborativeChanges": onCollaborativeChanges, "onDocumentReady": onDocumentReady, "onDocumentStateChange": onDocumentStateChange, "onDownloadAs": onDownloadAs, "onError": onError, "onInfo": onInfo, "onMetaChange": onMetaChange, "onOutdatedVersion": onOutdatedVersion, "onRequestClose": onRequestClose, "onRequestCompareFile": onRequestCompareFile, "onRequestCreateNew": onRequestCreateNew, "onRequestEditRights": onRequestEditRights, "onRequestHistory": onRequestHistory, "onRequestHistoryClose": onRequestHistoryClose, "onRequestHistoryData": onRequestHistoryData, "onRequestInsertImage": onRequestInsertImage, "onRequestMailMergeRecipients": onRequestMailMergeRecipients, "onRequestRename": onRequestRename, "onRequestRestore": onRequestRestore, "onRequestSaveAs": onRequestSaveAs, "onRequestSendNotify": onRequestSendNotify, "onRequestSharingSettings": onRequestSaveAs, "onRequestUsers": onRequestUsers, "onWarning": onWarning }, "height": "100%", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.t-IDcSemACt8x4iTMCda8Yhe3iZaWbvV5XKSTbuAn0M", "type": "desktop", "width": "100%"};
复制代码
文章持续更新，更多细节可以微信搜一搜「一个需求」，这个其实很简单，怎么实现我不管！
划线
评论
复制
发布于: 46 分钟前阅读数: 4
版权声明: 本文为 InfoQ 作者【一个需求】的原创文章。
原文链接:【http://xie.infoq.cn/article/a0f97e801cfe5022a566e87a1】。文章转载请联系作者。
一个需求
关注
公众号【一个需求】 2021.06.23 加入
这个其实很简单，这么实现我不管！
评论