ck-editor5的研究(1):快速把 CKEditor5 集成到 nuxt 中

前言

最近有用到 CKEditor5, 有点头大,只能在业余时间研究一下了。一看他们的文档,结果发现有点难以理解(我阅读理解一直很差),看了许久,还是对他们的设计概念有点云里雾里的。为了不浪费时间,我决定自己一步一步探索一下这个编辑器。

注:我用的 CKEditor 版本是 37.1.0

要实现的效果是:

1. 观察文档

首先找到他们的文档首页进行观察。 ckeditor.com/docs/ckedit...

分别点击上面的几个菜单浏览一下,我们可以得到以下几个信息:

  1. Getting started。这通常是我们快速上手一个包的地方,一会我也将会从这里开始研究。
  2. Features。这大概是CKEditor给我们展示自己能力的地方,可以看到有付费功能和免费功能,很齐全。
  3. Examples。估计这是手把手带我们实现一些功能的教程。
  4. Framework。这应该是CKEditor介绍他们底层架构的地方,估计以后深入研究CKEditor会来到这里找资料。
  5. API。这应该是CKEditor全部的接口,有点像Vue、mdn 这些列举对象属性和方法的地方,可能会在后续调用某些方法的时候来这里查找
  6. 后续的则是更新、赞助、github源码的地方,暂时跟我们关系不大。

2. 寻找 CKEditor5 和 vite 或 nuxt 的联系

进入 Getting started,找了一圈发现这里才是我想要的 (旧版)使用 Vite 从源集成 因为 Getting started 快速开始 是介绍最新版的CKEditor5,也就是42+版本,但我使用的是 37.1.0 版本,所以我要用旧版集成。此外,我要集成到 nuxt 中,而 nuxt 又是用 vite 解决工程化体系的,所以我将会选择从 vite 集成 CKEditor5。

3. 用最少的成本集成到 nuxt

nuxt 项目我已经有了,版本用的是3.16.2,我直接按照文档进行集成。

1. 第一步:安装依赖

按照教程,使用经典编辑器进行集成(既然这里特意提到经典编辑器,就说明有很多种编辑器,比如内联编辑器、悬浮框编辑器等等,暂且不管)

我用的pnpm管理,因此我的安装如下:

bash 复制代码
pnpm add @ckeditor/ckeditor5-theme-lark@37.1.0
pnpm add @ckeditor/ckeditor5-autoformat@37.1.0
pnpm add @ckeditor/ckeditor5-basic-styles@37.1.0
pnpm add @ckeditor/ckeditor5-block-quote@37.1.0
pnpm add @ckeditor/ckeditor5-editor-classic@37.1.0
pnpm add @ckeditor/ckeditor5-essentials@37.1.0
pnpm add @ckeditor/ckeditor5-heading@37.1.0
pnpm add @ckeditor/ckeditor5-link@37.1.0
pnpm add @ckeditor/ckeditor5-list@37.1.0
pnpm add @ckeditor/ckeditor5-paragraph@37.1.0

2. 第二步:配置vite(也就是nuxt.config.ts)

继续跟着他们的文档,发现还需要一个vite插件:

再安装一下,既然是vite插件,那么可以安装到开发依赖:

bash 复制代码
pnpm add @ckeditor/vite-plugin-ckeditor5 -D

再配置一下 nuxt.config.ts,这是一些关键配置:

ts 复制代码
import { defineNuxtConfig } from 'nuxt/config';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);
export default defineNuxtConfig({
  vite: {
    plugins: [ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })],
  },
});

3. 第三步:编写editor组件

在 components 目录下新建ck目录,一个是 .ts, 一个是 .vue。

ckeditor1.ts 代码如下:

ts 复制代码
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; // 基础类,用于创建实例
import { Essentials } from '@ckeditor/ckeditor5-essentials'; // ckeditor5基本功能(基本功能,没有就无法正常键入)
import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; // 自动格式化功能
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles'; // 提供基本样式(斜体、粗体)
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; // 提供引用功能
import { Heading } from '@ckeditor/ckeditor5-heading'; // 提供标题功能
import { Link } from '@ckeditor/ckeditor5-link'; // 提供链接功能
import { List } from '@ckeditor/ckeditor5-list'; // 提供列表功能
import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; // 提供段落功能(也算基本功能,没有就无法正常键入)

// 这里我创建了一个自己的类,继承了基础类。
export default class MyClassicEditor extends ClassicEditor {
  // 注册这些插件
  static override builtinPlugins = [Essentials, Autoformat, Bold, Italic, BlockQuote, Heading, Link, List, Paragraph];
  
  static override defaultConfig = {
    // 配置工具栏
    toolbar: {
      items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
    },
    // 配置语言
    language: 'en',
  };
}

因为nuxt会自动注册components里面的组件,而CKEditor只能在客户端使用,所以要加.client,确保它是在客户端渲染的,ck-editor1.client.vue 如下:

html 复制代码
<template>
  <div id="editor" ref="editorRef"></div>
</template>

<script setup lang="ts">
import MyClassicEditor from './ckeditor1';

const editorRef = useTemplateRef('editorRef');

async function initEditor() {
  try {
    if (!editorRef.value) {
      return;
    }

    const editor = await MyClassicEditor.create(editorRef.value);
    console.log('editor :>> ', editor);
  } catch (error: any) {
    console.log('error :>> ', error.stack);
  }
}

onMounted(() => {
  nextTick(() => {
    initEditor();
  });
});
</script>

4. 第四步:测试组件

可以在 pages 里面进行测试:

可以发现,无论是客户端还是服务端,都可以运行无报错:

到此为止,CKEditor5 已经成功接入到nuxt中了,后续再继续探索...

相关推荐
10年前端老司机8 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星9 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构10 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚11 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin12 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive13 分钟前
原型与原型链到底是什么?
javascript
lichenyang45314 分钟前
React项目(移动app)
前端
用户618482402195115 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队26 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端