1、筹备

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

2、装置

npm install --save @ckeditor/ckeditor5-highlight

3、配置

/** * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */// 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 CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';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 MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';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';   // <--- ADDEDimport Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';   // <--- ADDEDexport default class ClassicEditor extends ClassicEditorBase {}// Plugins to include in the build.ClassicEditor.builtinPlugins = [    Essentials,    UploadAdapter,    Autoformat,    Bold,    Italic,    BlockQuote,    CKFinder,    EasyImage,    Heading,    Image,    ImageCaption,    ImageStyle,    ImageToolbar,    ImageUpload,    Link,    List,    MediaEmbed,    Paragraph,    PasteFromOffice,    Table,    TableToolbar,    Alignment,                                // <--- ADDED    Highlight,                                  // <--- ADDED     ];// Editor configuration.ClassicEditor.defaultConfig = {    toolbar: {        items: [            'heading',            '|',            'alignment',                             // <--- ADDED            'highlight',                             // <--- ADDED            'bold',            'italic',            'link',            'bulletedList',            'numberedList',            'imageUpload',            'blockQuote',            'insertTable',            'mediaEmbed',            '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'};

4、装置

yarn run build

参考文档

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.htmlhttps://ckeditor.com/docs/ckeditor5/latest/features/highlight.htmlhttps://blog.csdn.net/The_qianduan/article/details/88682951