当前位置: 首页 > 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;...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...