vue集成onlyoffice安装教程及套红插件开发【word在线编辑】

上一篇Vue 3自定义表单的高级应用自定义表单，接下来介绍一下office在线编辑。

ONLYOFFICE文档是由Ascensio System SIA公司开发的一套在线办公软件，可以打开阅读并编辑文档、表格和幻灯片文件，兼容开放XML格式Office文档：.docx文档、.pptx幻灯片、.xlsx表格，并且支持多人实时协同编辑。ONLYOFFICE文档是开源软件，包括社区版、企业版和开发版三个版本，可以把ONLYOFFICE文档安装到使用者自己本地的或者云端的服务器上，集成在线编辑器的功能、ONLYOFFICE协同编辑的功能、以及其他常见服务，开发版本允许把在线编辑器开发集成到网页版应用程序中。

官网下载安装包在window系统安装需要安装Erlang、rabbitmq、数据库可修改为myslq数据默认为pg库。但是在window环境下安装当保存文档时会报错导致不能保存文档。

在linux安装保存时没有问题，不知道哪里出了问题。那么如果要尝试可以安装docker。需要启用 Windows 操作系统中的 Hyper-V 和容器特性。接下来的步骤会假设读者的计算机已经开启了 BIOS 设置中的硬件虚拟化支持。如果没有开启，读者需要在机器上执行下面的步骤。首先，读者需要确认在 Windows 10 操作系统中，Hyper-V 和容器特性已安装并且开启。

1) 右键单击 Windows 开始按钮并选择“应用和功能”页面。

2) 单击“程序和功能”链接。

3) 单击“启用或关闭Windows功能”。

4) 确认Hyper-V和容器复选框已经被勾选，并单击确定按钮。

按上述步骤操作完成后，会安装并开启 Hyper-V 和容器特性，如下图所示。这时需要重启操作系统。下载docker桌面版安装即可。

安装好docker后cmd执行安装onlyoffice

启动容器并指定端口为

配置onlyoffice

1.查询容器

2.进入容器

3.进入配置文件目录

4.编辑配置文件

#如果不能编辑,需安装vim

#如果不能安装vim，可以在容器外部编辑配置文件后上传至容器：

5.重启服务

官网提供了vue和react集成示例，集成到项目中有些问题，我这里封装了一下封装了onlyoffice的组件需要传配置文件即可。

代码示例:

Callback handler

The document editing service informs the document storage service about the status of the document editing using thecallbackUrlfrom JavaScript API. The document editing service use the POST request with the information in body.

It is received 10 seconds after the document is closed for editing with the identifier of the user who was the last to send the changes to the document editing service. ThecallbackUrlfrom the user who made the last changes to the file is used.

编写回调函数将保存后的文档保存我自己的路径中，我们可以用一台服务器作为文档服务器，其他系统通过接口可以打开编辑、预览等当状态为2时。回调函数示例：

插件开发git有插件开发的样例，可自己clone下来自己研究研究。

我这里写了一个最简单插件

最终实现的效果

到这里发现字体太少，我们将window中的字体上传到服务中。

1.然后再windows系统下-控制面板--字体，所有字体全部复制，放到文件夹fonts

2.将fonts目录上传至服务器

3.进入docker容器

4.切换至字体目录，删除目录所有文件

5.切换目录，删除文件

6.将字体从服务器复制到容器字体目录下

7.进入容器/usr/bin目录 输入命令