Question

我正在尝试为CKEditor实现自己的Image插件替换。我在http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1

的教程中引导了一个实现

目前，唯一可编辑的属性是src

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

这适用于插入和编辑，但撤消/重做集成中有一些陈词滥调。通过双击进行的src属性的修改在其他修改发生之前是不可撤消的（如键入文本）。然后修改src属性似乎正确地集成在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'
        });
    }
});

Answer 1

我不确定这是你想要的，但你可以制作快照：

editor.fire( 'saveSnapshot' );

这将向撤消/重做堆栈添加状态。应在此行之前添加此命令：

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

editor.insertHtml（）函数包含在函数中。但如果您正在编辑标签，则需要手动执行此操作

如何在CKEditor 4的undo / redo堆栈中正确集成元素修改？

1 个答案: