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

当前使用的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测试效果。