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-master.git

或者访问https://github.com/ckeditor/ckeditor5下载zip文件，然后解压

进入文件夹

cd ckeditor5-master

npm install

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

cd ckeditor5-master/packages/ckeditor5-build-classic
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-classicsrcckeditor.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