查看一些文档金格插件WebOffice2015、chrome浏览器插件、only-office、UEditor、TinyMCE、CKEditor、wangeditor、canvas-editor
最后选择了only-office和canvas-editor
only-office非常功能强大，word、ppt、excel都支持在线编辑预览，还支持协同，又有免费开源版。
附上本地运行demo:
如果是第 1 次执行这个命令，会先去下载 Onlyoffice，比较慢，约等待 3~10 分钟，网络畅通一点的会快一些。如果是已经安装过则直接进行启动。
三、启动内置服务
先执行 docker ps 查看 Onlyoffice 容器 ID：
然后执行 docker exec -it ID /bin/bash 进入容器，这里将获取到的 ID 替换一下：
最后访问 http://IP:8701/example 页面（这里要注意，IP 不能是 localhost 和 127.0.0.1，一定要用真实 IP 来访问）
因为开发周期，后端又比较懒不想花时间去看文档。这一方案被我放弃了
最后选择了canvas-editor
为什么选它了，开发周期短，界面与word编辑器比较像，可以快速集成到vue，虽然作者没有开箱即用版。
在vue中主要实现方式就是采用开源项目代码。
在组件模块，新建vue文件，html采用开源项目代码，分3个部分，工具栏，侧边菜单，主要内容，底部工具，旁边批注。通过import引入开源样式，注意样式冲突。在onMounted，采用开源main.ts window.onload代码。
Vue3的index.vue示例：
onMounted 核心使用源码示例：
主要思路：通过富文本编辑器实现在线编辑功能，通过插件提供的api获取图片base64和文本数据，通过接口保存至数据库，通过列表数据复显编辑，后端获取到图片数据转pdf或者其他格式都可以。自己转pdf则是通过html2canvas jspdf