当前位置: 首页 > news >正文

ckeditor5的研究 (9):写一个自定义插件,包括自定义的toolbar图标、插入当前时间,并复用 CKEditor5 内置的 UI 组件

文章目录

  • 一、前言
  • 二、实现步骤
    • 1. 第一步:搭建目录
    • 2. 第二步:自定义toolbar按钮
    • 3. 第三步:定义按钮点击执行的命令
  • 三、测试效果和细节
  • 四、总结


一、前言

在上一篇文章中 ckeditor5的研究 (8):接入Indent缩进功能,配置heading并解决ts类型报错,了解CKEditor5插件移除功能, 我们学会了完整接入一个 CKEditor5 插件,并知道如何找到该插件的 npm 依赖包,顺便还学了一点 ts 类型的技巧和 CKEditor5 的插件移除功能。

这篇文章,我们就来自己动手写一个 CKEditor5 插件,我们需要做的事情有这几个:

  1. 实现一个 自定义插入时间的 插件
  2. 使用这个插件,并添加到 toolbar 工具栏,同时给它一个自定义的 icon

实现的效果图大致如下:
在这里插入图片描述


二、实现步骤

1. 第一步:搭建目录

我们使用

http://www.dtcms.com/a/237924.html

相关文章:

  • Unity中的Mathf.Clamp01
  • 端午编程小游戏--艾草驱邪
  • Unity使用代码分析Roslyn Analyzers
  • 【动画】Unity2D骨骼动画-Animation2D
  • Linux系统编程中的_GNU_SOURCE宏
  • 【Blender】Blender 基础:导入导出
  • Unity中如何播放视频
  • WEB3全栈开发——面试专业技能点P1Node.js / Web3.js / Ethers.js
  • webrtc 在线测试, 如何在线拉流测试
  • 建造者模式深度解析与实战应用
  • Framework开发之IMS逻辑浅析1--关键线程及作用
  • 软件工程的软件生命周期通常分为以下主要阶段
  • [论文阅读] 人工智能+软件工程 | 结对编程中的知识转移新图景
  • 基于 Transformer robert的情感分类任务实践总结之三——FGM
  • day 18进行聚类,进而推断出每个簇的实际含义
  • Boost ASIO 库深入学习(3)
  • Unity VR/MR开发-VR/开发SDK选型对比分析
  • 服务器 | Centos 9 系统中,如何部署SpringBoot后端项目?
  • debian12拒绝海外ip连接
  • DHCP / DHCPv6 原理 / 报文解析 / 配置示例
  • 对比传统引擎,Unity3D 在生产配套中的独特优势
  • 前端打包工具简单介绍
  • 前端知识导图
  • Spring Boot中Bean注入方式对比与最佳实践
  • webpack其余配置
  • 详解鸿蒙Next仓颉开发语言中的动画
  • RabbitMQ入门
  • 大数据+智能零售:数字化变革下的“智慧新零售”密码
  • 【Docker 02】Docker 安装
  • 【Mac 从 0 到 1 保姆级配置教程 16】- Docker 快速安装配置、常用命令以及实际项目演示