CKEditor 4
Tue, 08/25/2009 - 21:49
#1
sojoweb
sojoweb's picture
Joined: 25/08/2009
Posts: 3

Image VSPACE and HSPACE

Is there a way to get CKEditor to use valid styles for images rather than deprecated functions like HSPACE and VSPACE that do not work in many browsers now? Any help on this matter would be greatly appreciated.

Cheers!
Top
Tue, 08/25/2009 - 22:50
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Image VSPACE and HSPACE

I don't think that I've seen any browser where VSPACE and HSPACE doesn't work. What are you using?
Top
Tue, 08/25/2009 - 22:57
sojoweb
sojoweb's picture
Joined: 25/08/2009
Posts: 3

Re: Image VSPACE and HSPACE

I am on Firefox 3.5 on the Mac. I will check my stylesheet again to see if there is an over ride taking place, but for whatever reason cannot seem to get the VSpace or HSpace functions to display properly.

Thanks and best regards.
Top
Tue, 08/25/2009 - 23:18
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Image VSPACE and HSPACE

That's different.
Any stylesheet will override those attributes. Another good reason to forget about them.
Top
Tue, 08/25/2009 - 23:36
sojoweb
sojoweb's picture
Joined: 25/08/2009
Posts: 3

Re: Image VSPACE and HSPACE

Thanks... unfortunately when you design sites and admin areas for users that are not technically inclined when it comes to applying CSS in the advanced tabs - like I would prefer they do - I have to keep an easy option for them and using the align, hspace, and vspace is really the only way to do it (even though it doesn't meet standards for XHTML).

I was able to fix the problem by taking the img tag out of my reset file with margins zeroed out.
Top
Wed, 08/26/2009 - 08:41
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Image VSPACE and HSPACE

I prefer to offer them some classes to apply with the proper styles set, so they keep the style through all the site
Top
Fri, 08/06/2010 - 22:42
sgruenholz
sgruenholz's picture
Joined: 06/08/2010
Posts: 1

Re: Image VSPACE and HSPACE

looks like I'm about a year too late for you, but...

Here is a way to modify the images dialog. It replaces the hspace/vspace attributes with top right bottom and left margins. It synchs correctly with the styles in the Advanced tab and writes the margins as style objects like you would expect.

Hope this helps someone.

CKEDITOR.on( 'dialogDefinition', function( ev )
{
   // Take the dialog name and its definition from the event data.
   var dialogName = ev.data.name;
   var dialogDefinition = ev.data.definition;

   
   // **************************************
   // IMAGE DIALOG
   // **************************************
   if ( dialogName == 'image' )
   {
      
      // **************************************
      // IMAGE INFO TAB
      // **************************************
      var imageInfoTab = dialogDefinition.getContents( 'info' );
      
      // remove the hspace and vspace fields
      imageInfoTab.remove('txtHSpace');
      imageInfoTab.remove('txtVSpace');
      
      // setup constants and other vars (recreating some functionality)
      var IMAGE = 1,
      LINK = 2,
      PREVIEW = 4,
      CLEANUP = 8,
      regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
      regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
      pxLengthRegex = /^\d+px$/;
      
      // function to update preview
      var updatePreview = function( dialog )
      {
         //Don't load before onShow.
         if ( !dialog.originalElement || !dialog.preview )
            return 1;

         // Read attributes and update imagePreview;
         dialog.commitContent( PREVIEW, dialog.preview );
         return 0;
      };
      
      // function to commit changes internally
      
      // Avoid recursions.
      var incommit;

      // Synchronous field values to other impacted fields is required, e.g. border
      // size change should alter inline-style text as well.
      function commitInternally( targetFields )
      {
         if ( incommit )
            return;

         incommit = 1;

         var dialog = this.getDialog(),
            element = dialog.imageElement;
         if ( element )
         {
            // Commit this field and broadcast to target fields.
            this.commit( IMAGE, element );

            targetFields = [].concat( targetFields );
            var length = targetFields.length,
               field;
            for ( var i = 0; i < length; i++ )
            {
               field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
               // May cause recursion.
               field && field.setup( IMAGE, element );
            }
         }

         incommit = 0;
      }
      
      // new margin fields
      imageInfoTab.add( {
         
         type : 'fieldset',
         label: 'Margins',
         children : 
         [
             {
               type : 'vbox',
               padding : 1,
               width : '100px',
               label: 'Margins',
               align: 'center',
               children :
               [
               
                  // margin-top
                  {
                     type : 'text',
                     id : 'txtMarginTop',
                     width: '40px',
                     labelLayout : 'horizontal',
                     label : 'Top',
                     'default' : '',
                     onKeyUp : function()
                     {
                        updatePreview( this.getDialog() );
                     },
                     onChange : function()
                     {
                        commitInternally.call( this, 'advanced:txtdlgGenStyle' );
                     },
                     validate : CKEDITOR.dialog.validate.integer( ev.editor.lang.image.validateVSpace ),
                     setup : function( type, element )
                     {
                        if ( type == IMAGE )
                        {
                           var value,
                              marginTopPx,
                              marginTopStyle = element.getStyle( 'margin-top' );
               
                           marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
                           marginTopPx = parseInt( marginTopStyle, 10 );
                           value = marginTopPx;
                           isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
               
                           this.setValue( value );
                        }
                     },
                     commit : function( type, element, internalCommit )
                     {
                        var value = parseInt( this.getValue(), 10 );
                        if ( type == IMAGE || type == PREVIEW )
                        {
                           if ( !isNaN( value ) )
                           {
                              element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
                           }
                           else if ( !value && this.isChanged( ) )
                           {
                              element.removeStyle( 'margin-top' );
                           }
               
                           if ( !internalCommit && type == IMAGE )
                              element.removeAttribute( 'vspace' );
                        }
                        else if ( type == CLEANUP )
                        {
                           element.removeAttribute( 'vspace' );
                           element.removeStyle( 'margin-top' );
                        }
                     }
                  }, // end margin-top
                  
                  // margin-right
                  {
                     type : 'text',
                     id : 'txtMarginRight',
                     width: '40px',
                     labelLayout : 'horizontal',
                     label : 'Right',
                     'default' : '',
                     onKeyUp : function()
                     {
                        updatePreview( this.getDialog() );
                     },
                     onChange : function()
                     {
                        commitInternally.call( this, 'advanced:txtdlgGenStyle' );
                     },
                     validate : CKEDITOR.dialog.validate.integer( ev.editor.lang.image.validateHSpace ),
                     setup : function( type, element )
                     {
                        if ( type == IMAGE )
                        {
                           var value,
                              marginRightPx,
                              marginRightStyle = element.getStyle( 'margin-right' );
               
                           marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
                           marginRightPx = parseInt( marginRightStyle, 10 );
                           value = marginRightPx;
                           isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
               
                           this.setValue( value );
                        }
                     },
                     commit : function( type, element, internalCommit )
                     {
                        var value = parseInt( this.getValue(), 10 );
                        if ( type == IMAGE || type == PREVIEW )
                        {
                           if ( !isNaN( value ) )
                           {
                              element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
                           }
                           else if ( !value && this.isChanged( ) )
                           {
                              element.removeStyle( 'margin-right' );
                           }
               
                           if ( !internalCommit && type == IMAGE )
                              element.removeAttribute( 'hspace' );
                        }
                        else if ( type == CLEANUP )
                        {
                           element.removeAttribute( 'hspace' );
                           element.removeStyle( 'margin-right' );
                        }
                     }
                  }, // end margin-right
                  
                  // margin-bottom
                  {
                     type : 'text',
                     id : 'txtMarginBottom',
                     width: '40px',
                     labelLayout : 'horizontal',
                     label : 'Bottom',
                     'default' : '',
                     onKeyUp : function()
                     {
                        updatePreview( this.getDialog() );
                     },
                     onChange : function()
                     {
                        commitInternally.call( this, 'advanced:txtdlgGenStyle' );
                     },
                     validate : CKEDITOR.dialog.validate.integer( ev.editor.lang.image.validateVSpace ),
                     setup : function( type, element )
                     {
                        if ( type == IMAGE )
                        {
                           var value,
                              marginBottomPx,
                              marginBottomStyle = element.getStyle( 'margin-bottom' );
               
                           marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
                           marginBottomPx = parseInt( marginBottomStyle, 10 );
                           value = marginBottomPx;
                           isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
               
                           this.setValue( value );
                        }
                     },
                     commit : function( type, element, internalCommit )
                     {
                        var value = parseInt( this.getValue(), 10 );
                        if ( type == IMAGE || type == PREVIEW )
                        {
                           if ( !isNaN( value ) )
                           {
                              element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
                           }
                           else if ( !value && this.isChanged( ) )
                           {
                              element.removeStyle( 'margin-bottom' );
                           }
               
                           if ( !internalCommit && type == IMAGE )
                              element.removeAttribute( 'vspace' );
                        }
                        else if ( type == CLEANUP )
                        {
                           element.removeAttribute( 'vspace' );
                           element.removeStyle( 'margin-bottom' );
                        }
                     }
                  }, // end margin-bottom
                  
                  // margin-left
                  {
                     type : 'text',
                     id : 'txtMarginLeft',
                     width: '40px',
                     labelLayout : 'horizontal',
                     label : 'Left',
                     'default' : '',
                     onKeyUp : function()
                     {
                        updatePreview( this.getDialog() );
                     },
                     onChange : function()
                     {
                        commitInternally.call( this, 'advanced:txtdlgGenStyle' );
                     },
                     validate : CKEDITOR.dialog.validate.integer( ev.editor.lang.image.validateHSpace ),
                     setup : function( type, element )
                     {
                        if ( type == IMAGE )
                        {
                           var value,
                              marginLeftPx,
                              marginLeftStyle = element.getStyle( 'margin-left' );
               
                           marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
                           marginLeftPx = parseInt( marginLeftStyle, 10 );
                           value = marginLeftPx;
                           isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
               
                           this.setValue( value );
                        }
                     },
                     commit : function( type, element, internalCommit )
                     {
                        var value = parseInt( this.getValue(), 10 );
                        if ( type == IMAGE || type == PREVIEW )
                        {
                           if ( !isNaN( value ) )
                           {
                              element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
                           }
                           else if ( !value && this.isChanged( ) )
                           {
                              element.removeStyle( 'margin-left' );
                           }
               
                           if ( !internalCommit && type == IMAGE )
                              element.removeAttribute( 'hspace' );
                        }
                        else if ( type == CLEANUP )
                        {
                           element.removeAttribute( 'hspace' );
                           element.removeStyle( 'margin-left' );
                        }
                     }
                  } // end margin-left
               ]
            }     
                     
         ]
            
      }, 'txtBorder');

      // this syntax chokes in Safari and others (I think "default" is reserved)
      //imageInfoTab.get('txtBorder').default = '0';
      
      // this syntax works...
      // set default border to zero
      var imageTxtBorder = imageInfoTab.get('txtBorder');
      imageTxtBorder['default'] = '0';
      
   }
   
});
Top
Mon, 08/30/2010 - 17:47
eculeus
eculeus's picture
Joined: 30/08/2010
Posts: 1

Re: Image VSPACE and HSPACE

Thanks for the code. This is a much-needed solution.

I'm just getting started with CKEditor, so I'm unsure of how to install this code. Could someone point me in the right direction? Thanks!
Top
Tue, 03/05/2013 - 12:40
(Reply to #8)
nikithar
nikithar's picture
Joined: 05/03/2013
Posts: 1

Almost three years late.

Almost three years late.

Simply add the code above to your image.js located in plugins/image/dialogs.

Hope that will do it, if you're still alive :)

Top
Tue, 03/25/2014 - 14:27
(Reply to #9)
c3dr1c
c3dr1c's picture
Joined: 25/03/2014
Posts: 1

MANY THANKS

you rock sgruenholz
It is a nice piece of code.

with your post and this one (http://fuseinteractive.ca/blog/wysiwyg-module-ckeditor-taming-beast), it was so easy to customize my drupal ckeditor the way I wanted.

Top
Thu, 02/19/2015 - 17:13
dzoniboj
dzoniboj's picture
Joined: 19/02/2015
Posts: 1

Hello,

Hello,

I copy/pasted the code above to image.js ( I replaced the code there with the one from the post above ) but it's the same, I still get HSpace and VSpace, I do not see separate entries for margin left, right, bottom, left ?

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check