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

富文本编辑器CKEditor4简单使用-05(开发自定义插件入门)

富文本编辑器CKEditor4简单使用-05(开发自定义插件入门)

  • 1. CKEditor4插件入门
    • 1.1 关于CKEditor4插件的简单安装与使用
    • 1.2 参考
  • 2. 开发自定义插件——当前时间插件
    • 2.1 创建插件文件目录结构
    • 2.2 编写插件原代码
      • 2.2.1 编写代码框架
      • 2.2.2 创建编辑器命令
      • 2.2.3 创建插件工具栏按钮
        • 2.2.3.1 简单说明
        • 2.2.3.2 关于命名 + 实现代码
        • 2.2.3.3 关于工具栏组中的位置
      • 2.2.4 完整插件代码
    • 2.3 启用自定义插件
    • 2.4 测试新插件看效果

1. CKEditor4插件入门

1.1 关于CKEditor4插件的简单安装与使用

  • 可看下面的文章:
    • 富文本编辑器CKEditor4简单使用-02(常用插件安装及使用).
    • 富文本编辑器CKEditor4简单使用-03(图片上传、可拖拽可复制粘贴).

1.2 参考

  • 参考官网例子如下:
    • 用 20 行代码创建 CKEditor 4 插件——Timestamp插件.

2. 开发自定义插件——当前时间插件

2.1 创建插件文件目录结构

  • 在plugins目录下创建自定义插件文件夹 susutimestamp,以及其目录结构如下:
    在这里插入图片描述
  • 注意:
    • 对于 CKEditor 来说,插件文件夹的名称很重要,并且必须与插件的名称相同,否则编辑器将无法识别它。
    • 注意文件目录结构按照上面的来!

2.2 编写插件原代码

2.2.1 编写代码框架

  • 简单说明:
    • 所有 CKEditor 4 插件都是使用 CKEDITOR.plugins.add() 方法创建的。此方法应包含插件名称 — 'susutimestamp' 以及放置在初始化编辑器实例时调用的 init 函数中的插件逻辑
    • 此外,由于我们将定义一个工具栏按钮,因此设置了 icons 该属性,包括图标文件的名称(重要提示:匹配按钮名称,小写!!!)。
  • 框架代码,如下:
    CKEDITOR.plugins.add( 'susutimestamp', {icons: 'susutimestamp',init: function( editor ) {//Plugin logic goes here.}
    });
    

2.2.2 创建编辑器命令

  • 简单说明:
    • CKEditor 4 插件通常定义一个编辑器命令来执行与其关联的操作。该命令应在 init 函数内部定义,以便在初始化 CKEditor 4 实例时创建
    • 在本例中,我们将使用 CKEDITOR.editor.addCommand() 方法来定义将当前日期和时间插入 CKEditor 4 insertMyTimestamp 的命令
  • 实现代码如下:
    在这里插入图片描述

2.2.3 创建插件工具栏按钮

2.2.3.1 简单说明
  • 简化的时间戳插件应该通过工具栏按钮工作。为此,在函数 init 中 ,我们需要定义一个按钮,该按钮将与我们定义的编辑器命令 insertMyTimestamp 关联。
2.2.3.2 关于命名 + 实现代码
  • 如下图:
    在这里插入图片描述
2.2.3.3 关于工具栏组中的位置
  • 请注意,您可以通过提供可选索引来影响按钮在工具栏组中的位置,例如:
    // This could position the button at the beginning of the "insert" group.
    toolbar: 'insert,0'// This could position the button at the end of the "insert" group.
    toolbar: 'insert,100'
    

2.2.4 完整插件代码

  • 如下:

    CKEDITOR.plugins.add( 'susutimestamp', {icons: 'susutimestamp',init: function( editor ) {//Plugin logic goes here.// 1.创建编辑器命令editor.addCommand( 'insertMyTimestamp', {exec: function( editor ) {var now = new Date();editor.insertHtml( '当前时间为: <em>' + now.toString() + '</em>' );}});// 2.创建插件工具栏按钮editor.ui.addButton( 'susutimestamp', {label: 'myTimestamp',command: 'insertMyTimestamp',toolbar: 'insert'});}
    });
    

2.3 启用自定义插件

  • 如下:
    config.extraPlugins = 'susutimestamp';
    

2.4 测试新插件看效果

  • 如下:
    在这里插入图片描述
    在这里插入图片描述

相关文章:

富文本编辑器CKEditor4简单使用-05(开发自定义插件入门)

富文本编辑器CKEditor4简单使用-05&#xff08;开发自定义插件入门&#xff09; 1. CKEditor4插件入门1.1 关于CKEditor4插件的简单安装与使用1.2 参考 2. 开发自定义插件——当前时间插件2.1 创建插件文件目录结构2.2 编写插件原代码2.2.1 编写代码框架2.2.2 创建编辑器命令2.…...

chisel之scala 语法

Chisel新手教程之Scala语言&#xff08;1&#xff09; Value & variable Value是immutable的&#xff0c;当它被分配一个数据后&#xff0c;无法进行重新分配。用 val 表示。 Variable是mutable的&#xff0c;可以重复赋值。用 var 表示。示例如下&#xff1a; val a …...

React18构建Vite+Electron项目以及打包

一.先创建项目 cnpm create vite 选择React > JavaScript >cd react_vite > cnpm i >npm run dev 二.安装Electron依赖 指定版本相对稳定 cnpm i electron19.0.10 -D cnpm i vite-plugin-electron0.9.3 -D cnpm i electron-builder23.0.1 -D三.创建electron目录…...

Spark性能调优

Spark性能调优 executor内存不足用UNION ALL代替UNIONpersist与耗时监控用OR替换UNION ALL用JOIN替换IN executor内存不足 问题表现1&#xff1a;Container xx is running beyond physical memory limits. Current usage: xxx GB of x GB physical memory used; xx GB of x GB…...

flutter开发实战-Camera自定义相机拍照功能实现

flutter开发实战-Camera自定义相机拍照功能实现 一、前言 在项目中使用image_picker插件时候&#xff0c;在android设备上使用无法默认设置前置摄像头&#xff08;暂时不清楚什么原因&#xff09;&#xff0c;由于项目默认需要使用前置摄像头&#xff0c;所以最终采用自定义…...

LeetCode15. 三数之和

15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 **注意&#xff1a;**答案中不可以包含重复…...

Docker搭建MySQL8主从复制

之前文章我们了解了面试官&#xff1a;说一说Binlog是怎么实现的&#xff0c;这里我们用Docker搭建主从复制环境。 docker安装主从MySQL 这里我们使用MySQL8.0.32版本&#xff1a; 主库配置 master.cnf //基础配置 [client] port3306 socket/var/run/mysqld/mysql.sock [m…...

【前端】日期转换

记录项目中需要处理的日期格式 默认vue2 初级版 将后端传来的数组 [2024/01/29 08:55:18, 2024/01/29 09:55:18, 2024/01/29 10:11:18]转为 [2024-01-29 08:55, 2024-01-29 09:55, 2024-01-29 10:11]方法 convertDateTimeFormat(arr) {var tempArr arr.map(function (dateT…...

Git 怎么设置用户的权限

在团队协作的软件开发中&#xff0c;对于版本控制系统Git来说&#xff0c;确保代码与数据的安全性至关重要。为了实现这一目标&#xff0c;Git提供了灵活且可定制的用户权限管理机制。下面将简单的探讨一下Git如何设置用户的权限&#xff0c;以及如何保护代码和数据。 用户身份…...

大端和小端模式介绍

介绍 “大端”和“小端”通常指的是字节序&#xff08;Byte Order&#xff09;的两种类型&#xff0c;也被称为端序&#xff08;Endianness&#xff09;。在多字节的数据类型&#xff08;如整数&#xff09;中&#xff0c;字节可以以不同的顺序存储&#xff0c;这影响了计算机…...

【vue】报错 Duplicate keys detected 解决方案

错误描述&#xff1a;Duplicate keys detected. This may cause an update error.错误直译&#xff1a;检测到重复的键。这可能会导致错误。错误原因&#xff1a;有相同父元素的多个子元素的v-for有相同的key值。 解决方法&#xff1a; return:{dataList:[{name:张三&#xf…...

机器学习_13_SVM支持向量机、感知器模型

文章目录 1 感知器模型1.1 感知器的思想1.2 感知器模型构建1.3 损失函数构建、求解 2 SVM3 线性可分SVM3.1 线性可分SVM—概念3.2 线性可分SVM —SVM 模型公式表示3.3 线性可分SVM —SVM 损失函数3.4 优化函数求解3.5 线性可分SVM—算法流程3.6 线性可分SVM—案例3.7 线性可分S…...

OpenCV学习记录——轮廓检测

文章目录 前言一、寻找、绘制轮廓二、具体应用代码 前言 寻找目标图像的轮廓并绘制出该轮廓是我们进行图像识别时常用的手段&#xff0c;轮廓是图像中连续的边界线&#xff0c;可以用于物体检测、形状分析等应用。为了获取更高的准确性&#xff0c;会先进行二值化处理&#xff…...

FreeRTOS任务挂起以及延时部分源码分析

layout: post title: “任务状态” date: 2023-7-19 15:39:08 0800 tags: FreeRTOS 任务状态 fireRTOS代码分析 任务挂起 //把一个任务挂起 void vTaskSuspend( TaskHandle_t xTaskToSuspend ) {TCB_t *pxTCB;taskENTER_CRITICAL();//进入临界区{/* 参数是NULL的时候设置为当…...

oracle数据库慢查询SQL

目录 场景&#xff1a; 环境&#xff1a; 慢SQL查询一&#xff1a; 问题一&#xff1a;办件列表查询慢 分析&#xff1a; 解决方法&#xff1a; 问题二&#xff1a;系统性卡顿 分析&#xff1a; 解决方法&#xff1a; 慢SQL查询二 扩展&#xff1a; 场景&#xff1a; 线…...

C语言搭配EasyX实现贪吃蛇小游戏

封面展示 内部展示 完整代码 #define _CRT_SECURE_NO_WARNINGS #include<easyx.h> #include<stdio.h> #include<mmsystem.h> #pragma comment (lib,"winmm.lib") #define width 40//宽有40个格子 #define height 30//长有40个格子 #define size 2…...

# 软件安装-Linux搭建nginx(单机版)

软件安装-Linux搭建nginx(单机版) 安装版本:nginx-1.24.0 文章目录 软件安装-Linux搭建nginx(单机版)一、Nginx包下载二、创建用户1.新建组和用户2.设置用户密码3.登录自己创建的目录三、安装依赖组件四、安装Nginx五、启动Nginx六、配置Nginx一、Nginx包下载 1. nginx-1.24下…...

成熟的汽车制造供应商协同平台 要具备哪些功能特性?

汽车行业是一个产业链长且“重”的行业&#xff0c;整个业务流程包括了研发、设计、采购、库存、生产、销售、售后等一系列环节&#xff0c;在每一个环节都涉及到很多信息交换的需求。对内要保证研发、采购、营销等业务环节信息流通高效安全&#xff0c;对外要与上、下游合作伙…...

React16源码: React中处理ref的核心流程源码实现

ref的实现过程 1 &#xff09;概述 在更新流程当中如何去设置ref上面的对象的过程在我们创建fiber的时候去处理ref这个属性那我们什么时候创建fiber对象? 就是我们去更新某一个节点&#xff0c;然后要去调和它的子节点的时候这个时候我们会对每一个子节点去创建这个fiber对象…...

ref和reactive

看尤雨溪说&#xff1a;为什么Vue3 中应该使用 Ref 而不是 Reactive&#xff1f;...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...