Docker部署OnlyOffice DocumentServer后，网页无法加载DocEditor求助

核心问题：脚本执行时机过早 #

你的初始化脚本写在<head>标签内，此时页面的<div id="placeholder">还未被浏览器渲染完成，DocsAPI无法找到目标容器，导致编辑器实例无法挂载，自然无法显示。控制台能输出log 1和log 2，说明脚本本身正常执行，但编辑器初始化时找不到挂载节点。

修复方案 #

方案1：将脚本移到<body>末尾 #

把初始化编辑器的脚本放在<div id="placeholder">之后、</body>之前，确保DOM元素已加载完成：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocEditor</title>
    <script type="text/javascript" src="http://localhost:80/web-apps/apps/api/documents/api.js"></script>
</head>

<body>
    <div id="placeholder"></div>
    <script>
        console.log("log 1");
        const docEditor = new DocsAPI.DocEditor("placeholder", {
            documentType: "word",
            document: {
                fileType: "docx",
                title: "document.docx",
                url: "http://localhost:8000/document.docx",
            },
            editorConfig: {
                debug: true,
                mode: "edit",
                width: "100vw",
                height: "100vh",
                onError: function (error) {
                    console.error(error);
                },
                onDocumentReady: function () {
                    console.log("Document Ready");
                }
            }
        });
        console.log("log 2");
    </script>
</body>

</html>

方案2：监听DOM加载完成事件 #

如果不想移动脚本位置，可通过DOMContentLoaded事件延迟编辑器初始化，确保DOM加载完成：

document.addEventListener('DOMContentLoaded', function() {
    console.log("log 1");
    const docEditor = new DocsAPI.DocEditor("placeholder", {
        // 原配置内容保持不变
        documentType: "word",
        document: {
            fileType: "docx",
            title: "document.docx",
            url: "http://localhost:8000/document.docx",
        },
        editorConfig: {
            debug: true,
            mode: "edit",
            width: "100vw",
            height: "100vh",
            onError: function (error) {
                console.error(error);
            },
            onDocumentReady: function () {
                console.log("Document Ready");
            }
        }
    });
    console.log("log 2");
});

额外排查点：跨域限制 #

若修复脚本时机后仍无法渲染，需检查跨域限制：
OnlyOffice默认会限制跨域请求，需在容器配置中添加允许的文档来源域名。修改你的docker-compose.yml：

services:
  # ... 其他服务定义
  onlyoffice:
    image: onlyoffice/documentserver
    restart: always
    ports:
      - 80:80
    environment:
      - ALLOWED_HOSTS=localhost,localhost:8000
      - JWT_ENABLED=false # 若未配置JWT验证，先关闭避免报错

修改后重启容器：

docker-compose restart onlyoffice

内容的提问来源于stack exchange，提问作者igor_ball