简单使用HTML集成OnlyOffice

前言

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%"
};

文章持续更新，更多细节可以微信搜一搜「一个需求」，这个其实很简单，怎么实现我不管！

简单使用HTML集成OnlyOffice相关推荐

如何使用Docker轻松集成OnlyOffice和NextCloud--快速搭建私有云办公系统/私有云盘/私有OfficeOnline
原作者: XiaoGuo An 转载来源:https://www.linuxbabe.com/docker/onlyoffice-nextcloud-integration-docker 如何使用Do ...
微信公众号简单接入springboot集成weixin4j
微信公众号简单接入springboot集成weixin4j 内网穿透登录地址:https://natapp.cn/ 注册用户,购买免费渠道进行配置端口号(我配置的是8802) 根据网址进行下一步操 ...
android fragment相机,简单的易于集成的Android相机Fragment – Camer...
CameraFragment 一个简单的易于集成的Android相机Fragment. //you can configure the fragment by the configuration bu ...
NextCloud集成OnlyOffice功能
OnlyOffice功能特性一.主要功能及特性 1.创建创建复杂的文档.专业的电子表格.令人赞叹的演示文稿以及可填写的表单. 支持主流格式:docx.xlsx.pptx.odt.ods.odp.d ...
阿里RocketMq试用记录+简单的Spring集成
CSDN学院招募微信小程序讲师啦程序猿全指南,让[移动开发]更简单! [观点]移动原生App开发 PK HTML 5开发云端应用征文大赛,秀绝招,赢无人机! 阿里R ...
简单api_GraphQL API集成的简要介绍
简单api GraphQL is a great alternative to REST (or other HTTP API designs). This is a quick introducti ...
最简单的SpringCloudStream集成Kafka教程
开发中,服务与服务之间通信通常会用到消息中间件,如果我们使用了某一个MQ,那么消息中间件与我们的系统算是高耦合.将来有一天,要替换成另外的MQ,我们的改动就会比较大.为了解决这个问题,我们可以使用Sp ...
centos7 nuxeo platform 集成 onlyoffice，搭建企业级内容管理系统
1. 安装说明 nuxeo platform 和 onlyoffice 都是国外开源软件,在线安装需要下载很多软件包,国内下载很慢甚至下载出错,建议使用香港服务器或是美国的服务器,本地安装建议使用vp ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...

简单使用HTML集成OnlyOffice

前言

前提条件

快速入门

参数进阶

简单使用HTML集成OnlyOffice相关推荐

最新文章

热门文章