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

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

前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)https://developer.aliyun.com/article/1492704


⭐自定义插件

官方案例: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 效果

插件位置

dialog效果

插入样式

Inline Editor 内联编辑器样式

⭐总结

ckeditor编辑器两种用法区别

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

ckeditor编辑器自定义tools

a. 在editor入口plugin添加,需要了解plugin文档,目录结构清晰

b. 需要遵循ckeditor的api进行开发

富文本编辑器的优势

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

  1. 易于使用:富文本编辑器可以帮助用户轻松地创建和编辑富文本内容,无需进行复杂的编程或设计工作。
  2. 可视化编辑:富文本编辑器提供了可视化编辑界面,用户可以直接在页面上进行编辑和调整,便于实时预览和调整。
  3. 自定义样式:使用富文本编辑器可以自定义字体、颜色、大小、对齐方式、缩进、列表等样式,并且可以在后台进行管理和编辑。
  4. 粘贴清理:富文本编辑器可以自动清理粘贴的文本,去除不需要的格式和样式,提高文本的可读性和美观度。
  5. 适应性强:富文本编辑器可以适应不同的浏览器和设备,并且可以提供不同的插件和功能,以满足不同的需求。
  6. 可扩展性:富文本编辑器可以通过插件和API进行扩展和自定义,以支持更多的功能和需求。

⭐结束

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

目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
119 9
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
929 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
122 26
|
29天前
|
人工智能 自然语言处理 计算机视觉
华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
编辑器AI插件如Codegeex、通义灵码等已问世,但通用性较强而不专精。华为推出的CodeGenie专为鸿蒙开发设计,集成在DevEco 5.0.0以上版本中,提供代码补全、生成等功能,尤其擅长处理鸿蒙相关问题,极大降低了鸿蒙开发的门槛。安装后需重启,支持自然语言生成代码,提升了开发效率。
59 13
|
30天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
320 1
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
280 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
71 1
|
3月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
47 3

热门文章

最新文章

  • 1
    MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
  • 2
    华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
  • 3
    Unity编辑器脚本(添加/删除)碰撞盒
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    详解智能编码在前端研发的创新应用
  • 8
    巧用通义灵码,提升前端研发效率
  • 9
    智能编码在前端研发的创新应用
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程