js 实现word在线编辑

使用 Web Office SDK 实现 Word 在线编辑

微软官方提供的 Web Office SDK 可快速集成 Word 在线编辑功能。需要注册微软开发者账号获取 API 密钥。

安装 SDK 包：

npm install @microsoft/office-js

初始化编辑器：

Office.onReady().then(() => {
    Word.run(async (context) => {
        // 操作文档内容
        const body = context.document.body;
        body.insertText("Hello World", "End");
        await context.sync();
    });
});

基于 OnlyOffice 的解决方案

OnlyOffice 提供开源文档编辑器，支持私有化部署。需要下载社区版或使用云服务。

集成示例代码：

const config = {
    document: {
        fileType: "docx",
        key: "unique-document-key",
        title: "Document.docx",
        url: "https://example.com/document.docx"
    },
    editorConfig: {
        callbackUrl: "https://example.com/save"
    }
};

new DocsAPI.DocEditor("editor-container", config);

使用 CKEditor 的 Word 插件

CKEditor 5 配合 Word 导入导出插件可实现基础功能。适合轻量级需求。

安装依赖：

npm install @ckeditor/ckeditor5-build-decoupled-document @ckeditor/ckeditor5-word-count

初始化编辑器：

DecoupledEditor.create(document.querySelector('#editor'))
    .then(editor => {
        document.querySelector('.toolbar').appendChild(editor.ui.view.toolbar.element);
    });

浏览器原生编辑方案

利用 contenteditable 属性实现简易编辑器，适合基础文本处理。

HTML 结构：

<div id="editor" contenteditable="true"></div>

样式控制：

#editor {
    min-height: 300px;
    border: 1px solid #ddd;
    padding: 10px;
}

文档转换与预览方案

通过 mammoth.js 实现 docx 转 HTML 的预览编辑：

安装库：

npm install mammoth

转换代码：

mammoth.extractRawText({arrayBuffer: fileData})
    .then(result => {
        document.getElementById('preview').innerHTML = result.value;
    });

每种方案需根据具体场景选择：

• 企业级应用推荐 Web Office SDK 或 OnlyOffice
• 轻量需求可使用 CKEditor
• 简易编辑器适合基础文本处理
• 文档转换方案适合预览场景