网站建设改版,北京计算机编程培训学校,萍乡网站开发,室内设计项目概况Angular4 中 ckeditor5 插件的使用
0 环境、新建项目
环境#xff1a;
Windows10Angular/cli1.4.10#xff08;安装 Angular 的过程略过#xff0c;Angular4 版本比较古老#xff0c;这也导致项目安装插件及其他操作比较麻烦#xff09;
1. ckeditor5 官方用法
基础用…Angular4 中 ckeditor5 插件的使用
0 环境、新建项目
环境
Windows10Angular/cli1.4.10安装 Angular 的过程略过Angular4 版本比较古老这也导致项目安装插件及其他操作比较麻烦
1. ckeditor5 官方用法
基础用法npm 安装插件后使用
官网教程 Angular 中用法
npm install ckeditor/ckeditor5-angular1.1.0
npm install ckeditor/ckeditor5-build-classic20.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_modulesckeditor\ckeditor5-build-decoupled-document\build 文件夹下。
此时项目中使用的 ckeditor5 插件里的功能与在线构建的功能一样。
自定义版本的插件为最新版本需要了解与 Angular 版本是否匹配。
官方用法及 ckeditor5 详细用法不做过多介绍详细用法请看官方文档本文着重介绍如何自定义一个插件模块并合并到 ckeditor5。
2. 自定义插件以一个截屏插件为例
说明此插件只是实现在 ckeditor5 的图标栏添加剪辑图标图标的点击事件则绑定在 Angular 中。即此插件没有实现图标按钮的点击事件的逻辑部分。
既然是自定义则需要下载源代码修改后再重新编译。
npm 安装的插件中没有源代码如图 \node_modulesckeditor\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_modulesckeditor里面是各种基础插件用来开发 ckeditor5-build-decoupled-document。
将自己编辑的的插件放入里面 node_modulesckeditor然后在 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_modulesckeditor\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 contributors 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: nplurals1; plural0;\nmsgctxt Toolbar button tooltip for cutImage.
msgid cutImage
msgstr 截屏{cutImage: Toolbar button tooltip for cutImage.
}theme 中的文件类似最少需要一个 svg 类型的图标css 则可有可无。
svg viewBox0 0 1025 1024 xmlnshttp://www.w3.org/2000/svgpath dM548.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 stylewidth: 600px;ckeditor #ckeditor [(editor)]decEditor [(ngModel)]ckeditorContent [config]configdebounce500 (ready)onReady($event) (change)onChange($event)/ckeditor
/div浏览器展示结果
config.toolbar.items 中未添加 ‘cutImage’ 时
config.toolbar.items 中添加 ‘cutImage’ 时
点击图标得到的结果
由于插件内部实现点击响应事件较为复杂本插件内部暂时没有实现图标点击的响应事件而是在 Angular 项目中通过 jquery 找到图标并绑定点击事件。
读者感兴趣或有能力可以尝试实现。
