「CKEditor5」富文本编辑器定制

为什么使用CKEditor5

• 方便集成:可以与Angular，React和Vue.js集成,也可以和Electron和移动设备（Android，iOS）兼容。
• 可定制化:可以自定义自己所需的编辑功能,如自动格式化,上传适配器,导出 PDF 等功能

安装使用

1.创建自己的CKEditor

有关更多详细信息，请查看此官方教程。也可以使用官方在线定制选择自己需要的功能组件。

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
# 下载依赖
yarn 
# 构建
yarn build

构建完成后，您将在build文件夹中获得一个自定义CKEditor 。

打开sample/index.html查看效果

功能插件

1. 找到自己所需的功能插件,可以在npm上搜索.

2. 例如文本对齐插件
   yarn add @ckeditor/ckeditor5-alignment

3. 编辑src/ckeditor.js文件以将插件添加到将包含在构建中的插件列表中

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- 添加在此处

export default class ClassicEdi