Home > PHP/mySQL > Prevent FCKEditor from converting image tags to input tags

Prevent FCKEditor from converting image tags to input tags

December 2nd, 2011

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!

Be Sociable, Share!

  1. Mike Palmer
    September 14th, 2012 at 11:59 | #1

    Thank you man – this was an old, nasty problem that I didn’t know about until trying to convert an old site to become a responsive one.

  2. Jobin Jose
    September 21st, 2012 at 00:13 | #2

    Thanks a lots…!
    Solved the issue with JCK editor too.
    Its path is plugins/editors/jckeditor/plugins/image/dialogs/images.js
    Line no : 211 ..
    :):)

  3. September 26th, 2012 at 13:36 | #3

    i try to fix with many way ,but with your tutorial it solved, thanks u so much, i will share it in my facebook ^^!

  4. Nikeeta Vanjara
    June 1st, 2013 at 01:31 | #4

    Helped Me.. Thanks..

  1. No trackbacks yet.

Top