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

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

删除图像插件CKEDITOR.config.removePlugins ='image，forms，div，flash，iframe，table';
添加额外的插件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 };
        });
    }
}
});

Answer 2

我不明白你在做什么（或请解释我们）。也许你应该宁愿customize dialogs而不是从头做事？

替换CKeditor中的图像插件

2 个答案: