1

我想覆盖 CKeditor 中的图像插件。当我右键单击图像时，我想打开自己的对话框。谁能指出我正确的方向。我已经完成了一个从 CKeditor 站点复制的基本插件 - 如何交换它以替换图像编辑器。

CKEDITOR.plugins.add('myplugin',
{
    init: function (editor) {
        editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));

        if (editor.contextMenu) {
            editor.addMenuGroup('mygroup', 10);
            editor.addMenuItem('My Dialog',
            {
                label: 'Open dialog',
                command: 'mydialog',
                group: 'mygroup'
            });
            editor.contextMenu.addListener(function (element) {
                return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
            });
        }

        CKEDITOR.dialog.add('mydialog', function (api) {
            // CKEDITOR.dialog.definition
            var dialogDefinition =
            {
                title: 'Sample dialog',
                minWidth: 390,
                minHeight: 130,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Label',
                        title: 'Title',
                        expand: true,
                        padding: 0,
                        elements:
                        [
                            {
                                type: 'html',
                                html: '<p>This is some sample HTML content.</p>'
                            },
                            {
                                type: 'textarea',
                                id: 'textareaId',
                                rows: 4,
                                cols: 40
                            }
                        ]
                    }
                ],
                buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
                onOk: function () {
                    // "this" is now a CKEDITOR.dialog object.
                    // Accessing dialog elements:
                    var textareaObj = this.getContentElement('tab1', 'textareaId');
                    alert("You have entered: " + textareaObj.getValue());
                }
            };

            return dialogDefinition;
        });
    }
});
4

2 回答 2

2

嗨，我想这样做的原因是我们有我们的图像编辑器控件，出于“可用性”的原因，我们需要继续使用它。它被用于网站的不同部分，两个对话会使人们感到困惑。总之，我所做的是

  1. 删除图片插件 CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
  2. 添加额外的插件 extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' 在创建 CKEditor

在插件中运行一些拦截右键单击图像的JS

CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
    editor.addCommand('tEditImage',
        {
            exec: function (editor) {
                                  //This opens the custom editor
                ZWSInlineEditor.openImageProperties(editor, false);
            }
        });

    if (editor.addMenuItem) {
        // A group menu is required
        // order, as second parameter, is not required
        editor.addMenuGroup('gImage');

        // Create a manu item
        editor.addMenuItem('gEditImageItem', {
            label: 'Edit Image Properties',
            command: 'tEditImage',
            group: 'gImage'
        });
    }

    if (editor.contextMenu) {
        editor.contextMenu.addListener(function (element, selection) {
            // Get elements parent, strong parent first
            var parents = element.getParents("img");
            // Check if it's strong
            if (parents[0].getName() != "img")
                return null; // No item

            return { gEditImageItem: CKEDITOR.TRISTATE_ON };
        });
    }
}
});
于 2013-04-09T09:40:55.147 回答
-4

我不明白你在做什么有什么意义（或者请解释一下）。也许您应该自定义对话框而不是从头开始？

于 2012-10-22T21:20:35.867 回答