radiobutton, checkbox and select are not editable

Hi all,

today I saw the formfields radiobutton, checkbox and select are not editable by right clicking. To fix the problem make this steps:

Make 3 new fakeimages (18x18 pixels) fck_checkbox.gif, fck_radiobutton.gif and fck_selectbox.gif and copy it into /editor/css/images. You can copy the icons from fck_strip.gif of your skin.

You need 3 new style classes for the fakeimages.

.FCK__InputCheckbox {
   width: 18px;
   height: 18px;
   background-image: url(images/fck_checkbox.gif);
   background-repeat: no-repeat;
   vertical-align: text-bottom;
   background-position: center center;
}
.FCK__InputRadiobutton {
   width: 18px;
   height: 18px;
   background-image: url(images/fck_radiobutton.gif);
   background-repeat: no-repeat;
   vertical-align: text-bottom;
   background-position: center center;
}
.FCK__SelectBox {
   width: 18px;
   height: 18px;
   background-image: url(images/fck_selectbox.gif);
   background-repeat: no-repeat;
   vertical-align: text-bottom;
   background-position: center center;
}

Copy this styles into /editor/css/fck_internal.css and /editor/fckeditor.html after .FCK__InputHidden class.

Make a plugin to change contextmenu and formfields with fakeimages.

FCKDocumentProcessor.AppendNew().ProcessDocument = function( document )
{
   var aInputs = document.getElementsByTagName( 'INPUT' ) ;
   var oInput ;
   var i = aInputs.length - 1 ;
   while ( i >= 0 && ( oInput = aInputs[i--] ) )
   {
      if ( oInput.type == 'checkbox' )
      {
         var oImg = FCKDocumentProcessor_CreateFakeImage( 'FCK__InputCheckbox', oInput.cloneNode(true) ) ;
         oImg.setAttribute( '_fckinputcheckbox', 'true', 0 ) ;

         oInput.parentNode.insertBefore( oImg, oInput ) ;
         oInput.parentNode.removeChild( oInput ) ;
      }
      if ( oInput.type == 'radio' )
      {
         var oImg = FCKDocumentProcessor_CreateFakeImage( 'FCK__InputRadiobutton', oInput.cloneNode(true) ) ;
         oImg.setAttribute( '_fckinputradiobutton', 'true', 0 ) ;

         oInput.parentNode.insertBefore( oImg, oInput ) ;
         oInput.parentNode.removeChild( oInput ) ;
      }
   }
   
   var aSelects = document.getElementsByTagName( 'SELECT' ) ;
   var oSelect ;
   var i = aSelects.length - 1 ;
   while ( i >= 0 && ( oSelect = aSelects[i--] ) )
   {
      var oImg = FCKDocumentProcessor_CreateFakeImage( 'FCK__SelectBox', oSelect.cloneNode(true) ) ;
      oImg.setAttribute( '_fckselectbox', 'true', 0 ) ;

      oSelect.parentNode.insertBefore( oImg, oSelect ) ;
      oSelect.parentNode.removeChild( oSelect ) ;
   }
};
FCK.ContextMenu.RegisterListener( {
   AddItems : function( menu, tag, tagName )
   {
      if ( tagName == 'IMG' && tag.getAttribute( '_fckinputcheckbox' ) )
      {
         menu.AddSeparator() ;
         menu.AddItem( 'Checkbox', FCKLang.CheckboxProp, 49 ) ;
      }
      
      if ( tagName == 'IMG' && tag.getAttribute( '_fckinputradiobutton' ) )
      {
         menu.AddSeparator() ;
         menu.AddItem( 'Radio', FCKLang.RadioButtonProp, 50 ) ;
      }
      
      if ( tagName == 'IMG' && tag.getAttribute( '_fckselectbox' ) )
      {
         menu.AddSeparator() ;
         menu.AddItem( 'Select', FCKLang.SelectionFieldProp, 53 ) ;
      }
   }}
);

Open /editor/dialog/fck_radiobutton.html and change:

var oActiveEl = dialog.Selection.GetSelectedElement() ;

with:

var FCK = oEditor.FCK ;
var oFakeImage = dialog.Selection.GetSelectedElement() ;
var oActiveEl ;
if ( oFakeImage ) {
   if ( oFakeImage.tagName == 'IMG' && oFakeImage.getAttribute('_fckinputradiobutton') )
      oActiveEl = FCK.GetRealElement( oFakeImage ) ;
   else
      oFakeImage = null ;
}

Open /editor/dialog/fck_checkbox.html and change:

var oActiveEl = dialog.Selection.GetSelectedElement() ;

with:

var FCK = oEditor.FCK ;
var oFakeImage = dialog.Selection.GetSelectedElement() ;
var oActiveEl ;
if ( oFakeImage ) {
   if ( oFakeImage.tagName == 'IMG' && oFakeImage.getAttribute('_fckinputcheckbox') )
      oActiveEl = FCK.GetRealElement( oFakeImage ) ;
   else
      oFakeImage = null ;
}

Open /editor/dialog/fck_select.html and change:

var oActiveEl = dialog.Selection.GetSelectedElement() ;

with:

var FCK = oEditor.FCK ;
var oFakeImage = dialog.Selection.GetSelectedElement() ;
var oActiveEl ;
if ( oFakeImage ) {
   if ( oFakeImage.tagName == 'IMG' && oFakeImage.getAttribute('_fckselectbox') )
      oActiveEl = FCK.GetRealElement( oFakeImage ) ;
   else
      oFakeImage = null ;
}

That's it.