大家好，欢迎来到IT知识分享网。

word在线编辑

查看一些文档金格插件WebOffice2015、chrome浏览器插件、only-office、UEditor、TinyMCE、CKEditor、wangeditor、canvas-editor

最后选择了only-office和canvas-editor

only-office非常功能强大，word、ppt、excel都支持在线编辑预览，还支持协同，又有免费开源版。

附上本地运行demo:

一、安装docker

二、安装并启动 Onlyoffice 服务：

docker run -i -t -d -p 8701:80 onlyoffice/documentserver:版本号

如果是第 1 次执行这个命令，会先去下载 Onlyoffice，比较慢，约等待 3~10 分钟，网络畅通一点的会快一些。如果是已经安装过则直接进行启动。

三、启动内置服务

先执行 docker ps 查看 Onlyoffice 容器 ID：

# 注意这里要将 id 替换成自己的 docker exec -it f2a3eb675ad1 /bin/bash

然后执行 docker exec -it ID /bin/bash 进入容器，这里将获取到的 ID 替换一下：

# 启动所有的内置服务 supervisorctl restart all # 退出容器 exit

最后访问 http://IP:8701/example 页面（这里要注意，IP 不能是 localhost 和 127.0.0.1，一定要用真实 IP 来访问）

因为开发周期，后端又比较懒不想花时间去看文档。这一方案被我放弃了

最后选择了canvas-editor

canvas-editor

为什么选它了，开发周期短，界面与word编辑器比较像，可以快速集成到vue，虽然作者没有开箱即用版。

在vue中主要实现方式就是采用开源项目代码。

在组件模块，新建vue文件，html采用开源项目代码，分3个部分，工具栏，侧边菜单，主要内容，底部工具，旁边批注。通过import引入开源样式，注意样式冲突。在onMounted，采用开源main.ts window.onload代码。

<div class="menu" editor-component="menu"> ... </div> <div class="catalog" editor-component="catalog"> ... </div> <div id="canvasEditor" class="canvas-editor"></div> <div class="footer-canvas" editor-component="footer"> ... </div>

const instance = new Editor( document.querySelector('#canvasEditor'), { header: props.header, main: props.main, footer: props.footer }, options ); console.log('实例', instance); editorRef.value = instance; // 工具栏方法 例： // 2. | 撤销 | 重做 | 格式刷 | 清除格式 | const undoDom = document.querySelector('.menu-item__undo'); undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`; undoDom.onclick = function () { console.log('undo'); instance.command.executeUndo(); }; 

<style lang="scss" scoped> #canvasEditor { display: flex; justify-content: center; background: #f2f4f7; } @import url(@/assets/css/dialog.css); @import url(@/assets/css/signature.css); </style>

思路通过富文本编辑器实现在线编辑功能，通过插件提供的api获取图片base64和文本数据，通过接口保存至数据库，通过列表数据复显编辑，后端获取到图片数据转pdf或者其他格式都可以。自己转pdf则是通过html2canvas jspdf

使用方式

例： <canvas-editor v-if="!loadingInit" :header="canvasEditor.header" :main="canvasEditor.main" :footer="canvasEditor.footer" :options="canvasEditor.options" @getCanvasEditorData="getCanvasEditorData" /> import CanvasEditor from '@/components/editor/index.vue'; components: { CanvasEditor }, canvasEditor: { main: [], options: [], header: [], footer: [] }, // getCanvasEditorData 事件 主要获取富文本 main内容 image的base64 options配置项 用于数据保存 getCanvasEditorData: ({ value, imgage, options }) => { }, 

主要配置

 // 页眉配置 header: { type: Array, default: [] }, // 主要编辑内容 main: { type: Array, default: [] }, // 页脚信息 footer: { type: Array, default: [] }, // options: { type: Object, default: {} }, // 批注 TODO commentList: { type: Array, default: [] }

完整配置

interface IEditorOption { mode?: EditorMode // 编辑器模式：编辑、清洁（不显示视觉辅助元素。如：分页符）、只读、表单（仅控件内可编辑）、打印（不显示辅助元素、未书写控件及前后括号）。默认：编辑 defaultType?: string // 默认元素类型。默认：TEXT defaultColor?: string // 默认字体颜色。默认：#000000 defaultFont?: string // 默认字体。默认：Microsoft YaHei defaultSize?: number // 默认字号。默认：16 minSize?: number // 最小字号。默认：5 maxSize?: number // 最大字号。默认：72 defaultBasicRowMarginHeight?: number // 默认行高。默认：8 defaultRowMargin?: number // 默认行间距。默认：1 defaultTabWidth?: number // 默认tab宽度。默认：32 width?: number // 纸张宽度。默认：794 height?: number // 纸张高度。默认：1123 scale?: number // 缩放比例。默认：1 pageGap?: number // 纸张间隔。默认：20 underlineColor?: string // 下划线颜色。默认：#000000 strikeoutColor?: string // 删除线颜色。默认：#FF0000 rangeColor?: string // 选区颜色。默认：#AECBFA rangeAlpha?: number // 选区透明度。默认：0.6 rangeMinWidth?: number // 选区最小宽度。默认：5 searchMatchColor?: string // 搜索高亮颜色。默认：#FFFF00 searchNavigateMatchColor?: string // 搜索导航高亮颜色。默认：#AAD280 searchMatchAlpha?: number // 搜索高亮透明度。默认：0.6 highlightAlpha?: number // 高亮元素透明度。默认：0.6 resizerColor?: string // 图片尺寸器颜色。默认：#4182D9 resizerSize?: number // 图片尺寸器大小。默认：5 marginIndicatorSize?: number // 页边距指示器长度。默认：35 marginIndicatorColor?: string // 页边距指示器颜色。默认：#BABABA margins?: IMargin // 页面边距。默认：[100, 120, 100, 120] pageMode?: PageMode // 纸张模式：连页、分页。默认：分页 tdPadding?: IPadding // 单元格内边距。默认：[0, 5, 5, 5] defaultTrMinHeight?: number // 默认表格行最小高度。默认：42 defaultColMinWidth?: number // 默认表格列最小宽度（整体宽度足够时应用，否则会按比例缩小）。默认：40 defaultHyperlinkColor?: string // 默认超链接颜色。默认：#0000FF header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;} footer?: IFooter // 页脚信息。{bottom?:number; maxHeightRadio?:MaxHeightRatio;} pageNumber?: IPageNumber // 页码信息。{bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;} paperDirection?: PaperDirection // 纸张方向：纵向、横向 inactiveAlpha?: number // 正文内容失焦时透明度。默认值：0.6 historyMaxRecordCount?: number // 历史（撤销重做）最大记录次数。默认：100次 printPixelRatio?: number // 打印像素比率（值越大越清晰，但尺寸越大）。默认：3 maskMargin?: IMargin // 编辑器上的遮盖边距（如悬浮到编辑器上的菜单栏、底部工具栏）。默认：[0, 0, 0, 0] letterClass?: string[] // 排版支持的字母类。默认：a-zA-Z。内置可选择的字母表类：LETTER_CLASS contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认：[] scrollContainerSelector?: string // 滚动区域选择器。默认：document wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;} control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string;} checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;} radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;} cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string;} title?: ITitleOption // 标题配置。{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;} placeholder?: IPlaceholder // 编辑器空白占位文本 group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean} pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];} zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;} background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认：{color: '#FFFFFF'} lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;} separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;} }

页眉配置

interface IHeader { top?: number // 距离页面顶部大小。默认：30 maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF disabled?: boolean // 是否禁用 }

页码配置

interface IPageNumber { bottom?: number // 距离页面底部大小。默认：60 size?: number // 字体大小。默认：12 font?: string // 字体。默认：Microsoft YaHei color?: string // 字体颜色。默认：#000000 rowFlex?: RowFlex // 行对齐方式。默认：CENTER format?: string // 页码格式。默认：{pageNo}。示例：第{pageNo}页/共{pageCount}页 numberType?: NumberType // 数字类型。默认：ARABIC disabled?: boolean // 是否禁用 startPageNo?: number // 起始页码。默认：1 fromPageNo?: number // 从第几页开始出现页码。默认：0 }

水印配置

interface IWatermark { data: string // 文本。 color?: string // 颜色。默认：#AEB5C0 opacity?: number // 透明度。默认：0.3 size?: number // 字体大小。默认：200 font?: string // 字体。默认：Microsoft YaHei }

占位文本配置

interface IPlaceholder { data: string // 文本。 color?: string // 颜色。默认：#DCDFE6 opacity?: number // 透明度。默认：1 size?: number // 字体大小。默认：16 font?: string // 字体。默认：Microsoft YaHei }