如何正常使用ckeditor5图片裁剪功能

1 安装 npm install --save @ckeditor/ckeditor5-build-decoupled-document
2 引入 import CKEditor from ‘@ckeditor/ckeditor5-build-decoupled-document’
3 创建编辑器

HTML 
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
 
<!-- 编辑器容器 -->
<div id="editor">
    <p>This is the initial editor content.</p>
</div>在这里插入代码片

js部分

export default {
  data() {
    return {
      editor:null,//编辑器实例
    }
  }
  mounted() {
     this.initCKEditor()
  },
   methods: {
      initCKEditor() {
        CKEditor.create(document.querySelector('#editor'), {
          ckfinder: {
            uploadUrl: '/admin/Upload/uploadUrl'
            //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
          }
        }).then(editor => {
          const toolbarContainer = document.querySelector('#toolbar-container');
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        }).catch(error => {
          console.error(error);
        });
     }
  }
}

4 获取编辑器编辑内容 this.editor.getData()
5 初始化编辑器内容this.setData(‘dsd’)
6 这是ckeditor 的图片裁剪功能是不能使用的
为了使他有这个功能，我把源码拷贝下来。修改过程如下
（1）先把源码拷贝下来。https://github.com/ckeditor/ckeditor5-build-decoupled-document
（2）打开项目src下的ckeditor.js文件。一开始是没有这个插件的，是我npm install --save @ckeditor/ckeditor5-image/src/imageresize 之后再加上去的。

（3）、在项目中执行 npm run build 打包

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

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