Angular4 中 ckeditor5 插件的使用

Angular4 中 ckeditor5 插件的使用

0 环境、新建项目

环境：

• Windows10
• @Angular/cli@1.4.10（安装 Angular 的过程略过，Angular4 版本比较古老，这也导致项目安装插件及其他操作比较麻烦）

1. ckeditor5 官方用法

基础用法，npm 安装插件后使用

官网教程：
Angular 中用法

npm install @ckeditor/ckeditor5-angular@1.1.0
npm install @ckeditor/ckeditor5-build-classic@20.0.0

首先 npm 安装两个插件: ckeditor5-angular 和 ckeditor5-build-decoupled-document(以此版本为示例)。

ckeditor5-angular 经测试版本 v4.0.0 不能在 Angular4 中使用，v1.1.0 可以使用，安装此版本。

ckeditor5-build-decoupled-document 经测试版本 v34.0.0 无法在 angular4 使用，v20.0.0 可以使用，安装此版本。

查看插件版本列表命令如下：npm view @ckeditor/ckeditor5-angular versions。

npm 慢或者报错，请使用 pnpm 或 cnpm。

官方在线自定义插件用法

首先，还是先安装 ckeditor5-angular 和 ckeditor5-build-decoupled-document 插件。

再去 ckeditor5 官网，在线构建自定义插件，地址：online-builder，按步骤创建之后下载。

将下载的压缩文件解压，找到 \build\ckeditor.js 文件，替换到项目
\node_modules@ckeditor\ckeditor5-build-decoupled-document\build 文件夹下。

此时项目中使用的 ckeditor5 插件里的功能与在线构建的功能一样。

自定义版本的插件为最新版本，需要了解与 Angular 版本是否匹配。

官方用法及 ckeditor5 详细用法不做过多介绍，详细用法请看官方文档，本文着重介绍如何自定义一个插件模块并合并到 ckeditor5。

2. 自定义插件（以一个截屏插件为例）

说明：此插件只是实现在 ckeditor5 的图标栏添加剪辑图标，图标的点击事件则绑定在 Angular 中。即：此插件没有实现图标按钮的点击事件的逻辑部分。

既然是自定义，则需要下载源代码，修改后再重新编译。

npm 安装的插件中，没有源代码，如图：

\node_modules@ckeditor\ckeditor5-build-decoupled-document 文件夹显示，要使用的文件是编译过的 \build\ckeditor.js。

而官网在线构建的版本与 GitHub 地址 下载的版本与上述文件夹有区别。

在线构建的插件文件夹结构如图：

主要多了 src 文件夹和 webpack.config.js 文件，src\ckeditor.js 用来配置哪些插件最终应用到插件中，webpack.config.js
配置如何构建插件。

GitHub 下载的文件解压后，找到 packages\ckeditor5-build-decoupled-document，与上述在线构建的插件文件夹结果类似，多了 tests 文件夹和一些文件，如图：

可以复制 packages\ckeditor5-build-decoupled-document 文件夹用于开发，而不改动源文件，带有 webpack.config.js 文件的文件夹即是一个项目。

至于用以上哪种开发根据需求选择，需要自定义后再编写自己的插件就选择在线构建的插件，反之选择 GitHub 版本。

首先介绍一下开发流程：

命令行进入到 ckeditor5-build-decoupled-document(简称 document) 目录下，执行 npm install，安装开发需要的插件，
此时 document 目录下出现 node_modules 文件夹，找到 node_modules@ckeditor，里面是各种基础插件，用来开发 ckeditor5-build-decoupled-document。

将自己编辑的的插件放入里面 node_modules@ckeditor，然后在 ckeditor5-build-decoupled-document\src\ckeditor.js 配置你的插件（根据已有插件配置）。无论编辑插件还是配置都要符合 ckeditor5 的代码规则。

之后在 packages\ckeditor5-build-decoupled-document 目录下，执行 npm run build，如图：

build 完成后， 在 packages\ckeditor5-build-decoupled-document\build 下找到 ckeditor.js，即编译好的代码，
复制放入 Angular 项目的 node_modules@ckeditor\ckeditor5-build-decoupled-document\build 中即可使用。

下面是代码的具体实现：

不知道如何开始，可以先看看内部的插件如何编写的。比较简单类似的是引用功能（block-quote），甚至可以复制一份将各种文件名，类名，参数名修改后，加入插件。

首先创建文件夹：ckeditor5-cutImage，文件夹位置与结构如图：

创建并修改 lang 下的文件，比如 block-quote 插件中的 lang 文件，此文件为语言翻译，
根据已有的，cutImage 中的 lang 文件夹中的 zh-cn.po 和 contexts.json 文件内容如下：

# Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
#
#                                     !!! IMPORTANT !!!
#
#         Before you edit this file, please keep in mind that contributing to the project
#                translations is possible ONLY via the Transifex online service.
#
#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
#
#                   To learn more, check out the official contributor's guide:
#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
#
msgid ""
msgstr ""
"Language-Team: Chinese (China) (https://www.transifex.com/ckeditor/teams/11143/zh_CN/)\n"
"Language: zh_CN\n"
"Plural-Forms: nplurals=1; plural=0;\n"msgctxt "Toolbar button tooltip for cutImage."
msgid "cutImage"
msgstr "截屏"

{"cutImage": "Toolbar button tooltip for cutImage."
}

theme 中的文件类似，最少需要一个 svg 类型的图标，css 则可有可无。

<svg viewBox="0 0 1025 1024" xmlns="http://www.w3.org/2000/svg"><path d="M548.576 512q14.848 0 25.728 10.848t10.848 25.728-10.848 25.728-25.728 10.848-25.728-10.848-10.848-25.728 10.848-25.728 25.728-10.848zM720 548.576l289.728 227.424q16 11.424 14.272 32-2.848 20-20 29.152l-73.152 36.576q-7.424 4-16.576 4-9.728 0-17.728-4.576l-394.272-221.152-62.848 37.728q-4.576 2.272-6.848 2.848 8 28 5.728 55.424-4 44-32 84.288t-75.424 70.56q-75.424 48-158.272 48-77.728 0-126.848-44.576-51.424-48-45.152-118.272 4-43.424 32-84t74.848-70.848q75.424-48 158.848-48 47.424 0 86.272 17.728 5.152-7.424 12.576-12.576l69.728-41.728-69.728-41.728q-7.424-5.152-12.576-12.576-38.848 17.728-86.272 17.728-83.424 0-158.848-48-46.848-30.272-74.848-70.848t-32-84q-2.848-33.728 8.864-64.576t36.288-53.152q48.576-45.152 126.848-45.152 82.848 0 158.272 48 47.424 29.728 75.424 70.272t32 84.576q2.272 27.424-5.728 55.424 2.272 0.576 6.848 2.848l62.848 37.728 394.272-221.152q8-4.576 17.728-4.576 9.152 0 16.576 4l73.152 36.576q17.152 9.152 20 29.152 1.728 20.576-14.272 32zM330.848 400q26.272-24 12-61.728t-60.576-66.848q-52.576-33.728-109.728-33.728-42.272 0-64.576 20.576-26.272 24-12 61.728t60.576 66.848q52.576 33.728 109.728 33.728 42.272 0 64.576-20.576zM282.272 825.728q46.272-29.152 60.576-66.848t-12-61.728q-22.272-20.576-64.576-20.576-57.152 0-109.728 33.728-46.272 29.152-60.576 66.848t12 61.728q22.272 20.576 64.576 20.576 57.152 0 109.728-33.728zM384 475.424l54.848 33.152 0-6.272q0-20.576 18.848-32l8-4.576-45.152-26.848-14.848 14.848q-1.728 1.728-5.728 6.272t-6.848 6.848q-1.152 1.152-2.272 2.016t-1.728 1.44zM512 603.424l54.848 18.272 420.576-329.152-73.152-36.576-438.848 246.272 0 64.576-91.424 54.848 5.152 4.576q1.152 1.152 4 3.424 2.272 2.272 6.272 6.848t6.272 6.848l14.848 14.848zM914.272 841.152l73.152-36.576-297.152-233.152-101.152 78.848q-1.152 1.728-7.424 4z"></path></svg>

最重要的是 src 中的文件 ，对比 block-quote 插件，创建剪辑的文件，

对比 block-quote 插件，cutimage.js 内容为：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';import CutImageEditing from './cutimageediting.js';
import CutImageUI from './cutimageui';export default class CutImage extends Plugin {static get requires() {return [ CutImageEditing, CutImageUI ];}
}

cutimagecommand.js 内容为：

import Command from '@ckeditor/ckeditor5-core/src/command';export default class CutImageCommand extends Command {execute( { value } ) {const editor = this.editor;const selection = editor.model.document.selection;}refresh() {const model = this.editor.model;const selection = model.document.selection;const isAllowed = model.schema.checkChild( selection.focus.parent, 'cutImage' );this.isEnabled = isAllowed;}
}

cutimageediting.js 内容为：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/utils';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';export default class CutImageEditing extends Plugin {static get requires() {                                                    // ADDEDreturn [ Widget ];}init() {}
}

cutimageui.js 内容为：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';import cutimageIcon from '../theme/icons/cutimage.svg';
const CUTIMAGE = 'cutImage';export default class CutImageUI extends Plugin {static get pluginName() {return 'CutImageUI';}init() {const editor = this.editor;const t = editor.t;// Add cutImage button to feature components.editor.ui.componentFactory.add( CUTIMAGE, locale => {const command = editor.commands.get(CUTIMAGE);const view = new ButtonView( locale );view.set( {label: t( 'cutImage' ),icon: cutimageIcon,tooltip: true} );return view;} );}
}

至于 package.json 可做适当修改，CHANGELOG.md、README.md 等可以忽略。

至此此插件（半成品）编辑完成。

回到 ckeditor5-build-decoupled-document\src\ckeditor.js 中配置 cutImage 插件，添加内容如图:

在 packages\ckeditor5-build-decoupled-document 目录下，执行 npm run build 构建，等待完成。

注意：ckeditor5 符合 ES6(ECMAScript 2015) 规范，在 webpack.config.js 中配置可以编译为符合 ES5 规范的文件。

由于本项目使用的是 ES5 规范，而重新编译的版本也是符合 ES6 规范的，所以需要稍作配置。
如何配置请看此链接，ES5配置

在 webpack.config.js 配置文件中，找到 module 下的 rules, 增加内容如下：

module: {rules: [{},{  // 此处为新增部分test: /(ckeditor5(?:-[^\/\\]+)?)[\/\\].+\.js$/,use: [{loader: 'babel-loader',options: {presets: [ require( '@babel/preset-env' ) ]}}]}]
}

Angular 项目中的用法如下：

组件中的 ts 文件：

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';@Component({selector: 'app-ckeditor-demo',templateUrl: './ckeditor-demo.component.html',styleUrls: ['./ckeditor-demo.component.css']
})
export class CkeditorDemoComponent implements OnInit {@ViewChild('ckeditor', { read: ViewContainerRef }) ckeditor;config = {toolbar: {items: ['bold', 'italic', 'underline', 'strikethrough', 'blockQuote', 'mediaEmbed','alignment:left', 'alignment:right', 'imageUpload', 'insertTable', 'cutImage']}}editor = null;ckeditorContent = '';decEditor = DecoupledEditor;constructor() { }ngOnInit() {}onReady(e) {this.editor = e;e.ui.getEditableElement().parentElement.insertBefore(e.ui.view.toolbar.element,e.ui.getEditableElement());this.getCutButton();}// 找到 cutImage 图标并绑定点击事件// 注意：此处通过获取 class ck-toolbar__items 最后一个子元素找到 cutImage 图标, // 是因为在类中的 config 参数配置中将 'cutImage' 放在数组 items 的最后, // 由于图标由 ckeditor 生成, 所以无法在 ckeditor 插件中赋予唯一的 id 和 classgetCutButton() {$(".ck-toolbar__items").children("button:last-child").on('click', () => {console.log('cut button clicked!');});}onChange(e) {// console.log('onchange', e);}
}

html 文件：

<div style="width: 600px;"><ckeditor #ckeditor [(editor)]="decEditor" [(ngModel)]="ckeditorContent" [config]="config"debounce="500" (ready)="onReady($event)" (change)="onChange($event)"></ckeditor>
</div>

浏览器展示结果：

config.toolbar.items 中未添加 ‘cutImage’ 时：

config.toolbar.items 中添加 ‘cutImage’ 时：

点击图标得到的结果：

由于插件内部实现点击响应事件较为复杂，本插件内部暂时没有实现图标点击的响应事件，而是在 Angular 项目中通过 jquery 找到图标并绑定点击事件。

读者感兴趣或有能力可以尝试实现。