CKEditor plugin sometimes doesn't update image src when text changes

Question

I am using the ckeditor plugin to use it in combination with ckeditor 4. When I update (change) an existing diagram text in the editor the compressed url in the most cases does not update. I could also reproduce this on this sites demo page. The image in the page changes but the image url in the source view or the image properties stays unchanged. My impression is that you plugin changes the attributes of the image in the DOM but the ckeditor works with a copy of the DOM. Thats why changes do reflect on the screen but not when you save it.

Answer 1

 

 

My feeling was right. Checking the web for this issue I found

 

• http://stackoverflow.com/questions/10862363/ckeditor-custom-html-when-inserting-image
• http://stackoverflow.com/questions/5593296/ckeditor-change-image-source

The first link contains a script on how to copy the hidden src attribute which is saved by CKEDitor into the src attribute that your plugin is modifiying,

It looks like this and should be part of your plugin, I think.

 

CKEDITOR.on('instanceReady', function (ev) {

                var editor = ev.editor,

                    dataProcessor = editor.dataProcessor,

                    htmlFilter = dataProcessor && dataProcessor.htmlFilter;

            

                htmlFilter.addRules( {

                    elements : {

                        $ : function( element ) {

                            if ( element.name == 'img' ) {

                                var imgsrc = element.attributes.src;

        

                                element.attributes.src = imgsrc;

                                element.attributes['data-cke-saved-src'] = imgsrc;

                            }

                        }

                    }

                });

            });

 

Comments

Hi,
Many thanks for your contribution : the website and the plugin have both been updated.
I hope it's working better now!
Best regards,