說明：onlyoffice主要依賴于后端部署的環(huán)境（docker、文件服務(wù)器等），本篇文章只包含前端配置部分

官方文檔地址

貼一個官方的文檔 onlyoffice API

部分故障排除

onlyoffice 故障排除

前端部分

1. 在項目index.html引入

<script type="text/javascript"src="http://安裝docker的主機ip:9000/web-apps/apps/api/documents/api.js"></script>

2. 頁面文件中配置

首先給一個盒子

<div id="coEditContainer" ></div>

然后初始化代碼，這里只寫了常用的配置，完整的配置可以看文檔

let config = {
  events: {
  	// 有許多事件可以調(diào)用，具體看文檔 https://api.onlyoffice.com/editors/config/events
    // 請求關(guān)閉編輯器確認后觸發(fā)
    onRequestClose: () => {
      console.log('文件編輯器開始關(guān)閉, onRequestClose');
      this.docEditor.destroyEditor();
      this.coEditStatus = false;
      this.fullscreen = false;
    },
    // 發(fā)生錯誤或其他特定事件時調(diào)用，錯誤消息在數(shù)據(jù)參數(shù)中發(fā)送
    onError: (event) => {
      console.log(`err code: ${event.data.errorCode}, description: ${event.data.errorDescription}`);
    }
  },
  document: {
    fileType: doc.document.fileType, // 文件的類型
    // 文件的key，多人協(xié)同編輯重要字段，這里我是根據(jù)要編輯的文件，調(diào)用了后端接口
    // 從后端獲取一些文件的基本信息以及文件的key
    key: doc.document.key, 
    title: data.documentName, // 文件名稱
    url: `${window.config.CoEditDownloadApi}${data.documentUrl}`, // 文件源地址
    permissions: {
      // 權(quán)限控制
      // fillForms: true,
      // comment: false, // 評論功能的開關(guān)
      // chat: true, // 聊天內(nèi)容開關(guān)
      copy: true, // 允許復(fù)制內(nèi)容
      download: true, // 是否允許下載（其實就是另存為，因為保存就是保存在服務(wù)器）
      edit: true, // 是否允許編輯文檔
      print: true, // 是否允許打印
      review: true, // 可編輯時才可用，功能沒試過，應(yīng)該是協(xié)同編輯下的評審
      save: true,
      deleteCommentAuthorOnly: true, // 僅允許刪除其注釋
      editCommentAuthorOnly: true, // 僅允許編輯其注釋
      protect: false, // 定義工具欄上的保護菜單是否顯示

    },
  },
  documentType: 'word', // 三種 word(.docx) / cell(.xlsx) / slide(.ppt)
  editorConfig: {
    callbackUrl: `${window.config.CoEditCallbackApi}${data.documentUrl}`, // 文件回調(diào)地址
    lang: "zh-CN", // 編輯器ui的語言
    mode: 'edit', // 設(shè)定文檔打開的時候處于什么狀態(tài) 默認為edit
    user: {
      // 當前正在view/edit此文檔的用戶信息
      name: `財務(wù)部-張三`, // full name
    },
    // 定義共享編輯模式（快速fast/嚴格strict）, change為控制是否允許修改
    coEditing: {
      mode: 'fast',
      change: false
    }
  },
  height: "80%",
};
// console.log(config);
this.docEditor = new DocsAPI.DocEditor("coEditContainer", config);

實現(xiàn)效果（支持多人協(xié)同編輯）

ps

后端的部署，可以借鑒這位大哥的
如何在 Windows 上 使用 ONLYOFFICE 協(xié)作編輯文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-663477.html

到了這里，關(guān)于onlyoffice協(xié)同編輯（多人共享編輯）、在線文檔編輯，支持word、excel的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！