Prevent FCKEditor from converting image tags to input tags

FCK Editor is a free, open-source HTML editor that is commonly used in a variety of CMS (content management systems). It is often installed as a Drupal plugin and we use it in our own CMS at work. Unfortunately, it has a pesky default that converts image tags to input tags. If you add a linked image like this:

<a href=”…”><img src=”…” /></a>

it saves it as a linked input like this:

<a href=”…”><input type=”image” src=”…” /></a>

This can create CSS issues in some browsers because image inputs are displayed with a blue border. To prevent your image tags from being converted to input tags, you have to dig into the FCKEditor code and tweak it slightly. Every time I have to do this, it takes me an hour to find the code that needs to be changed. Hopefully, this will save someone else a lot of time and hassle…

1) Open this file:

editor/dialog/fck_image/fck_image.js

2) Scroll down to about line 223. You will see this code:

if ( bImageButton )
{
	oImage = FCK.EditorDocument.createElement( 'INPUT' ) ;
	oImage.type = 'image' ;
	oImage = FCK.InsertElementAndGetIt( oImage ) ;
}
else
	oImage = FCK.CreateElement( 'IMG' ) ;

3) Change it to this:

if ( bImageButton )
{
	//oImage = FCK.EditorDocument.createElement( 'INPUT' ) ;
	//oImage.type = 'image' ;
	//oImage = FCK.InsertElementAndGetIt( oImage ) ;
	oImage = FCK.CreateElement( 'IMG' ) ;
}
else
	oImage = FCK.CreateElement( 'IMG' ) ;

problem solved! woo hoo!