CKEditor 5 npm方式安装调用与配置教程

CKEditor5和CKEditor4无论是界面还是用法上完全不同，而且在插件的配置上也大不相同，CKEditor5采用的是npm的方式安装插件，后续升级还是比较方便的。

CKEditor5官方提供了多种获取方式，但是编辑器安装后都是精简之后的版本，只有一些最基本的功能，使用起来还是挺麻烦的，要想更灵活的根据自己的需求添加或删减编辑器的特性，需要对编辑器进行定制，下面介绍CKEditor5两种安装方式，分别为npm安装和在线生成工具online-builder安装方式。

npm安装：

npm安装方式首先需要安装并配置好node.js环境和git工具，node.js安装可参考本篇文章：https://www.zyku.net/gongju/1565.html

首先执行命令，将ckeditor5-build-classic下载到本地

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

进入文件夹

cd ckeditor5-build-classic

执行命令，安装package.json里面一些项目依赖的包，比如webpack等，不然webpack用不了

npm install

安装插件：

在这里推荐一些比较常用的插件

npm install --save @ckeditor/ckeditor5-typing
npm install --save @ckeditor/ckeditor5-autoformat
npm install --save @ckeditor/ckeditor5-block-quote
npm install --save @ckeditor/ckeditor5-ckfinder
npm install --save @ckeditor/ckeditor5-adapter-ckfinder
npm install --save @ckeditor/ckeditor5-heading
npm install --save @ckeditor/ckeditor5-link
npm install --save @ckeditor/ckeditor5-paste-from-office
npm install --save @ckeditor/ckeditor5-table
npm install --save @ckeditor/ckeditor5-alignment
npm install --save @ckeditor/ckeditor5-autosave
npm install --save @ckeditor/ckeditor5-code-block
npm install --save @ckeditor/ckeditor5-font
npm install --save @ckeditor/ckeditor5-highlight
npm install --save @ckeditor/ckeditor5-horizontal-line
npm install --save @ckeditor/ckeditor5-image
npm install --save @ckeditor/ckeditor5-indent
npm install --save @ckeditor/ckeditor5-mention
npm install --save @ckeditor/ckeditor5-page-break
npm install --save @ckeditor/ckeditor5-remove-format
npm install --save @ckeditor/ckeditor5-special-characters
npm install --save @ckeditor/ckeditor5-basic-styles
npm install --save @ckeditor/ckeditor5-list
npm install --save @ckeditor/ckeditor5-word-count
npm install --save @ckeditor/ckeditor5-media-embed
npm install --save @ckeditor/ckeditor5-essentials
npm install --save @ckeditor/ckeditor5-paragraph
npm install --save @ckeditor/ckeditor5-ui

修改文件: ckeditor5-build-classic\src\ckeditor.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
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 Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Autosave from '@ckeditor/ckeditor5-autosave/src/autosave';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin';
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical';
import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/specialcharacterstext';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';


export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	UploadAdapter,
	TextTransformation,
	ClassicEditor,
	Autoformat,
	BlockQuote,
	Bold,
	CKFinder,
	CKFinderUploadAdapter,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	Italic,
	Link,
	List,
	MediaEmbed,
	PasteFromOffice,
	Table,
	TableToolbar,
	Alignment,
	Autosave,
	Code,
	CodeBlock,
	FontBackgroundColor,
	FontColor,
	FontSize,
	Highlight,
	FontFamily,
	HorizontalLine,
	ImageResize,
	IndentBlock,
	Mention,
	PageBreak,
	RemoveFormat,
	SpecialCharacters,
	SpecialCharactersCurrency,
	SpecialCharactersArrows,
	SpecialCharactersEssentials,
	SpecialCharactersLatin,
	SpecialCharactersMathematical,
	SpecialCharactersText,
	Strikethrough,
	Subscript,
	Superscript,
	TodoList,
	Underline,
	WordCount,
	MediaEmbedToolbar,
	Essentials,
	Paragraph
];

// Editor configuration.
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			'code',
			'heading',
			"|",
			'bold',
			'italic',
			'strikethrough',
			'underline',
			'horizontalLine',
			'alignment',
			"|",
			'link',
			'indent',
			'outdent',
			'blockQuote',
			'CKFinder',
			'imageUpload',
			'numberedList',
			'bulletedList',
			'mediaEmbed',
			'insertTable',
			'codeBlock',
			'fontBackgroundColor',
			'fontColor',
			'fontSize',
			'highlight',
			'fontFamily',
			'pageBreak',
			'removeFormat',
			'specialCharacters',
			'subscript',
			'superscript',
			'todoList',
			'undo',
			'redo'
		]
	},
	image: {
		toolbar: [
			'imageStyle:full',
			'imageStyle:side',
			'|',
			'imageTextAlternative'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'zh-cn'
};

执行以下命令捆绑构建

npm run build

如果一切正常，可以在浏览器中打开文件sample/index.html，以查看插件是否已正确安装，如下图所示：

在线生成工具online-builder安装方式请参考本篇文章：https://www.zyku.net/gongju/1916.html

(资源库 www.zyku.net)