ONLYOFFICE 协作空间 企业版使用秘籍-12.二次开发详细指南

在远程办公浪潮之下，越来越多的自由职业者与小型团队正在寻找更专业、更安全的在线协作方式。无论你是设计师、文案、开发者，还是平台创业者，您都可能面临这样的问题：

• 客户如何提交与确认需求？

• 多人如何在线编辑、审阅与交付文档？

• 项目如何“封闭运行”，避免信息外泄？

• 如何用极少成本快速上线一套“文档协作平台”？

现在，这一切您都可以通过 ONLYOFFICE 来实现。

什么是协作空间

ONLYOFFICE 协作空间 是一个协同办公平台，能够帮助用户更好地与客户、业务合作伙伴、承包商及第三方，进行文档、表格、幻灯片、PDF 和表单的在线编辑与协作。其开发者版就是我们开源解决方案的商业版本，主要用途是集成至您自有的商业软件和服务器。

为什么自由职业者需要协作空间

对于一个自由职业项目流程来说，文档贯穿着工作流程的始终，不论是内容创作、设计合同、报价单、项目计划书，还是客户审阅反馈、团队异步协作、版本管理等，都需要多方协作完成。然而，在现有的许多平台中，这些流程常常依赖第三方工具和聊天软件，带来割裂、混乱和数据安全隐患。

此时，一个安全便捷的文档协作空间便十分必要。 ONLYOFFICE 通过创建项目房间的方式，为特定项目房间分配工作人员，管理相关文件，并在结束后将房间归档。这一流程，很好地提升文档管理与项目沟通的效率，让办公协作更加轻松。

图片

接下来，我们将以示例展示如何用 ONLYOFFICE 协作空间 SDK ，为自由职业者们搭建高效的协作项目工作流程。

技术准备

在开始前，请确保使用服务器环境运行 HTML 文件，因为 JavaScript SDK 必须在服务器上启动。 您需要将服务器根目录的 URL 添加到协作空间的 "开发工具 "部分。

示例：https://api.onlyoffice.com/docspace/javascript-sdk/samples/advanced-samples/freelance-platform-docspace/

图片

步骤详解

接下来，我们将使用样例来展示如何使用 JavaScript SDK 构建一个模拟的 Freelance 平台项目空间，集成 ONLYOFFICE 的协作能力。

1. 初始化协作空间

首先，配置 SDK 的服务器地址和访问权限。需要对当前用户进行身份验证，以及初始化协作空间文件管理器（只读模式），准备开始工作。

document.addEventListener("DOMContentLoaded", function() {  fetch("{PORTAL_SRC}api/2.0/authentication", {    method: "POST",    headers: {      "Content-Type": "application/json",      "Accept": "application/json"    },    body: JSON.stringify({      userName: "{LOGIN}",      password: "{PASSWORD}"    })  })  .then(response => response.json())  .then(data => {    token = data.response.token  });   initDocSpace();});

2. 设置文件管理器

这一步，要设置您的文件管理器，如果已经创建了项目房间（ rootPath），就显示房间里的文件；若没有，则打开为项目创建页面。

function initDocSpace(rootPath = null, filter = null) {  const config = {    frameId: "ds-frame",    events: {      onAppReady: rootPath ? onWorkspaceReady : onInitialReady    }  }   if (rootPath) {    config.rootPath = rootPath;    config.filter = filter;    config.showHeader = false;  }   docSpace = DocSpace.SDK.initManager(config);}

3. 创建项目

页面准备好后，启用“创建订单”按钮并加载用户列表。您可以直接点击按钮开始创建新的项目。

function onInitialReady() {  fetchUsers(); // Load available freelancers  const button = document.getElementById("createOrderBtn")  button.addEventListener("click", createOrder)  button.disabled = false}

4. 创建项目房间

每个自由职业项目都可以用一个“协作空间”来封装。空间内的所有文件、成员都是隔离的，确保不同项目之间数据不互相干扰。

async function createOrder() {  document.getElementById("createOrderBtn").disabled = true  const title = document.getElementById("title").value  if (!title) return alert("Please enter a project title")    const room = await docSpace.createRoom(title, 2)  if (room.status && room.status !== 200) return alert("Error creating room")    roomId = room.id  initDocSpace("/rooms/shared/" + roomId, { folder: roomId });}

5. 显示文件管理界面

创建项目后显示文件工作区，准备分配自由职业者。

function onWorkspaceReady() {  document.getElementById("ds-frame").style.display = "block"  document.getElementById("orderForm").classList.add("hidden")  document.getElementById("workspace").classList.remove("hidden")  document.getElementById("confirmUserBtn").addEventListener("click", confirmUser)}

6. 选择和邀请自由职业者

您可以从列表中选择合适的协作者加入房间，点击确认后，这位自由职业者自动进入房间，上传和修改房间内的文档。在项目结束后，点击“完成订单”按钮即可。

function confirmUser() {    if (!selectedUserId) return alert("Please select a freelancer")    document.getElementById("usersList").style.display = "none"    document.getElementById("confirmUserBtn").textContent = "Complete Order"    document.getElementById("confirmUserBtn").removeEventListener("click", confirmUser)    document.getElementById("completeOrderBtn").style.display = "block"    document.getElementById("completeOrderBtn").addEventListener("click", completeOrder)    setRoomAccessRights("ContentCreator")}

7.  加载自由职业者名单

页面加载时，自动从系统里获取所有自由职业者的名单；然后显示成列表，方便您可以自由选择。

async function fetchUsers() {    try {        const response = await fetch(`{PORTAL_SRC}/api/2.0/people`, {            headers: { "Authorization": `Bearer ${token}` }        })        const data = await response.json()        if (data.response && data.response.length > 0) {            const usersContainer = document.getElementById("usersContainer")            usersContainer.innerHTML = ""            data.response.forEach(user => {                const userDiv = document.createElement("div")                userDiv.className = "user-item"                userDiv.dataset.userId = user.id                userDiv.textContent = `${user.firstName} ${user.lastName}`                userDiv.addEventListener("click", function() {                    document.querySelectorAll(".user-item").forEach(item => item.classList.remove("selected"))                    this.classList.add("selected")                    selectedUserId = user.id                    selectedUserEmail = user.email                    selectedUserName = `${user.firstName} ${user.lastName}`                });                usersContainer.appendChild(userDiv)            });        }    } catch (error) {        console.error("Error fetching users:", error)    }}

8. 项目结束，归档房间

项目完成后，当您点击“完成订单”，系统会把自由职业者的权限收回，并把房间归档，归档后，房间就不能再修改了，项目正式结束。

function completeOrder() {  setRoomAccessRights(0) // remove access  fetch(`{PORTAL_SRC}api/2.0/files/rooms/${roomId}/archive`, {    method: "PUT",    headers: {      "Authorization": `Bearer ${token}`,      "Content-Type": "application/json",      "Accept": "application/json"    },    body: JSON.stringify({ deleteAfter: true })  })}

福利推荐-软件获取方法

        豆容器市场专注提供优质Docker应用服务，集成一键式容器安装功能，助力用户快速部署OnlyOffice、协作空间、Nextcloud、可道云等办公应用。平台新增IPv6内网直连技术，搭配自动化SSL证书配置及智能域名解析功能，为家庭云服务提供完整技术方案，简化私有云搭建与运维流程，轻松实现高效云端协作管理。

        onlyoffice已经支持ARM和x86双模式安装,其他软件同步支持中。

        地址: https://ds.sendtokindle.net.cn/

图片