vue或者其他前端框架使用canvas-editor

前景

canvas-editor是一个可自由编辑的设计器，可以实现电子病历或者word编辑等功能的效果，这个控件的基础是canvas渲染，通过查看原代码，我们可以发现，里面的每个字都会拆成一个元素，从而实现拖动排序。官网地址.

使用

首先下载源码源码
下载源码后，我们根据配置运行项目

注意，根据配置文件，我们可以看出来，用的运行环境是vite，并且node版本必须大于16.9.1
,如果你已经安装了较低的node，可以通过配置nvm切换node版本。

内嵌到项目里使用

1.首先，这个插件不支持开箱及用，所以，如果内嵌到VUE里使用的话，需要做一系列操作，比如是否支持TS,还需要将VUE组件里的template;详情见vue2配置

2.第二种方式，适用于所有的框架，不用额外配置
目前网上较多的方式就是内嵌到项目了，扣代码，加配置等等，但是，每个框架都不同，会有不同坑需要踩，就想着是不是可以直接通过打包的方式直接打包成静态文件,html.js,css的形式，然后我们之间通过ifram或者dom直接嵌入到项目中，这样不就可以适配所有前端框架了吗？

打包：直接build,但是build之后，发现打开html文件样式有问题。我们之间修改这里：

这样我们重新打包，打开打包后的html，式样和功能都没问题了。现在我们直接使用iframe引用或者通过dom引入。这样我们就可以得到完全可以适配其他框架的canvas_editor。

通讯问题

关于通讯问题，我们完全可以采用监听的形式，这样，canvas_editor项目和我们的前端项目就可以传输数据了。

效果完美嵌入