在vue中使用CKEditor5的巨坑!调整图片大小

时间:2024-04-02 08:30:20

在vue中使用ckeditor5的时候,发现图片没有调整大小的框,一开始以为是没有什么属性,找了半天原来要下载插件。

没有插件那就下载,然后我下载了@ckeditor/ckeditor5-image之后,在配置里面引入,居然报错了??

在vue中使用CKEditor5的巨坑!调整图片大小

后面搜索了很多才发现这个巨坑!

当我们使用build版本时,可能已经安装了@ckeditor/ckeditor5-image 但是没有引入ImageResize,这时我们再安装就会报错!!

顾名思义,我们在 npm install --save @ckeditor/ckeditor5-build-decoupled-document 的时候,就注定了他没有调整图片大小的功能!!

为了使他有这个功能,我把源码拷贝下来。修改过程如下

1、先把源码拷贝下来。https://github.com/ckeditor/ckeditor5-editor-decoupled 

2、进入文件夹后 npm install 下载依赖

3、打开项目src下的ckeditor.js文件。一开始是没有这个插件的,是我npm install --save @ckeditor/ckeditor5-image/src/imageresize 之后再加上去的。

在vue中使用CKEditor5的巨坑!调整图片大小

4、在项目中执行 npm run build 打包

打包完后,把build文件夹的东西,拷贝到自己项目中,去覆盖node_modules里面的文件

在vue中使用CKEditor5的巨坑!调整图片大小

覆盖好后,跑自己的项目后,就有图片裁剪的功能了。