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?



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

enter image description here

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).

|improve this answer|||||
  • Thanks @Gisle for your feedback. However, I followed your directions and I added the line of code above but I still have the same problem (cleared caches ...) I also added this in the config.js file but also no fixes. BTW, "config.allowedContent = true;" (even though not recommended) did not fix the problem either. Any ideas, what could be the problem? Thank you. – Boutros AbiChedid Mar 28 '14 at 16:58
  • Too bad it didn't work out. Here's a link to my full writeup on installing CKEditor for Drupal. It has been used by a lot of my students, and they all ended up with having image upload working with CKEditor. – Free Radical Mar 28 '14 at 17:10

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.


|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.