为什么使用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
查看效果
功能插件
-
找到自己所需的功能插件,可以在npm上搜索.
-
例如文本对齐插件
yarn add @ckeditor/ckeditor5-alignment
-
编辑
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