简单使用OnlyOffice

本文介绍如何使用Docker部署OnlyOffice文档协作编辑器,并提供前端集成示例及SpringBoot后端集成代码。涵盖OnlyOffice的安装步骤、参数配置、前后端交互实现等关键信息。

1 参考网址

# 英文版
https://www.onlyoffice.com
# 中文版
https://www.onlyoffice.com/zh/

# GitHub上的地址
https://github.com/ONLYOFFICE/DocumentServer

# 社区版Docker安装
https://helpcenter.onlyoffice.com/installation/docs-community-install-docker.aspx

# DockerHub地址
https://hub.docker.com/r/onlyoffice/documentserver

# 开发文档
https://api.onlyoffice.com/editors/basic

# 后端参考的demo
https://api.onlyoffice.com/editors/demopreview

# 前端参考的配置地址
https://api.onlyoffice.com/editors/config/editor#createUrl
# 前端自定义编辑参数
https://api.onlyoffice.com/editors/config/editor/customization

2 Docker安装OnlyOffice

2.1 安装onlyoffice

# 下载onlyoffice/documentserver:7.1.1
sudo docker pull onlyoffice/documentserver:7.1.1

# 创建Onlyoffice容器
# 对外端口81
sudo docker run -itd \
--name my_onlyoffice \
--restart=always \
-p 81:80 \
-v /home/onlyoffice/logs:/var/log/onlyoffice  \
-v /home/onlyoffice/data:/var/www/onlyoffice/Data  \
-v /home/onlyoffice/lib:/var/lib/onlyoffice \
-v /home/onlyoffice/db:/var/lib/postgresql  \
onlyoffice/documentserver:7.1.1

2.2 查看服务

默认会跳转到欢迎页面,"192.168.108.200"是我的地址

http://192.168.108.200:81/

在这里插入图片描述

2.3 参数说明

Status返回值说明

https://api.onlyoffice.com/editors/callback#status-descr
status描述
1每次用户连接到文档协同编辑或断开文档协同编辑时,都会收到该消息。
2,3关闭正在编辑的文档10秒钟后,会收到该消息,用户的标识符是最后一个向文档编辑服务发送更改的用户。
4在最后一个用户关闭文档时收到。
6,7在执行强制保存请求时收到。

3 前端代码

注意:容器的宿主机与开发电脑需要在同一个局域网中,保证前端访问后端的IP地址能够访问到。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>OnlyOffice</title>
</head>
<body style="height:800px">
    <div id="placeholder"></div>

    <script type="text/javascript" src="http://192.168.108.200:81/web-apps/apps/api/documents/api.js"></script>
    <script type="text/javascript">
        var config = {  

            // 设置文档信息
            "document": {
                "fileType": "docx",
                // 文档唯一标识,最大长度128
                "key": "Khirz6zTPdfd7",
                // 文档名称
                "title": "Example Document Title.docx",
                // 文件地址
                "url": "http://192.168.108.1:8080/office/online",
                // 添加权限
                "permissions": {
                    // 设置聊天
                    "chat": true
                }
            },

            // 设置编辑
            "editorConfig": {
                // 设置语言
                "lang": "zh-CN",

                // 两种编辑(edit)和查看(view)
                "mode": "edit",
                // 文件保存时的地址
                "callbackUrl": "http://192.168.108.1:8080/office/save",

                /*
                // 配置用户信息
                "user": {
                    // 用户编号
                    "id": "admin",
                    // 用户名称
                    "name": "管理员"
                },
                */

            },
        };
        var docEditor = new DocsAPI.DocEditor("placeholder", config);
        
    </script>
</body>
</html >

4 SpringBoot使用OnlyOffice

4.1 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.5.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.mason</groupId>
	<artifactId>myonlyoffice</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>myonlyoffice</name>
	<description>myonlyoffice project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>com.alibaba.fastjson2</groupId>
			<artifactId>fastjson2</artifactId>
			<version>2.0.10</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

4.2 java代码

package com.mason.myonlyoffice.controller;

import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;
import org.springframework.stereotype.Controller;

import org.springframework.util.StreamUtils;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URL;


@Controller
@ResponseBody
@RequestMapping("/office")
public class EditorController {


    @GetMapping("/online")
    public void online(HttpServletResponse response, HttpServletRequest request) {
        try {
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/octet-stream");

            // 读文件输入流
            String filePath = "E:\\onlyoffice.docx";
            InputStream inputStream = new FileInputStream(filePath);

            // 复制文件流
            StreamUtils.copy(inputStream, response.getOutputStream());

            // 关闭输入流
            inputStream.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    @PostMapping(path = "/save")
    public void save(HttpServletResponse response, HttpServletRequest request) {

        try {
            // 获得response信息
            PrintWriter writer = response.getWriter();

            // 获取数据文件信息
            ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
            StreamUtils.copy(request.getInputStream(), byteArrayOutputStream);
            String fileInfoStr = byteArrayOutputStream.toString();
            byteArrayOutputStream.close();

            if (fileInfoStr.isEmpty()) {
                writer.write("request的输入流为空");
                return;
            }

            System.out.println(fileInfoStr);

            // 转化字符串对象转化为JSON对象
            JSONObject fileInfoObj = JSON.parseObject(fileInfoStr);

            // 获取编辑文件的状态
            int status = (Integer) fileInfoObj.get("status");
            int saved = 0;

            // 关闭正在编辑的文档10秒钟后,会收到该消息
            if(status == 2 || status == 3) {
                // 获取文件数据
                try {
                    URL url = new URL((String) fileInfoObj.get("url"));
                    java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
                    InputStream inputStream = connection.getInputStream();

                    if (inputStream == null){
                        throw new Exception("Stream is null");
                    }

                    // 保存编辑后的数据
                    String path = "E:\\onlyoffice.docx";
                    File file = new File(path);

                    // 复制数据流
                    FileOutputStream outputStream = new FileOutputStream(file);
                    StreamUtils.copy(inputStream, outputStream);

                    // 关闭数据资源
                    outputStream.close();
                    inputStream.close();
                    connection.disconnect();
                } catch (Exception ex) {
                    saved = 1;
                    ex.printStackTrace();
                }
            }

            System.out.println("保存文件成功");
            writer.write("{\"error\":" + saved + "}");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
}

5 截图

在这里插入图片描述

### OnlyOffice 安装配置 对于希望部署 OnlyOffice 的用户来说,安装过程相对简单明了。通过命令行工具可以快速完成服务器端的设置: ```bash sudo apt-get update sudo apt-get install onlyoffice-documentserver ``` 上述命令会更新包列表并安装最新版本的 OnlyOffice Document Server到Linux系统上[^1]。 #### 数据库配置 在数据库方面,建议创建专门用于OnlyOffice的数据存储环境。具体操作中,应当新建一个名为`onlyoffice`的数据库,并指定所有者为之前建立的同名操作系统账户。这项工作至关重要,因为后续安装流程依赖于此项设定来确保数据的安全性和访问权限的有效管理[^2]。 ### 使用教程 Once the installation is complete, accessing and using OnlyOffice involves navigating to the server's IP address or domain name through a web browser. The initial setup wizard guides users through configuring essential settings such as document storage locations and user authentication methods. For detailed instructions on how to use various features within OnlyOffice, including creating documents, spreadsheets, presentations, collaborative editing sessions, etc., refer directly to official documentation available at [ONLYOFFICE Help Center](https://helpcenter.onlyoffice.com/). ### 系统集成 针对那些寻求更深层次整合的企业级客户而言,将 ONLYOFFICE 协作空间与现有的业务应用程序相结合成为可能。例如,在构建单页应用(SPA)时,可以通过官方提供的API接口轻松实现这一目标。欲了解更多有关此方面的信息以及获取必要的开发资源和支持,请访问官方网站上的相关页面进行注册和进一步探索[^3]。
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值