CKEditor4: the image disappear when I switch from Rich text View to source view

Question

I am using the CKEditor4 module for Drupal7 (https://drupal.org/project/ckeditor) and I noticed that when I am in the "Rich Text" view and I upload an image using the Image button. Initially the image is there, but when I switch to the "source view" and go back to the "Rich Text" view the image disappears. Also when I save the page in the Admin and I come back to it the image disappears. The code for the image still exists in the source view and the image shows up in the Live post but NOT in the "Rich Text" view.

Any ideas what's the problem?

Thanks.

Answer 1

You need to make it clear that images are allowed content.

You may safely declare that images, only certain image attributes, all image styles, and all image classes are allowed content. You do that with the following line of JavaScript:

config.extraAllowedContent = 'img[!src,alt,title,width,height,style](*){*}';

To set these variables, navigate to Configuration → Content authoring → CKEditor and then press edit for the profile you want to configure. Expand Advanced options, and type the JavaScript directly into the textfield Custom JavaScript configuration as shown in the screen shot below (disregard the first line unless you also want to set custom format_tags);

PS: If you Google this, you'll often see the following JavaScript suggested to "fix" the disappering image problem:

config.allowedContent = true;

Yes, it will fix the problem of images disappeearing when you toggle between rich text and source. But it will also make all sorts of content allowed - which is a gaping security hole in your site if you allow untrusted users to create and edit content. Don't use this quick "fix". Use the solution that uses the extraAllowedContent directive to spell out what shall be allowed (and allow only safe content).

Answer 2

That was a very weird behavior. But after hours of debugging and testing, the fix was by re-installing the latest versions of CKEditor module (at https://drupal.org/project/ckeditor ) along with the CKEditor and CKFinder programs (at http://ckeditor.com/download ). The latest versions available as of today (April 14, 2014).

I am confident that the issue of the image disappearing had nothing to do with anything I did, since I reintroduced the exact same configuration settings as I had in the old version (the old version combo was from about 4 months ago) and I have no problems now.

Boutros.