0

As the title says, I'm using a version of CkEditor 4.3, based on the full package, that includes also the Image2 plugin (build with CkBuilder, in order to automatically solve every dependency).

What I need is to change programmatically (using, if needed, also jQuery) the src attribute of an image.

With the classic Image plugin, I did this with the following code:

var imgToBeReplaced = editor.document.findOne("img#myImg");
imgToBeReplaced.setAttribute("src", newSrc);

Because I need to be sure that the getData() method of the editor object returns the right data, I do also the following (read more about it: CKEditor - Change image source):

$(imgToBeReplaced.$).attr("data-cke-saved-src", newSrc);

When I do this with the Image2 plugin, the image is correctly changed, but after that, I cannot resize it and I cannot access to the image properties (neither with double-click on the image, nor using the context menu that opens right-clicking on the image, because the option "properties" is no more present).

So, the question is: how can I correctly change the src (and data-cke-saved-src) attribute(s), without losing the possibility of changing the image properties?

Community
  • 1
  • 1
Vito Gentile
  • 13,336
  • 9
  • 61
  • 96

1 Answers1

2

Now with widgets the only things you need to worry about are

  • fetching proper widget instance
  • calling setData() method

As for this particular case you need to

// You need to have CKEDITOR.editor instance, here i will pick it from instances property.
var editor = CKEDITOR.instances.editor1,
    // All widgets instances are stored here, we will iterate on top of them.
    widgets = editor.widgets.instances,
    curWidget,
    i;

for ( i in widgets ) {
    curWidget = widgets[ i ];
    // Ensure that image is a part of widget, and src matchs our needs.
    if ( curWidget.definition.name == 'image2' && curWidget.parts.image.getAttribute( 'src' ) == 'assets/image1.jpg' ) {
        // Update src attribute.
        curWidget.setData( 'src', 'http://upload.wikimedia.org/wikipedia/en/1/18/Unicorn-head-circle-2.png' );
    }
}

This will be correct way to update image2 src - all the stuff will be handled by image2 plugin itself.

Reinmar
  • 21,729
  • 4
  • 67
  • 78
Marek Lewandowski
  • 3,291
  • 1
  • 20
  • 26
  • Your method is wonderful, but it only works changing `curWidget.definition.name == 'image2'` to `curWidget.definition.name == 'image'` ;) Thank you very much (and, please, make this edit in you answer) – Vito Gentile Dec 22 '13 at 16:49
  • I'm glad that solution worked for you, however are you sure about definition name? I'm pretty sure that it should be image2. :) Please double check it and let me know. – Marek Lewandowski Dec 23 '13 at 06:57
  • VitoShadow is right - the name of the widget has been changed in 4.3.1. We did that to make it easier to replace the old image plugin with image2. – Reinmar Dec 23 '13 at 08:49
  • 1
    PS. If you want to modify focused widget, then you can simply this code by using [`editor.widgets.focused`](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.repository-property-focused). – Reinmar Dec 23 '13 at 08:54
  • @Reinmar - Quick side question: Image2 declares a `widget` variable in global scope, then sets `widget` to `this.widget` in the `onShow` function. I can't recreate this in my own dialog definition. I `console.log`'d `this` within my dialog's `onShow` method, and it doesn't contain `widget`. Any idea why? – Sean Kendle Jul 22 '14 at 21:12
  • Not sure if I understand, but perhaps you need this: https://github.com/ckeditor/ckeditor-dev/blob/67433b06950bd84f195a0b56db082069384cc455/plugins/image2/plugin.js#L441-L444 – Reinmar Jul 24 '14 at 09:31