用CKEditor轻松搞定VUE富文本编辑器黏贴表格带图片

前端

2023-01-07 05:07:01

CKEditor：让Vue富文本编辑器黏贴表格带图片不再是梦

作为一名技术工作者，在日常工作中经常需要使用富文本编辑器来处理各种文本内容。无论是撰写博客文章、制作幻灯片，还是设计网页，都需要用到富文本编辑器。

在众多的富文本编辑器中，CKEditor以其强大的功能和易用性脱颖而出，成为众多开发人员的首选。然而，CKEditor并不是免费的，这对很多预算有限的个人和企业来说是一个不小的负担。

不过，CKEditor有一个免费的版本——CKEditor5，它与付费版本相比，功能虽然略有阉割，但对于大多数用户来说已经足够用了。而且，CKEditor5的安装和使用也十分简单，即使是新手也能轻松上手。

下面，我们就来详细介绍一下CKEditor5在Vue项目中的使用，并演示如何让它支持粘贴表格带图片。

安装和使用CKEditor5

安装CKEditor5

npm install @ckeditor/ckeditor5-build-classic

在Vue项目中注册CKEditor5

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  components: {
    ClassicEditor,
  },
};

在Vue模板中使用CKEditor5

<div>
  <ClassicEditor
    v-model="content"
    :config="{
      ckfinder: {
        uploadUrl: 'http://localhost:3000/upload',
      },
    }"
  />
</div>

支持粘贴表格带图片

要让CKEditor5支持粘贴表格带图片，我们需要安装一个额外的插件：@ckeditor/ckeditor5-paste-from-office。

npm install @ckeditor/ckeditor5-paste-from-office

然后，在Vue项目中注册该插件：

import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office';

export default {
  components: {
    ClassicEditor,
  },
  plugins: [
    PasteFromOffice,
  ],
};