“CKEditor5” rich text editor customization

Why useCKEditor5

• Easy integration: Integrates with Angular, React, and vue.js, as well as with Electron and mobile devices (Android, iOS).
• Customization: You can customize the editing functions you need, such as automatic formatting, uploading adapters, and exporting PDF

Install and use

Create your own CKEditor

Check out this official tutorial for more details. You can also use the official online customization to select your desired functional components.

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
# Download dependency
yarn 
# building
yarn build
Copy the code

Once the build is complete, you will get a custom CKEditor in the Build folder.

Open sample/index.html to see the effect

Feature plug-in

1. To find the functional plug-ins you need, search on NPM.

2. For example, the text alignment plug-in YARN Add @ckeditor/ckeditor5-alignment

3. Edit the SRC /ckeditor.js file to add plug-ins to the list of plug-ins to be included in the build

// 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';     // <-- add here

export default class ClassicEditor extends ClassicEditorBase {}

// Import the required plug-ins.
ClassicEditor.builtinPlugins = [
   Essentials,
   UploadAdapter,
   Autoformat,
   Bold,
   Italic,
   BlockQuote,
   EasyImage,
   Heading,
   Image,
   ImageCaption,
   ImageStyle,
   ImageToolbar,
   ImageUpload,
   Link,
   List,
   Paragraph,
   Alignment                                                            // <-- add here
];

// Editor configuration.
ClassicEditor.defaultConfig = {
   toolbar: {
       items: [
           'heading'.'|'.'alignment'.// <-- add here
           'bold'.'italic'.'link'.'bulletedList'.'numberedList'.'imageUpload'.'blockQuote'.'undo'.'redo']},image: {
       toolbar: [
           'imageStyle:full'.'imageStyle:side'.'|'.'imageTextAlternative']},// If you want to change to Chinese, change language to zh
   // Note: this should be consistent with the language in the webpack.config.js file
   language: 'en'
};
Copy the code

Upload adapter

Always upload images to your own server in a rich text editor. So you have to customize it. Here is ali OSS as an example

Custom upload adapter

Create a new SRC /ali-ckeditor-upload.js file

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import FileRepository from "@ckeditor/ckeditor5-upload/src/filerepository";
import OSS from "ali-oss";

const config = {
   region: "< region >".accessKeyId: "< AccessKeyId >".accessKeySecret: "< AccessKeySecret >".bucket: "Your bucket name".savePath: "images/"};const client = new OSS({
   region: config.region,
   accessKeyId: config.accessKeyId,
   accessKeySecret: config.accessKeySecret,
   bucket: config.bucket,
});

const random_string = function (len) {
   len = len || 32;
   let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
   let maxPos = chars.length;
   let pwd = "";
   for (let i = 0; i < len; i++) {
   	pwd += chars.charAt(Math.floor(Math.random() * maxPos));
   }
   return pwd;
};

const today = function () {
   let now = new Date(a);let year = now.getFullYear();
   let month = now.getMonth() + 1;
   let date = now.getDate();

   return year + "-" + month + "-" + date;
};

const imgPath = function (img) {
   img = img || ".png";
   let path = config.savePath + today() + "/";
   let name = random_string() + img;
   return path + name;
};
// Custom plug-ins need to be inherited from Plugin
export default class AliUploadAdapter extends Plugin {
   static get requires() {
   	return [FileRepository];
   }

   static get pluginName() {
   	return "ali-ckeditor-upload";
   }

   init() {
   	this.editor.plugins.get(FileRepository).createUploadAdapter = (
   		loader
   	) = > {
   		return newAdapter(loader); }; }}class Adapter {
   constructor(loader) {
   	this.loader = loader;
   }

   // Start the upload process.
   upload() {
   	return this.loader.file.then(
   		(file) = >
   			new Promise((resolve, reject) = > {
   				this._initListeners(resolve, reject, file);
   				this._sendRequest(file); })); }async _initListeners(resolve, reject, file) {
   	// When using other storage servers, modify the following code here to upload file
   	try {
   		let name = imgPath(file.name);
           	// Generate random image links
   		let url =
   			`http://${config.bucket}.${config.region}.aliyuncs.com/` + name;
   		let result = await client.multipartUpload(name, file, {
   			progress: function (p) {
               	// Progress monitor
   		// console.log(Math.round(p * 100));}}); resolve({default: url,
   		});
   	} catch (e) {
   		console.log(e); }}_sendRequest(file) {
   	const data = new FormData();
   	data.append("upload", file); }}Copy the code

Add a custom plug-in

Go to SRC /ckeditor.js and make the following changes to load this plug-in.

+import AliUploadAdapter from "./ali-ckeditor-upload";

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	...,
+	AliUploadAdapter]; // Editor configuration. ClassicEditor.defaultConfig = {... };Copy the code

Restart YARN Build. Open sample/index.html to view the result