前言
哎，最近逛论坛，看的文章，真是水的一批，且不说水平咋样，有些结论、方法都是错的，不符合前端模块化、工程化规范，自己写写demo，觉得成功了，恨不得马上分享写博客，博客质量真的堪忧。我本来是不想写这篇文章的，但是看到网上 canvas-editor 错误的指导文章，我又忍不住，还是从底层基础使用来给大家说说canvas-editor的使用吧。
别喷，喷就是你对！
别喷，喷就是你对！
别喷，喷就是你对！
基础使用
官网为我们发布了核心包，我们只需要下载使用即可！
官网：canvas-editor | rich text editor by canvas/svg
Step. 1: 下载 npm 包
npm i @hufe921/canvas-editor --saveStep. 2: 准备一个容器
<div class="canvas-editor"></div>Step. 3: 实例化编辑器
import Editor from '@hufe921/canvas-editor'
new Editor(
document.querySelector('.canvas-editor'),
[
{
value: 'Hello World'
}
],
{}
)
到这，就已经可以使用了呀，至于没有左侧目录、右侧便签、顶部菜单栏，要么自定义，通过API调用实现相同的功能，要么，下载官方维护插件仓库。剩下的事，就是照这官网文档，进行使用即可。
基于源码的使用
其实很多时候，官网的核心包可能不满足我们的使用，这时候，就需要需要通过下载源码、打包的形式使用了，基于源码的形式，也可以细分为两种形式：独立的canvas-editor项目、服务于其他项目的插件包。
独立项目
这个就更加简单了，先拉取源代码：https://github.com/Hufe921/canvas-editor。
下载依赖：`npm i`
运行代码：`yarn dev`
剩下的就是基于源码，进行修改，调整实现自己的功能即可。独立的项目，开发完成后，打包应该使用`yarn build`，打包后，就跟正常的项目打包结果一样，丢服务器即可。
服务于其他项目
如果是服务于其他项目的插件包，前面的步骤都一样，最后打包的时候，使用`yarn lib`！打包的dist，放到其他项目的public/libs 下（更不更名都无所谓的），引入的时候，一定注意！引入的是打包的地址哈！
剩下的就是按照文档实现自己的功能完事了。
使用总结
上诉介绍了三种方式：npm、源码、插件包的方式使用Canvas-Editor，我不允许还有人说canvas-ediotr并不是一款开箱即用的插件！给大家看看菜单栏源码是如何实现的哈：
它就是通过获取dom，监听点击事件，然后执行 command 的API，实现对应功能的。
增强Canvas-Editor
我还是建议大家下载源码，通过修改源码的方式增强Cavnas-Editor的能力。例如上篇文章的增加协同功能，以及一些其他的特殊需求，下面举例说明下如何实现拖动图片，添加图片功能（来自网友的提问）：
需求是这样的，拖动左侧图片，放到canvas中生成图片：
源码肯定是没有处理的，我们看下为什么会这样？网页上的图片等资源，拖拽到输入框内，都只能触发链接粘贴效果，如Element-plus：
如果想实现拖拽后，生成图片，就需要修改源码实现(需要找到源码的位置哈，这个过程就需要调试断点、经验排查)：
// 判断图片
if (
data.includes('.gif') ||
data.includes('.jpg') ||
data.includes('.png') ||
data.includes('.jpeg')
) {
/** 使用fetch函数发起一个HTTP请求来获取资源 */
const response = await fetch(data)
/** 检查响应的状态码是否为200 如果不是，则抛出一个错误*/
if (!response.ok) throw new Error(`HTTP error! `)
/** 返回 blob */
const blob = await response.blob()
pasteImage(host, blob)
} else host.input(data)
功能测试没问题后，打包（yarn lib）！！！其他项目使用时，自然就能使用增强后的功能了：
如果觉得canvas-editor自身不该发送请求，可以通过 event 回传事件，在外部监听，实现请求，再调用command.executeImage方法，插入图片，处理方式很多的哈。亦或增强协同能力等：
写在最后
我也不是说自己能力有多强哈，只是看见写误导别人的文章，然后跑过来私信我找寻解决办法的，有点感到惋惜，如果早点看到正确的写法，自然不用走这么多弯路。我还是那句话，别喷，喷就是你对！以后写文章，多检索下别人的优秀作品，不要千篇一律，重炒旧饭，多研读官网、技术说明，多思考、多实践，与君共勉~
