# vue集成CanvasEditor实现Word在线编辑器组件

**Repository Path**: jqingsoft/csdn

## Basic Information

- **Project Name**: vue集成CanvasEditor实现Word在线编辑器组件
- **Description**: vue项目集成CanvasEditor实现Word在线编辑器（文档地址：https://blog.csdn.net/weixin_52443895/article/details/139693928）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-04-18
- **Last Updated**: 2025-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue集成CanvasEditor实现Word在线编辑器组件

#### Description
vue项目集成CanvasEditor实现Word在线编辑器（使用参考文档地址：https://blog.csdn.net/weixin_52443895/article/details/139693928）

本部分代码只是一个vue组件的封装， 使用时，按照组件引用即可。
例：

```
// 比如组件放在components中，在父组件中引用
import CanvasEditor from '@/components/CanvasEditor/index';

// 子组件
<CanvasEditor ref="wordEditor":editMode="type" :htmlData="htmlData" :docJson="docJson" :key="keys" @save="save" @isSave="getSave"></CanvasEditor>

// data数据
htmlData: '', // 编辑器html数据
docJson: null, // 编辑器getValue数据
keys： new Date().getTime() // 给编辑器赋值不刷新的时候，改变key

```

再次声明： 非开箱即用，复制到项目中可能会有其他报错，参考官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html
源码地址：https://github.com/Hufe921/canvas-editor官方文档解决！
希望记录的问题能帮助到你！