Vue2.x 源码集成方案下 CKEditor5 的基本使用

前言

在上一篇文章《Vue2.X 安装CKEditor5 以及基本使用（一）》中，我们介绍了 Vue2.x 中集成 CKEditor5 的几种官方方案，这些方案可以快速上手，但功能较少，且难以扩展。本文将介绍如何使用 CKEditor5 的源码集成方案，该方案提供了更灵活的自定义功能和扩展性，但需要更多的配置和编码工作。

安装

首先，我们需要安装 CKEditor5 的相关依赖：

npm install @ckeditor/ckeditor5-build-classic

其中，@ckeditor/ckeditor5-build-classic 是一个预构建的 CKEditor5 编辑器包，包含了常用的功能和插件。

配置

接下来，我们需要在 Vue2.x 项目中配置 CKEditor5。首先，在 main.js 文件中导入 CKEditor5：

import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.use(CKEditor);

然后，在组件中使用 CKEditor5：

<template>
  <ckeditor :editor="editor" />
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2';

export default {
  components: {
    CKEditor,
  },

  data() {
    return {
      editor: CKEditor,
    };
  },
};
</script>

在上面的代码中，我们使用 CKEditor 组件来渲染 CKEditor5 编辑器。editor 属性指定了要使用的 CKEditor5 编辑器类型。

基本使用

现在，我们就可以开始使用 CKEditor5 了。首先，我们可以使用 editor.setData() 方法来设置编辑器的内容：

this.editor.setData('<p>Hello, world!</p>');

然后，我们可以使用 editor.getData() 方法来获取编辑器的内容：

const data = this.editor.getData();

结语

以上就是 Vue2.x 中使用 CKEditor5 源码集成方案的基本介绍。希望本文能够帮助您快速上手 CKEditor5。