前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏（二）-阿里云开发者社区

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

2024-04-25 322

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端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;
}