CODEWITHSUNDEEP
ckeditor
Samuel Rossille
Samuel Rossille

Reputation: 19858

How to get a element modification properly integrated in the undo/redo stack in CKEditor 4?

I'm trying to implement my own Image plugin replacement for CKEditor. I bootstraped an implementation from the tutorial at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1

Right now, the only attribute thing editable is the src

In the code below, $.imagebrowser.openPopup(callback) opens a popup once the user has made his selection, calls callback, with the new src attribute of the image.

This works fine, both for insertion and edition, but there is a glich in the undo / redo integration. A modification of the src attribute made by doubleclicking is not undoable until an othe modification occurs (like typing text). Then the modification of the src attribute seems to be properly integrated in the undo/redo stack, and I can undo and redo it.

Any idea of what I'm doing wrong ?

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'
        });
    }
});

Upvotes: 0

Views: 419

Answers (1)

Spons
Spons

Reputation: 1591

I'm not sure this is what your looking for but you can make snapshots:

editor.fire( 'saveSnapshot' );

This will add a state to the Undo/redo stack. This command should be added before this line:

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

The editor.insertHtml() function has this included in the function. But if you're editing tags you need to do this manually

Upvotes: 2

Related Questions