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
引用:https://www.zyku.net/gongju/1915.html