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

最新推荐文章于 2024-06-17 15:30:06 发布

老酒馆的猫

最新推荐文章于 2024-06-17 15:30:06 发布

阅读量2.2k

点赞数 1

分类专栏： CKEditor5 文章标签： ckeditor

本文链接：https://blog.csdn.net/oldpubcat/article/details/105519096

版权

本文档详细介绍了如何创建一个功能完善的CKEditor5插件，包括创建项目、定义HTML结构、编写edit.js、tipUi.js、tipCommand.js以及注册插件的步骤。通过这个过程，你可以创建一个可编辑、换行的提示框插件，解决编辑时的结构问题，并实现提示框的选中和编辑功能。

摘要由CSDN通过智能技术生成

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">

最低0.47元/天解锁文章

老酒馆的猫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
CKEditor5系列三：创建一个功能相对完善的插件

1、概述上篇那个只是一个简单插件的demo，这篇我们来创建一个可正常编辑，换行的插件，因为按上篇那种方式创建出来，设置默认的文字之类的然后去进行编辑会有一些问题。比如你想插入一个文字然后渲染成一下结构，文字可正常编辑换行<div><p>default word</p></div>但是你执行writer.insertText('default...
复制链接

扫一扫

专栏目录