前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏

news2024/11/19 9:29:36

文章目录

    • ⭐前言
    • ⭐引入ckeditor
      • ⭐npm 包引入
      • ⭐cdn资源引入
    • ⭐自定义插件
      • 💖 自定义yma16配置插件
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好，我是yma16，本文分享关于前端react整合ckeditor——配置插件、自定义toolbar工具栏。
react系列往期文章：
react-grapesjs——开源代码学习与修改（初出茅庐）
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)
博客搭建_react-markdown渲染内容
博客搭建_登录注册
博客搭建_初始化next项目
关于ckeditor
CKEditor是一种强大的可嵌入式编辑器，用于在Web浏览器中编辑文本内容。它支持HTML，CSS和JavaScript，可以用于创建富文本编辑器，包括文本格式化，图像和视频插入，链接，表格等。 CKEditor提供许多插件，以便用户可以自定义其编辑器的外观和功能。它是由CKSource公司开发和维护的开源软件。
ckeditor发展历史
CKEditor是一个开源的WYSIWYG HTML编辑器，最初由FredCK创建，在2003年发布第一个版本。在经过多个版本的更新和改进之后，CKEditor 4在2012年发布，它是一个完全重构的版本，具有更好的性能和更好的可扩展性。

在CKEditor 4发布后，它成为了最流行的HTML编辑器之一，并在全球范围内广受欢迎。CKEditor 4的成功得益于其强大的功能和易于使用的界面，以及灵活的插件系统和丰富的文档支持。

CKEditor 4的发展历程如下：

  • 2003年：CKEditor的第一个版本发布，这是一个基于Javascript的HTML编辑器。

  • 2005年：CKEditor 2发布，这是一个完全重构的版本，具有更多的功能和更好的性能。

  • 2008年：CKEditor 3发布，这是一个基于Web标准的编辑器，具有更加现代的界面和更好的可访问性。

  • 2012年：CKEditor 4发布，这是一个完全重构的版本，具有更好的性能和更好的可扩展性。

随着Web技术的不断发展，CKEditor团队不断更新和改进编辑器，以适应最新的Web标准和技术。最新的版本是CKEditor 5，它是一个全新的版本，具有更加现代化的界面和更好的可访问性。

⭐引入ckeditor

ckeditor4的官网配置:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
ckeditor 的两种模式

  • Classic Editing 典型编辑器
  • Inline Editing 内联编辑器

**Classic Editing **
编辑器通常由放置在页面上特定位置的工具栏和编辑区域表示，通常作为表单的一部分
Inline Editing
内联编辑是 CKEditor 4中引入的一项新技术，它允许您选择页面上的任何可编辑元素并就地进行编辑。因此，编辑器可用于编辑看起来与最终页面相似的内容。
悬浮的tooltip工具栏
区别
Classic Editing 工具栏位置固定
Inline Editing 工具栏位置悬浮在选择字体的周围

效果预览：
https://yongma16.xyz/react-mjml/

⭐npm 包引入

安装ckeditor

$ npm install ckeditor4-react

官网案例 Classic Editing

import React from 'react';
import { CKEditor } from 'ckeditor4-react';

function App() {
    return (
        <div className="App">
            <h2>Using CKEditor 4 in React</h2>
            <CKEditor
                initData="<p>Hello from CKEditor 4!</p>"
                onInstanceReady={ () => {
                    alert( 'Editor is ready!' );
                } }
            />
        </div>
    );
}

export default App;

这里我作为组件引入
效果：
ckeditor-npm

⭐cdn资源引入

在ckeditor4的官网下载:https://ckeditor.com/ckeditor-4/download/
下载开源的源码包
down-source-ckeditor
在react的静态资源文件中引入，放入public文件目录
public-ckeditor
Inline Editing 案例使用
index.html引入ckeditor

<script src="./ckeditor/ckeditor.js"></script>

如下图所示
cdn-import

CkeditorPage.tsx


import { useEffect } from "react";

const CkeditorPage=(props:any)=>{
    useEffect(()=>{
        if(CKEDITOR){
            // @ts-ignore
            CKEDITOR.disableAutoInline = true;
            // @ts-ignore
            CKEDITOR.inline( 'editor1' );
        }


    },[])

    return <>
        <div id="editor1" contentEditable="true">
            <h1>Inline Editing in Action!</h1>
            <p>The "div" element that contains this text is now editable.</p>
        </div>
    </>
};


export default CkeditorPage;

其中销毁ckeditor的方法如下：

for(name in CKEDITOR.instances)
{
    CKEDITOR.instances[name].destroy()
}

内联编辑器的效果
render
选中字体才出现工具栏，专注于预览效果。
focus-tools

⭐自定义插件

官方案例：https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample.html
官网案例添加时间撮timestamp

CKEDITOR.plugins.add( 'timestamp', {
    icons: 'timestamp',
    init: function( editor ) {
        editor.addCommand( 'insertTimestamp', {
            exec: function( editor ) {
                var now = new Date();
                editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
            }
        });
        editor.ui.addButton( 'Timestamp', {
            label: 'Insert Timestamp',
            command: 'insertTimestamp',
            toolbar: 'insert'
        });
    }
});

💖 自定义yma16配置插件

在plugin目录添加csdn-yma16文件夹
编写plugin.js插件
plugin.js

(function() {
    CKEDITOR.plugins.add("csdn-yma16", {
        requires: ["dialog"],
        init: function(a) {
            a.addCommand("csdn-yma16", new CKEDITOR.dialogCommand("csdn-yma16"));
            a.ui.addButton("csdn-yma16", {
                label: "csdn-yma16",//调用dialog时显示的名称
                command: "csdn-yma16",
                icon: this.path + "icons/yma16.jpg"//在toolbar中的图标
            });
            console.log('this.path',this.path)
            CKEDITOR.dialog.add("csdn-yma16", this.path + "dialogs/csdn-yma16.js")

        }

    })

})();

dialogs/csdn-yma16.js

CKEDITOR.dialog.add('csdn-yma16', function (editor) { //要和plugin.js 中的command 一致
    var escape = function (value) {
        return value;
    };
    return {
        title: '', //对话框标题
        minWidth: 500, //对话框宽度
        minHeight: 600,//对话框高度
        contents: [{   //对话框内容
            id: 'choice',
            name: 'choice',
            label: '插入选择题答案',
            title: '插入选择题答案',
            elements: [{
                id: 'yma16_1',
                type: 'radio', //表单元素类型：单选按钮
                items: [['csdn','[博客]'],['juejin','[博客]']]
            },
                {
                    id: 'yma16_2',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['huawei','[芯片]'],['apple','[美国芯片]']]
                },
                {
                    id: 'yma16_3',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['name','[姓名]']]
                }]
        }],
        onOk: function () { //点击确定按钮出发onOK事件。以下代码主要目的是构造一个select下拉框
            let a = this.getValueOf('choice', 'yma16_1');
            let b = this.getValueOf('choice', 'yma16_2');
            let c = this.getValueOf('choice', 'yma16_3');
            let rtn = "";

            if(a != null){
                rtn += a;
            }

            if(b != null){
                rtn += b;
            }

            if(c != null){
                rtn += c;
            }

            if (rtn != "") {
                rtns = "{{"+rtn+"}}";
                editor.insertHtml(rtns);
            }
            else {
                return false;
            }
        }
    };
});
function htmlEncode(str) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = str) : (temp.innerText = str);
    var output = temp.innerHTML;
    temp = null;
    return output;
}

classical Editor 效果
插件位置
tools-location
dialog效果
dialog-css
插入样式
insert-font

Inline Editor 内联编辑器样式
inline-css

⭐总结

ckeditor编辑器两种用法区别

  1. Inline Editor 内联编辑器 选择字体才出现工具栏，用户视觉体验较好
  2. classical Editor 经典编辑器 工具栏默认固定位置展示，用户编辑体验较好

ckeditor编辑器自定义tools
a. 在editor入口plugin添加，需要了解plugin文档，目录结构清晰
b. 需要遵循ckeditor的api进行开发

富文本编辑器的优势

富文本编辑器具有以下优势：

  1. 易于使用：富文本编辑器可以帮助用户轻松地创建和编辑富文本内容，无需进行复杂的编程或设计工作。

  2. 可视化编辑：富文本编辑器提供了可视化编辑界面，用户可以直接在页面上进行编辑和调整，便于实时预览和调整。

  3. 自定义样式：使用富文本编辑器可以自定义字体、颜色、大小、对齐方式、缩进、列表等样式，并且可以在后台进行管理和编辑。

  4. 粘贴清理：富文本编辑器可以自动清理粘贴的文本，去除不需要的格式和样式，提高文本的可读性和美观度。

  5. 适应性强：富文本编辑器可以适应不同的浏览器和设备，并且可以提供不同的插件和功能，以满足不同的需求。

  6. 可扩展性：富文本编辑器可以通过插件和API进行扩展和自定义，以支持更多的功能和需求。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！
scene

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1035727.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sylixos 5.0.4 ecs

sylixos 5.0.4 ecs

sylixos 5.0.4 ecs 2692407267qq.com&#xff0c;更多内容请见http://user.qzone.qq.com/2692407267/
阅读更多...
人类的态势感知可分为先验、似然、后验的三部分

人类的态势感知可分为先验、似然、后验的三部分

人类的态势感知可以分为先验、似然和后验三个部分。这些部分描述了在不同阶段对环境的感知和理解。先验感知&#xff1a;先验感知基于先前的知识、经验和先验信息来理解环境。它利用已有的知识和模型&#xff0c;进行预测和推断&#xff0c;从而形成对当前环境的初步认知。先验…
阅读更多...
Go 并发可视化解释 - sync.Mute

Go 并发可视化解释 - sync.Mute

在学习 Go 编程语言时&#xff0c;您可能会遇到这句著名的格言&#xff1a;“不要通过共享内存来进行通信&#xff1b;相反&#xff0c;通过通信来共享内存。” 这句话构成了 Go 强大并发模型的基础&#xff0c;其中通道&#xff08;channels&#xff09;作为协程之间的主要通信…
阅读更多...
unity自己对象池的使用

unity自己对象池的使用

unity出了自己的对象池 这里记录一下用法 命名空间就是这个 一般有两种用法&#xff0c;第一种是在using里面获取&#xff0c;脱离这个域就释放。第二种是在Get和Release配合使用 // This version will only be returned to the pool if we call Release on it.//只有使用Re…
阅读更多...
【计算机基础】让我们重新认识一下Visual Stduio及其操作，知识点汇总！！

【计算机基础】让我们重新认识一下Visual Stduio及其操作，知识点汇总！！

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
远程连接ubuntu的mysql服务报错10061的解决方案

远程连接ubuntu的mysql服务报错10061的解决方案

远程连接ubuntu的mysql服务报错10061的解决方案 我的解决方案是&#xff1a; 首先&#xff1a;进入/etc/mysql/mysql.conf.d文件夹下面&#xff0c;编辑mysqld.cnf文件。如图所示&#xff1a; 然后&#xff1a;将bind-address那一行改成bind-address 0.0.0.0.如图所示&…
阅读更多...
李宏毅hw-8,auto-encoder for anomaly_detection

李宏毅hw-8,auto-encoder for anomaly_detection

一、查漏补缺、熟能生巧: 主要是mu均值 和 logvar对数标准差 std标准差的 处理方面不熟练 二、代码解读&#xff1a; 1.sample_code中提供了3种model&#xff1a;fcn_model 、 conv_model 和 vae_model: (1)fcn_model的结构非常好理解&#xff1a; 就是通过全连接层进行降维…
阅读更多...
子比主题v7.4绕授权接口源码

子比主题v7.4绕授权接口源码

子比主题7.4绕授权接口源码&#xff0c;仅包含api文件仅供学习参考&#xff01;正版子比主题7.4请到官方下载这里不提供。 使用方法: 1.搭建一个站点&#xff0c;绑定apizibl.com域名&#xff0c;并开启SSL (随便找个域名的证书就行) 2.上传以上源码&#xff0c;并配置好伪静…
阅读更多...
LeetCode75-06：移动零

LeetCode75-06：移动零

移动零 初版(bug) func moveZeroes(nums []int) {if len(nums) 1{return}// 设置两个指针fp1,fp2分别指向第一个元素和第二个元素&#xff0c;// 两种情况// 假如指针fp1指向元素为零// 1) *fp2!0&#xff0c;则交换。// 2) *fp20&#xff0c;则fp2后移,直至*fp2!0,与fp1交换…
阅读更多...
【刷题笔记9.24】LeetCode：对称二叉树

【刷题笔记9.24】LeetCode：对称二叉树

LeetCode&#xff1a;对称二叉树 一、题目描述&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 二、题目分析 题目&#xff1a;对称二叉树 1、p 指针和 q 指针一开始都指向这棵树的根 2、随后 p 右移时&#xff0c;q 左移&#xff0c;p 左移时&a…
阅读更多...
从平均数到排名算法

从平均数到排名算法

平均数用更少的数字&#xff0c;概括一组数字。属于概述统计量、集中趋势测度、位置测度。中位数是第二常见的概述统计量。许多情况下比均值更合适。算术平均数是3中毕达哥拉斯平均数之一&#xff0c;另外两种毕达哥拉斯平均数是几何平均数和调和平均数。 算术平均 A M 1 n ∑…
阅读更多...
Netty简介及简单客户端/服务端示例代码

Netty简介及简单客户端/服务端示例代码

什么是Netty&#xff1f; Netty是一个NIO客户机-服务器框架&#xff0c;它支持快速而容易地开发网络应用程序&#xff0c;如协议服务器和客户机。它大大简化和简化了网络编程&#xff0c;如TCP和UDP套接字服务器。 “快速简单”并不意味着生成的应用程序将遭受可维护性或性能问…
阅读更多...
pycharm 让控制台里的链接可以点击

pycharm 让控制台里的链接可以点击

前言 如果细心就会发现pychram控制台里一些链接是可以点击的,另外一些不行,那么如果让输出的链接可以点击如何做呢? 解决 输出的i链接会在控制台里可以点击,并且点击会在本地直接打开 如果打印的是网址则可以直接点击 print(file:///{}.format(i))print(https://www.baid…
阅读更多...
[架构之路-220]：与机器打交道VS与人打交道，计算机系统VS人体系统，计算机网络VS人类社会：架构、通信、语言、网络、智能、情感、生命

[架构之路-220]：与机器打交道VS与人打交道，计算机系统VS人体系统，计算机网络VS人类社会：架构、通信、语言、网络、智能、情感、生命

目录 前言&#xff1a; 一、计算机系统架构 VS 人体系统架构 1.1 相似之处 1.2 不同之处 1.3 人的心理与计算机软件 1.4 计算机系统层次 VS 人的层次模型 二、计算机通信 VS 人与人交流 2.1 计算机通信communication 2.2 人与人的交流communication 2.3 智商 VS 情商…
阅读更多...
mybatis拦截器执行原理

mybatis拦截器执行原理

title: “mybatis拦截器执行过程” createTime: 2021-12-08T12:19:5708:00 updateTime: 2021-12-08T12:19:5708:00 draft: false author: “ggball” tags: [“mybatis”] categories: [“java”] description: “mybatis拦截器执行过程” m[toc] mybatis的拦截器本人平时也很…
阅读更多...
【数据结构】链表--单链表

【数据结构】链表--单链表

目录 一 概念及结构 二 单链表的实现 1 包含接口(SList.h) 2 打印和创造节点&#xff08;扩容&#xff09;&#xff08;SList.c) 3 尾插&#xff08;SList.c) 4 头插&#xff08;SList.c) 5 尾删&#xff08;SList.c) 6 头删&#xff08;SList.c) 7 在pos前插入x&…
阅读更多...
大数据从入门到精通(超详细版)之Hive的案例实战，ETL数据清洗！！！

大数据从入门到精通(超详细版)之Hive的案例实战，ETL数据清洗！！！

前言 嗨&#xff0c;各位小伙伴&#xff0c;恭喜大家学习到这里&#xff0c;不知道关于大数据前面的知识遗忘程度怎么样了&#xff0c;又或者是对大数据后面的知识是否感兴趣&#xff0c;本文是《大数据从入门到精通&#xff08;超详细版&#xff09;》的一部分&#xff0c;小…
阅读更多...
安全生产知识竞赛活动小程序界面分享

安全生产知识竞赛活动小程序界面分享

安全生产知识竞赛活动小程序界面分享
阅读更多...
SCR截面速度、氨氮比等标准及相对标准偏差计算

SCR截面速度、氨氮比等标准及相对标准偏差计算

SCR截面速度、氨氮比等标准及相对标准偏差计算 # -*- coding: utf-8 -*- """ 联系QQ:3123575367&#xff0c;专业SCR脱硝仿真。 Created on Wed Sep 20 20:40:30 2023 该程序用来处理fluent通过xyplot导出的数据&#xff0c;可计算标准偏差SD、相对标准偏差RSD…
阅读更多...
linux 安装 wordpress

linux 安装 wordpress

文章目录 linux 安装 wordpress1. wordpress 简介2. wordpress功能和特点3. 部署要求4. 环境搭建4.1 部署 nginx4.1.1 新增配置文件 4.2 部署 PHP74.2.1 查看当前版本4.2.2 YUM 安装 PHP74.2.3 查看 PHP 版本4.2.4 启动PHP-FPM4.2.5 修改配置文件4.2.6 重启服务 4.3 部署 mysql…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023