0

我正在尝试为 CKEditor 实现我自己的图像插件替换。我从http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1的教程中引导了一个实现

现在,唯一可编辑的属性是src

在下面的代码中,$.imagebrowser.openPopup(callback)一旦用户做出选择,就会打开一个弹出窗口,调用回调,并使用图像的新 src 属性。

这对于插入和编辑都很好,但是在撤消/重做集成中存在故障。通过双击对 src 属性所做的修改在发生其他修改(如键入文本)之前是不可撤消的。然后对src属性的修改,好像是在undo/redo栈中适当的集成了,我可以undo和redo了。

知道我做错了什么吗?

CKEDITOR.plugins.add( 'customimage', {

    // Register the icons. They must match command names.
    icons: 'customimage',

    // The plugin initialization logic goes inside this method.
    init: function( editor) {
        editor.on( 'doubleclick', function( event ) {
            if(event.data.element.getName() == "img") {
                $.imagebrowser.openPopup(function(src) {
                    event.data.element.setAttribute("src", src);
                });
            }
        });

        editor.addCommand( 'insertCustomimage', {
            allowedContent: ['img[!src,alt]{width,height,float,margin}'],
            // Define the function that will be fired when the command is executed.
            exec: function() {
                $.imagebrowser.openPopup(function(src) {
                    editor.insertHtml('<img src="' + src + '" style="width: 400px; height: auto; float: left; margin: 10px 10px;">');
                });
            }
        });

        // Create the toolbar button that executes the above command.
        editor.ui.addButton( 'Customimage', {
            label: 'Image',
            command: 'insertCustomimage',
            toolbar: 'insert'
        });
    }
});
4

1 回答 1

2

我不确定这是您要寻找的,但您可以制作快照:

editor.fire( 'saveSnapshot' );

这将为撤消/重做堆栈添加一个状态。此命令应在此行之前添加:

event.data.element.setAttribute("src", src);

editor.insertHtml() 函数将 this 包含在函数中。但是,如果您正在编辑标签,则需要手动执行此操作

于 2013-03-26T16:53:22.000 回答