前端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进行扩展和自定义,以支持更多的功能和需求。

⭐结束

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

目录
相关文章
|
1月前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
14天前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
|
1天前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
3天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
6 1
|
7天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
28 3
|
13天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
13天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
1月前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
1月前
|
资源调度 前端开发 JavaScript
够啦!前端Yarn配置和命令
够啦!前端Yarn配置和命令
45 0
|
1月前
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
22 2

热门文章

最新文章