前言
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：文档权限（
只读、编辑、下载）
- info：文档信息（
- 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%"
};
文章持续更新，更多细节可以微信搜一搜「一个需求」，这个其实很简单，怎么实现我不管！
