CKEditor 添加自定义插件

最新推荐文章于 2022-09-02 18:09:43 发布

转载最新推荐文章于 2022-09-02 18:09:43 发布 · 7.1k 阅读

Js 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何为CKEditor开发自定义插件，包括配置config.js注册插件、创建插件文件结构、实现对话框功能等步骤。适用于希望扩展CKEditor功能的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：crying_boy

第一步：config.js中

config.extraPlugins = '插件名称';//注册插件

第二步：plugins文件夹下新建：插件名称文件夹
第三步：
1:在plugins/插件名称/下新建plugin.js;

(function() {
    CKEDITOR.plugins.add("插件名称", {
        requires: ["dialog"],
        init: function(a) {
            a.addCommand("插件名称", new CKEDITOR.dialogCommand("插件名称"));
            a.ui.addButton("插件名称", {
                label: "插件名称",//调用dialog时显示的名称
                command: "插件名称",
                icon: this.path + "g.ico"//在toolbar中的图标
 
            });
            CKEDITOR.dialog.add("插件名称", this.path + "dialogs/插件名称.js")
 
        }
 
    })
 
})();

2:在plugins/插件名称/下新建 dialogs文件夹，并在其内新建 "插件名称.js"

第四步：/plugins/插件名称/dialogs/插件名称.js 内容如下

(function() {
    CKEDITOR.dialog.add("插件名称", 
    function(a) {
        return {
            title: "插件名称",
            minWidth: "500px",
            minHeight:"500px",
            contents: [{
                id: "tab1",
                label: "",
                title: "",
                expand: true,
                width: "500px",
                height: "500px",
                padding: 0,
                elements: [{
                    type: "html",
                    style: "width:500px;height:500px",
                    html: '内容测试'
                }]
            }],
            onOk: function() {
                //点击确定按钮后的操作
                //a.insertHtml("编辑器追加内容");
            }
        }
    })
})();