前言
CKEditor5的编辑是一个非常好的编辑器，但其英文文档比较绕眼睛，所以特地记录一下，如何使用自定义构建。
1、Online Bulider、Source Building
此为官方提供的，不适合我等现代构建方式。
自定义构建文档
2、自定义构建，在项目直接创建一个全新的0开始的编辑器。
此次，使用的工具为vite+solid，ui不一样无所谓，构建方式都一样。
开始
-
先安装vite插件和@types/node
npm install -D @ckeditor/vite-plugin-ckeditor5
npm install --save @types/node -
安装基础样式
npm install --save @ckeditor/ckeditor5-theme-lark -
在vite.config里编写。
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import { createRequire } from "node:module";
const require = createRequire(import.meta.url);
import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5";export default defineConfig({plugins: [solid(),ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") }),],
});
- 最后一步安装 CKEditor5 的主体文件，和官方提供一样有多种样式，editor-classic、editor-balloon、editor-decoupled等等。
注意区别，官方的是 @ckeditor/ckeditor5-build-classic
可查看 api描述
npm install --save @ckeditor/ckeditor5-editor-classic
使用
以上步骤完成后，就可以在项目中使用了。
新建一个ts文件作为CKEditor5 配置文件。
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";class Editor extends ClassicEditor {// Plugins to include in the build.public static override builtinPlugins = [];public static override defaultConfig = {toolbar: {items: [],},language: "zh",};
}export default Editor;项目中引入，并在数据挂载完成后，使用。
import { onMount } from "solid-js";
import Editor from "./editor";
function App() {let myDiv: any;onMount(() => {Editor.create(myDiv);});return (<><div ref={myDiv}></div></>);
}export default App;
这时，最基本的编辑器框架已经完成，页面上也已经有了，一个输入框，但这个输入框什么用也没有。
因为CKEditor5 ，所有的功能都是以插件的形式挂载上去的，所以就要把基础。
我们需要两个插件，缺一不可。
1、paragraph，这个插件是内容p标签化。PS：当然可以选择md的模式。
2、essentials，集成最基础的功能，比如输入、粘贴、加粗、斜体、删除线、下划线、上标、下标。
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import {Bold,Italic,Strikethrough,Underline,Subscript,Superscript,
} from "@ckeditor/ckeditor5-basic-styles";class Editor extends ClassicEditor {// Plugins to include in the build.public static override builtinPlugins = [Essentials,Paragraph,Bold,Italic,Strikethrough,Underline,Subscript,Superscript,];public static override defaultConfig = {toolbar: {items: ["undo","redo","Bold","Italic","Strikethrough","Underline","Subscript","Superscript","","",],},language: "zh",};
}export default Editor;至此，一个自定义的基础班就完成了，剩下的插件你想要啥就安装啥，然后在配置文件中加入即可。而且，也可以自己定制想要的插件，如SourceEditing。
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { SourceEditing } from "@ckeditor/ckeditor5-source-editing";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import {Bold,Italic,Strikethrough,Underline,Subscript,Superscript,
} from "@ckeditor/ckeditor5-basic-styles";class Editor extends ClassicEditor {// Plugins to include in the build.public static override builtinPlugins = [Essentials,Paragraph,SourceEditing,Bold,Italic,Strikethrough,Underline,Subscript,Superscript,];public static override defaultConfig = {toolbar: {items: ["SourceEditing","|","undo","redo","Bold","Italic","Strikethrough","Underline","Subscript","Superscript","","",],},language: "zh",};
}export default Editor;
打完收工！！
