CKEditor5系列三：创建一个功能相对完善的插件

1、概述

上篇那个只是一个简单插件的demo，这篇我们来创建一个可正常编辑，换行的插件，因为按上篇那种方式创建出来，设置默认的文字之类的然后去进行编辑会有一些问题。

比如你想插入一个文字然后渲染成一下结构，文字可正常编辑换行

<div><p>default word</p></div>

但是你执行writer.insertText('default word', parent);之后插入的元素会渲染成下面的 (这是在command文件内执行的)

<div>default word</div>

这个时候如果你编辑或者干嘛，会生成下面的结构

<div>default word<p>你编辑的内容</p></div>

还有创建一个插件想选中或者怎样上篇是不能实现的，我们在这个插件里都会一一解决。

2、创建项目

初始化项目：

npm init -y

安装项目依赖

npm install --save postcss-loader@3 raw-loader@3  style-loader@1 webpack@4 webpack-cli@3

创建webpack.config.js文件

'use strict';
const path = require('path');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
module.exports = {// https://webpack.js.org/configuration/entry-context/entry: './app.js',// https://webpack.js.org/configuration/output/output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,use: ['raw-loader']},{test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,use: [{loader: 'style-loader',options: {injectType: 'singletonStyleTag'}},{loader: 'postcss-loader',options: styles.getPostCssConfig({themeImporter: {themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')},minify: true})}]}]},// Useful for debugging.devtool: 'source-map',// By default webpack logs warnings if the bundle is bigger than 200kb.performance: { hints: false }
};

安装编辑器依赖

 npm install --save @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-theme-lark

创建APP.js

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';ClassicEditor.create(document.querySelector('#editor'), {plugins: [Essentials, Paragraph, Bold, Italic],toolbar: ['bold', 'italic']}).then(editor => {console.log('Editor was initialized', editor);}).catch(error => {console.error(error.stack);});

修改package.json,因为要经常编译，所以我加了--watch

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --mode development --watch"}

然后构建

npm run build

创建HTML文件index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>CKEditor 5 Framework – Quick start</title>
</head>
<body><div id="editor"><p>Editor content goes here.</p></div><script src="dist/bundle.js"></script>
</body>
</html>

然后浏览器打开HTML，这个时候就展示出了一个基本的编辑器最初的模样~以上都是基于文档:https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html 现在我们来正式开始创建插件

3、创建插件

我们来创建一个提示框插件，插入一个提示框，上面有一个提示的标题，中间部分内容可编辑，输入想要的文字

首先我们来创建一个tip文件夹,在里面创建四个文件tip.js，tipEdit.js,tipUi.js,tipCommand.js,不清楚为什么要创建这四个的可以看前面的。

3.1 编写tip.js

import ui from './tipUi'
import edit from './tipEdit'
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';export default class writeBox extends Plugin {static get requires() {return [ui, edit, Widget];}
}

3.2 确定HTML结构

在编辑edit.js文件之前，我们来确定一下HTML结构，方便写模型及转换器，如果脑子好的话也可以不先写HTML模板，直接开始操作，我脑子不行，所以先写个HTML结构来明确DOM结构

<div class="edit-item-box box"><div class="tip-content-box"><div class="tip-content" ><p>1. 多喝水</p><p>2. 多喝热水</p></div><div class="close"><span class="closeIcon">x</span></div><div class="tip-title"><p>提示的标题</p></div></div>
</div>

CSS样式，真正写插件的时候写成单独的文件，然后引入到edit.js里面即可，这里我就直接扔index.html文件里了

<style>.tip-content-box{width: 100%;position: relative;border: 1px solid #ccc;padding: 6px 10px;box-sizing: border-box;border-radius: 4px;cursor: pointer;}.tip-content-box:hover .close{display: block;}.tip-title{background: white;text-align: center;font-size: 14px;position: absolute;top: -10px;cursor: text;height: 20px;left: 50%;transform: translateX(-50%);}.edit-item-box{margin: 20px 0;}.tip-content{font-size: 14px;cursor: text;}.close{position: absolute;top: -7px;right: -4px;width: 14px;height: 14px;color:white;background:#ccc;text-align: center;line-height: 12px;border-radius: 50%;display: none;z-index: 99;cursor: pointer;}.tip-title p{padding: 0 10px;color: #365f93;font-weight: bold;transform: translateY(-15px);}.closeIcon{transform: scaleX(1.2) translateX(0px) translateY(-1.5px);display: inline-block;font-size: 12px;}
</style>

3.3 编写edit.js

先来安装一个插件npm install @ckeditor/ckeditor5-widget --save，安装完之后记得重新build

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import command from './tipCommand';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';export default class tipEdit extends Plugin {init() {this._defineSchema();this._defineConverters();this.editor.commands.add('tip', new command(this.editor));}_defineSchema() {const schema = this.editor.model.schema;// 注册模型schema.register('editItemBox', {// 是否为一个完整的对象，不可被回车拆分，意思是回车等行为都是在它自身容器内进行isObject: true,allowWhere: '$block',})schema.register('tipContentBox', {allowWhere: '$block',isLimit: true,allowIn: 'editItemBox',})schema.register('tipTitle', {isLimit: true,allowIn: 'tipContentBox',isObject: true,allowContentOf: '$root'})schema.register('tipContent', {isLimit: true,allowIn: 'tipContentBox',isObject: true,allowContentOf: '$root'})schema.register('tipClose', {isLimit: true,allowIn: 'tipContentBox',allowContentOf: '$block'});schema.register('tipSpan', {isLimit: true,allowIn: 'tipClose',allowContentOf: '$block'});}_defineConverters() {const conversion = this.editor.conversion;// 使用editingDowncast数据管道// 创建一个元件// model的名称整个项目需要唯一conversion.for('editingDowncast').elementToElement({model: 'editItemBox',view: (modelItem, viewWriter) => {const viewWrapper = viewWriter.createContainerElement('div');viewWriter.addClass('edit-item-box', viewWrapper);return toHorizontalLineWidget(viewWrapper, viewWriter);}});// 创建一个普通的转换器conversion.elementToElement({model: 'tipContentBox',view: {name: 'div',classes: 'tip-content-box'}});conversion.elementToElement({model: 'tipClose',view: {name: 'div',classes: 'close'}});conversion.elementToElement({model: 'tipSpan',view: {name: 'span',classes: 'closeIcon'}});// 创建一个普通的可编辑可选择的转换器conversion.for('editingDowncast').elementToElement({model: 'tipTitle',view: (modelItem, writer) => {const nested = writer.createEditableElement('div', { class: 'tip-title' });writer.setAttribute('contenteditable', nested.isReadOnly ? 'false' : 'true', nested);nested.on('change:isReadOnly', (evt, property, is) => {writer.setAttribute('contenteditable', is ? 'false' : 'true', nested);});return nested;}});conversion.for('editingDowncast').elementToElement({model: 'tipContent',view: (modelItem, writer) => {const nested = writer.createEditableElement('div', { class: 'tip-content' });writer.setAttribute('contenteditable', nested.isReadOnly ? 'false' : 'true', nested);nested.on('change:isReadOnly', (evt, property, is) => {writer.setAttribute('contenteditable', is ? 'false' : 'true', nested);});return nested;}});}
}// 这个地方转换原件之后就可以进行选择之类的操作，但是这个方法是不能编辑的，因为源码里面给设置false了，具体操作可以看源码
// 源码：node_modules/@ckeditor/ckeditor5-widget/src/utils.js  => export function toWidget( element, writer, options = {} ) {}function toHorizontalLineWidget(viewElement, writer, label) {// 在当前元素上设置自定义属性，  key  value  targetElementwriter.setCustomProperty('tip', true, viewElement);// toWidget 转化为元件return toWidget(viewElement, writer, { label });
}

3.4 编写tipUi.js

import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';// import icon from './icons/insert.svg';export default class tipUi extends Plugin {init() {const editor = this.editor;const t = editor.t;editor.ui.componentFactory.add('tip', locale => {const view = editor.editing.view;const command = editor.commands.get('tip');view.addObserver(ClickObserver);const buttonView = new ButtonView(locale);buttonView.set({label: t('插入tip'),// 如果要用icon可以把这里打开，等会儿再说icon的问题// icon: icon,tooltip: true,// true表示使用文字，false表示用icon，可以一起用，但是会并列withText:true});buttonView.bind('isOn', 'tip').to(command, 'value', 'isEnabled');this.listenTo(buttonView, 'execute', () => editor.execute('tip'));return buttonView;});}
}

3.5 编写tipCommand.js

import Command from '@ckeditor/ckeditor5-core/src/command';export default class tipCommand extends Command {execute() {this.editor.model.change(writer => {this.editor.model.insertContent(createTip(writer));});}
}function createTip(writer) {const editItemBox = writer.createElement('editItemBox');const tipContentBox = writer.createElement('tipContentBox');const tipTitle = writer.createElement('tipTitle');const tipContent = writer.createElement('tipContent');// 创建关闭按钮const tipClose = writer.createElement('tipClose');const span = writer.createElement('tipSpan');writer.insertText('x', writer.createPositionAt(span, 0));writer.append(span, tipClose);// 创建标题const paragraph = writer.createElement('paragraph');writer.appendText('提示的标题', paragraph);// 创建内容const paragraph1 = writer.createElement('paragraph');writer.appendText('1. 多喝水', paragraph1);const paragraph2 = writer.createElement('paragraph');writer.appendText('2. 多喝热水', paragraph2);writer.insert(paragraph, tipTitle, 0);writer.insert(paragraph1, tipContent, 0);writer.insert(paragraph2, tipContent, 1);writer.append(tipContent, tipContentBox);writer.append(tipClose, tipContentBox);writer.append(tipTitle, tipContentBox);writer.append(tipContentBox, editItemBox);return editItemBox;
}

3.5 注册tip插件

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import tip from './tip/tip'ClassicEditor.create(document.querySelector('#editor'), {plugins: [Essentials, Paragraph, Bold, tip,  Italic, tip],toolbar: ['bold', 'italic', 'tip']}).then(editor => {// 注册删除事件editor.editing.view.document.on('click', (evt, data) => {if (data.domTarget.className == 'closeIcon' || data.domTarget.className == 'close' ) {const selection = editor.model.document.selection;editor.model.document.model.deleteContent(selection)};});}).catch(error => {console.error(error.stack);});

4、重置样式

在style标签里面加入下面代码就重置了

/* 选中及鼠标移入样式重置 */
.ck .ck-widget_selected{background: rgba(72,145,255,.16);
}
.ck .ck-widget{outline-style: none;outline-color:transparent !important;transition: none !important;
}
.ck .ck-widget:hover{outline-style:dashed;outline-color:#ccc !important;outline-width:1.2px;
}
.ck .ck-widget_selected.ck-widget{outline-style:dashed !important;outline-color:#ccc !important;outline-width:1.2px !important;
}
.tip-title, .tip-content, .tip-content-box{outline:none !important;
}
/* 功能按钮区域移入变色 */
.ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover{color: green;
}
/* 重置宽高 */
.ck-editor__editable {min-height: 300px;width: 800px !important;
}
.ck-toolbar, .ck-sticky-panel__content{width: 821px !important;
}