ONLYOFFICE协作空间API指南：使用JavaScript SDK为每个用户结构化协作房间

随着企业数字化转型加速，安全可控的文档协作环境 成为客户服务的核心需求。通过ONLYOFFICE JavaScript SDK，开发者可为每位客户创建独立结构化协作房间。

关于 ONLYOFFICE 协作空间

**ONLYOFFICE 协作空间**是一个文档编辑与协作平台，自带文档编辑器，提供一整套用于文档储存、共享和协作的工具。可以高效地与同事、客户、业务合作伙伴、承包商及第三方进行文档协作。

关于房间类型

协作空间可设置灵活的访问权限，通过创建房间、邀请他人加入、协作和沟通完成工作，支持以下房间类型：

**公共房间：**无需注册即可共享文档以供查看、编辑、评论或审阅。还可以将此房间嵌入到任何网页界面中。
**表单填写房间：**将 PDF 表单上传至房间。邀请成员和访客填写 PDF 表单。查看已完成的表单并分析电子表格中自动收集的数据。
**协作房间：**与团队就一个或多个文档进行协作
**虚拟数据房间：**在逐步填写和签署文档时实现高级文件安全性和透明度。设置水印，自动索引并跟踪所有内容，限制下载和复制操作。
**自定义房间：**根据不同目的和用途对房间进行自定义设置
**根据模板创建房间：**使用模板创建房间，将套用房间模板中的所有设置、文件夹和文件。

对于企业来说，保证安全且高效的办公协作至关重要。因此，许多企业会选择本地部署 或将 ONLYOFFICE 协作空间进行商业开发，集成到更多的平台或系统中。

关于 ONLYOFFICE JavaScript SDK

ONLYOFFICE JavaScript SDK 是一套用于在网页应用中集成文档编辑功能的开发工具包，允许开发者通过 JavaScript 与 ONLYOFFICE 文档编辑器进行深度交互。

如何使用JavaScript SDK为每个客户创建结构化房间

此示例演示了如何使用协作空间 JavaScript SDK 为每个新客户端创建结构化工作区。当用户添加客户端时，系统：

创建具有 clients 名称的共享房间
在该房间内自动生成一组预定义文件夹
将特定文档模板（DOCX、XLSX、PDF）插入到相应的文件夹中

这允许客户快速加入标准化的工作空间环境。

准备工作

请确保您使用服务器环境运行 HTML 文件，因为 JavaScript SDK 必须在服务器上启动。
您需要将服务器根目录的 URL 添加到 DocSpace 的 Developer Tools 部分。

脚本执行步骤

1. 定义模板并初始化 SDK

复制代码

const templates = {
  instructions: "{PUBLIC_DOCX_ID}",
  priceList: "{PUBLIC_XLSX_ID}",
  contract: "{PUBLIC_PDF_ID}"
};

function onAppReady() {
  document.getElementById("add").removeAttribute("disabled")
  document.getElementById("ds-frame").style.display = "none"
}

docSpace = DocSpace.SDK.initManager({
  frameId: "ds-frame",
  events: { onAppReady }
});

模板 ID 指向用作基本模板的公共 DocSpace 文档
SDK 已初始化并隐藏（）并在准备就绪后激活 UI iframe

2. 添加客户端并创建具有文件夹结构的房间

复制代码

async function addClient() {
  const input = document.getElementById("clientInput")
  const clientName = input.value.trim()

  if (!clientName) return

  const list = document.getElementById("clientList")
  const li = document.createElement("li")
  li.textContent = clientName
  list.appendChild(li)

  const room = await docSpace.createRoom(clientName, 2)
  if (room.status && room.status !== 200) {
    alert(`Failed to create room: ${room.status}`)
    return
  }

  input.value = ""
  const roomId = room.id

  // Create folder: Instructions
  const instructionsFolder = await docSpace.createFolder(roomId, "Instructions")
  if (instructionsFolder.status && instructionsFolder.status !== 200) {
    alert("Failed to create 'Instructions' folder")
    return
  }

  const docxFile = await docSpace.createFile(
    instructionsFolder.id,
    "Instructions.docx",
    templates.instructions
  )
  if (docxFile.status && docxFile.status !== 200) {
    alert("Failed to insert Instructions.docx")
    return
  }

  // Create folder: Price List
  const priceListFolder = await docSpace.createFolder(roomId, "Price List")
  if (priceListFolder.status && priceListFolder.status !== 200) {
    alert("Failed to create 'Price List' folder")
    return
  }

  const xlsxFile = await docSpace.createFile(
    priceListFolder.id,
    "Price List.xlsx",
    templates.priceList
  )
  if (xlsxFile.status && xlsxFile.status !== 200) {
    alert("Failed to insert Price List.xlsx")
    return
  }

  // Create folder: Contracts
  const contractsFolder = await docSpace.createFolder(roomId, "Contracts")
  if (contractsFolder.status && contractsFolder.status !== 200) {
    alert("Failed to create 'Contracts' folder")
    return
  }

  const pdfFile = await docSpace.createFile(
    contractsFolder.id,
    "Contract template.pdf",
    templates.contract
  )
  if (pdfFile.status && pdfFile.status !== 200) {
    alert("Failed to insert Contract template.pdf")
    return
  }

  // Create folder: Invoices for payment (no files)
  const invoicesFolder = await docSpace.createFolder(roomId, "Invoices for payment")
  if (invoicesFolder.status && invoicesFolder.status !== 200) {
    alert("Failed to create 'Invoices for payment' folder")
    return
  }
}

为客户创建共享聊天室
添加四个文件夹
更新界面中的客户端列表

3. 处理 Enter key 提交

复制代码

document.getElementById("clientInput").addEventListener("keypress", function (e) {
  if (e.key === "Enter") {
    addClient()
  }
});

允许用户按 Enter 键触发房间和文件夹的创建

完整示例

复制代码

<!-- Step 1: HTML Setup -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Manager</title>
    <!-- Replace with your actual portal URL -->
    <script src="{PORTAL_SRC}/static/scripts/sdk/1.0.1/api.js"></script>
    <style>
      /* Full CSS omitted for brevity */
    </style>
  </head>
  <body>
    <!-- Step 2: Client input form -->
    <div class="container">
      <input type="text" id="clientInput" placeholder="Enter client name">
      <button id="add" disabled onclick="addClient()">Add Client</button>
    </div>
    <!-- Step 3: Client list display -->
    <ul id="clientList"></ul>
    <!-- Step 4: SDK iframe (hidden) -->
    <iframe id="ds-frame" style="display: none;"></iframe>
    <!-- Step 5: JavaScript SDK Logic -->
        <script>
      let docSpace;

      // Step 5: Template file IDs (replace with real ones)
      const templates = {
        instructions: "{PUBLIC_DOCX_ID}",
        priceList: "{PUBLIC_XLSX_ID}",
        contract: "{PUBLIC_PDF_ID}"
      };

      // Step 6: Enable Add Client button when SDK is ready
      function onAppReady() {
        document.getElementById("add").removeAttribute("disabled")
        document.getElementById("ds-frame").style.display = "none"
      }

      // Step 7: Init DocSpace SDK
      docSpace = DocSpace.SDK.initManager({
        frameId: "ds-frame",
        events: { onAppReady }
      })

      // Step 8: Add client and create room with folder structure
      async function addClient() {
        const input = document.getElementById("clientInput")
        const clientName = input.value.trim()

        if (!clientName) return

        const list = document.getElementById("clientList")
        const li = document.createElement("li")
        li.textContent = clientName
        list.appendChild(li)

        const room = await docSpace.createRoom(clientName, 2)
        if (room.status && room.status !== 200) {
          alert(`Failed to create room: ${room.status}`)
          return
        }

        input.value = ""
        const roomId = room.id

        // Create folder: Instructions
        const instructionsFolder = await docSpace.createFolder(roomId, "Instructions")
        if (instructionsFolder.status && instructionsFolder.status !== 200) {
          alert("Failed to create 'Instructions' folder")
          return
        }

        const docxFile = await docSpace.createFile(
          instructionsFolder.id,
          "Instructions.docx",
          templates.instructions
        )
        if (docxFile.status && docxFile.status !== 200) {
          alert("Failed to insert Instructions.docx")
          return
        }

        // Create folder: Price List
        const priceListFolder = await docSpace.createFolder(roomId, "Price List")
        if (priceListFolder.status && priceListFolder.status !== 200) {
          alert("Failed to create 'Price List' folder")
          return
        }

        const xlsxFile = await docSpace.createFile(
          priceListFolder.id,
          "Price List.xlsx",
          templates.priceList
        )
        if (xlsxFile.status && xlsxFile.status !== 200) {
          alert("Failed to insert Price List.xlsx")
          return
        }

        // Create folder: Contracts
        const contractsFolder = await docSpace.createFolder(roomId, "Contracts")
        if (contractsFolder.status && contractsFolder.status !== 200) {
          alert("Failed to create 'Contracts' folder")
          return
        }

        const pdfFile = await docSpace.createFile(
          contractsFolder.id,
          "Contract template.pdf",
          templates.contract
        )
        if (pdfFile.status && pdfFile.status !== 200) {
          alert("Failed to insert Contract template.pdf")
          return
        }

        // Create folder: Invoices for payment (no files)
        const invoicesFolder = await docSpace.createFolder(roomId, "Invoices for payment")
        if (invoicesFolder.status && invoicesFolder.status !== 200) {
          alert("Failed to create 'Invoices for payment' folder")
          return
        }
      }


      // Step 9: Submit on Enter
      document.getElementById("clientInput").addEventListener("keypress", function (e) {
        if (e.key === "Enter") {
          addClient()
        }
      });
    </script>
  </body>
</html>

希望以上示例对您有帮助，欢迎尝试用 ONLYOFFICE JavaScript SDK，为构建客户中心化协作生态提供了强大基石。

ONLYOFFICE协作空间API指南：使用JavaScript SDK为每个用户结构化协作房间

关于 ONLYOFFICE 协作空间

关于房间类型

关于 ONLYOFFICE JavaScript SDK

如何使用JavaScript SDK为每个客户创建结构化房间

准备工作

脚本执行步骤

1. 定义模板并初始化 SDK

2. 添加客户端并创建具有文件夹结构的房间

3. 处理 Enter key 提交

完整示例

相关链接