ckeditor5 添加ckeditor5-line-height-plugin插件

irpas 02-07 1606

当前使用的ckeditor5版本为34.1.0。

一.首先下载ckeditor工程文件，有两种方式：

1. 通过在线生成器创建，地址https://ckeditor.com/ckeditor-5/online-builder/

a）选择你需要的类型，一般使用classic经典样式

b）选择你要使用到的插件，注意带有‘PREMIUM’是需要费用的。

c）然后上下拖动选择需要展示的按钮，也可左右拖动排序分组。

d）最后选择语言生成下载

e）找到build目录下的ckeditor.js复制到项目即可使用。

2.通过命令下载生成

a）复制以下命令

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

如果下载很慢，可直接通过github直接下载压缩包

b）切换到ckeditor经典样式目录，当然也可切换到其它样式目录

cd ckeditor5/packages/ckeditor5-build-classic

c）找到build目录下的ckeditor.js复制到项目即可使用。

二.安装插件

1. 通过cmd命令切换editor目录，第一种方式就在下载的文件目录下，第二种在/packages/ckeditor5-build-classic目录下

2. 执行命令，安装一些依赖包

npm install

可能会有webpack安装错误，设置淘宝镜像即可：

npm config set registry https://registry.npm.taobao.org

执行完毕后会增加一个node_modules目录

3. 安装line-height插件

npm install --save ckeditor5-line-height-plugin

4. 在node_modules目录下会增加ckeditor5-line-height-plugin目录

5. 打开ckeditor5-line-height-plugin目录，删除里边的node_modules目录，否则会导致后边编译报ckeditor-duplicated-modules错误(Packages were duplicated in?node_modules，原文地址：Error codes - CKEditor 5 Documentation)

6. 打开src目录下的ckeditor.js导入配置

import LineHeight from 'ckeditor5-line-height-plugin/src/lineheight'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ ..., LineHeight, // add it to your plugins array ], lineHeight: { // specify your otions in the lineHeight config object. Default values are [ 0, 0.5, 1, 1.5, 2 ] options: [ 0.5, 1, 1.5, 2, 2.5 ] } toolbar: [ ..., 'lineHeight', // add the button to your toolbar ] } )

附一个样例

/** * @license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js'; import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js'; import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js'; import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js'; import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js'; import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js'; import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js'; import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js'; import Heading from '@ckeditor/ckeditor5-heading/src/heading.js'; import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js'; import Image from '@ckeditor/ckeditor5-image/src/image.js'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js'; import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js'; import Indent from '@ckeditor/ckeditor5-indent/src/indent.js'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'; import Link from '@ckeditor/ckeditor5-link/src/link.js'; import List from '@ckeditor/ckeditor5-list/src/list.js'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js'; import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js'; import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js'; import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js'; import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js'; import Table from '@ckeditor/ckeditor5-table/src/table.js'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js'; import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js'; import LineHeight from 'ckeditor5-line-height-plugin/src/lineheight'; class Editor extends ClassicEditor {} // Plugins to include in the build. Editor.builtinPlugins = [ Alignment, Autoformat, BlockQuote, Bold, CKFinderUploadAdapter, CloudServices, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, HorizontalLine, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, List, MediaEmbed, Paragraph, PasteFromOffice, RemoveFormat, Strikethrough, Subscript, Superscript, Table, TableToolbar, TextTransformation, Underline, LineHeight ]; // Editor configuration. Editor.defaultConfig = { toolbar: { items: [ "heading", "|", "bold", "italic", "link", "bulletedList", "numberedList", "|", "outdent", "indent", "blockQuote", "|", "alignment:left", "alignment:right", "alignment:center", "alignment:justify", "|", "fontSize", "fontFamily", "fontBackgroundColor", "fontColor", "lineHeight", "-", "horizontalLine", "subscript", "superscript", "removeFormat", "strikethrough", "underline", "|", "imageInsert", "insertTable", "mediaEmbed", "|", "undo", "redo" ], shouldNotGroupWhenFull: true, }, lineHeight: { options: [ 0.5, 1, 1.5, 2, 2.5, 3, 3.5 ], }, fontSize: { options: [ 9, 11, 12, 14, 16, 18, 20, 24, 28, 30, 34], }, indentBlock: { offset: 1, unit: "em", }, language: 'zh-cn', image: { toolbar: [ 'imageTextAlternative', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] } }; export default Editor;

说明："-"工具栏分行标志，同时shouldNotGroupWhenFull要设置为true才能生效

7. 编译

npm run build

编译完成后会重新生成build目录，然后复制build目录下的ckeditor.js到自己的项目即可使用。

也可直接打开sample目录下的index.html测试效果。