替换CKeditor中的图像插件

Question

我想覆盖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;
        });
    }
});

Answer 1

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

1. 删除图片插件CKEDITOR.config.removePlugins ='图片，表格，div，flash，iframe，表格';
2. 在创建CKEditor时添加额外的插件extraPlugins：“ tinsertimage，teditimage，teditlink，tinsertlink，teditimagelink”

在插件中运行一些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 };
        });
    }
}
});

Answer 2

我不了解您正在做什么（或请向我们解释）。 也许您应该宁愿自定义对话框 ，也不愿从头开始做事情？