如何正常使用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里面的文件
在这里插入图片描述
覆盖好后,跑自己的项目后,就有图片裁剪的功能了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值