I have tried to insert an uploaded image in to the CKEditor by using the following code,

var editor = CKEDITOR.instances.writearticle;
var value = '<img src="images/imagename.jpg">';
editor.insertHtml( value );

But this does not work. But when I try the same logic with this code

var editor = CKEDITOR.instances.writearticle;
var value = '<strong>Hello World</strong>';
editor.insertHtml( value );

Hello world as bold text is inserted. Why it is not working for the <img> tag?

I have found this procedure here and <img> insertion works in this site. What is the problem in my site?

I have tried to insert an uploaded image in to the CKEditor by using the following code,

var editor = CKEDITOR.instances.writearticle;
var value = '<img src="images/imagename.jpg">';
editor.insertHtml( value );

But this does not work. But when I try the same logic with this code

var editor = CKEDITOR.instances.writearticle;
var value = '<strong>Hello World</strong>';
editor.insertHtml( value );

Hello world as bold text is inserted. Why it is not working for the <img> tag?

I have found this procedure here and <img> insertion works in this site. What is the problem in my site?

• javascript
• jquery
• ckeditor

• Can Image tag be seen on html page? If yes Check if your image path is correct. – Nitin Varpe Commented Oct 21, 2013 at 5:45
• @Nitinvarpe: No the <img> is not getting inserted. But for other tags such as <strong>, <p> get inserted properly. – Sarvap Praharanayuthan Commented Oct 21, 2013 at 5:47
• stackoverflow./questions/16483344/… check this link – Nitin Varpe Commented Oct 21, 2013 at 5:59
• Oh Man!! No words to express my thanks :) – Sarvap Praharanayuthan Commented Oct 21, 2013 at 6:14
• u r wele, My pleasure – Nitin Varpe Commented Oct 21, 2013 at 6:15

3 Answers 3

The problem was resolved after adding,

config.allowedContent = 'img[src,alt,width,height]'; // But be sure to add all the other tags you use in with your Editor. Tags except this will be disabled.

Alternate solution

config.extraAllowedContent = 'img[src,alt,width,height]'

This will add <img> attribute to the allowed tags list and here you need to to specify every tags you need to allow. - Credit: Sibbl.

in the config.js file.

In my case I just added:

config.allowedContent = true;

in the CKEditor configuration

and it fixed the issue.

You can also write allowedContent in here instead modify the config.

editor.addCommand( 'XXXDialog', new CKEDITOR.dialogCommand( 'XXXDialog', { allowedContent : 'img[src,alt,width,height]'}) );