今日小知识分享：在线编辑文档插件——ONLYOFFICE

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

最近在后台管理系统中使用了ONLYOFFICE，实现了多人在线编辑文档的功能，今天有空就整理出来方便下次使用 。 （官网是英文的，对于我看起来着实困难。）

项目框架是vue，所以我就以vue项目为例子做个示例：

首先在index.html文件里引入后端给的地址，官网给的是示例，项目中还是要用后端生成的地址：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

组件中（外层的弹窗组件请忽略）：

 <div id="onlineEdit"></div>

  option: {
        document: {
          fileType: '',
          permissions: {
            comment: true,
            download: false,
            edit: false,
            copy: false, 
            print: false,
          },
          key: '',
          title: '',
          url: ''
        },
        editorConfig: {
          lang: 'zh-CN',
          // 回调接口，用于编辑后实现保存的功能,(关闭页面5秒左右会触发)
          callbackUrl: '',
          user: {
            id: '',
            name: ''
          }
        },
        token: '',
        height: '100%',
        width: '100%'
      },
      docEditor: null,

之后可根据需求对文档进行一些权限的设置：

• this.option.document.permissions.edit = true; 是否可编辑
• this.option.document.permissions.copy = true; 是否可复制
• this.option.document.permissions.download = true; 是否可下载（后端那边对文档进行设置的）
• this.option.document.permissions.comment = true; 是否可评论
• this.option.document.permissions.print = true; 是否可打印（后端那边对文档进行设置的）

（我只用到了编辑，复制的功能，下载是后端进行设置的，其他功能待研究。）

实例化：

 this.docEditor = new DocsAPI.DocEditor('onlineEdit', this.option);

完整代码可去gitHub上查看，有空我写个demo出来。

感谢掘友们支持！！！