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

こんにちは、私がこれをやりたかった理由は、「使いやすさ」の理由から、使用を続ける必要があるイメージ エディター コントロールがあるからです。サイトのさまざまな部分で使用され、2 つのダイアログは人々を混乱させます。要約すると、私がしたことは

  1. 画像プラグインを削除します CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
  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 };
        });
    }
}
});
于 2013-04-09T09:40:55.147 に答える
-4

あなたがしていることの意味がわかりません (または説明してください)。ゼロから作成するよりも、ダイアログをカスタマイズしたほうがよいのではないでしょうか?

于 2012-10-22T21:20:35.867 に答える