CKEditor 4
Wed, 06/15/2011 - 12:05
#1
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

How To Center Toolbar Icons?

Hi all,

First, please let me complement the developers of CKeditor. Wow, what an accomplishment guys, it's a masterpiece. I looked at a number of other editors before finding CKeditor, and none of them come close. Well done, well done. Bowing, bowing...

If your time permits, a couple of fairly trivial questions.

1) Ideally I'd like to be able to center the toolbar icons over the textarea. I'm using about half the features, and have them organized in to three rows. They look kinda lonely way over on the left margin. Can you give me a clue what file this code is in?

2) Ideally I'd like to replace the toolbar icons with buttons which describe the feature using a word instead of a picture. (Like the editor in this forum) The tooltips popups are great, but it might be greater if they weren't needed. I realize the icons are necessary if one wanted all the features, but I'm going for fewer clearer features in my setup.

I was hoping I could perhaps just replace the toolbar icon images with different images, but maybe the toolbar icons aren't actually images?

I'd be grateful if you might give me an idea how much work this would be be, and where the changes could be made.

If none of this is possible etc, no worries, I love CKeditor as it is.

Thanks so much!
Top
Wed, 06/15/2011 - 14:47
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: How To Center Toolbar Icons?

You can create your own toolbar if you want lots of changes, just look at the API sample that shows how to call the commands.
Top
Wed, 06/15/2011 - 15:46
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Thanks for your reply, much appreciated.

Do you mean the file api.html in the _samples folder?

Or this perhaps? http://docs.cksource.com/ckeditor_api/

Top
Wed, 06/15/2011 - 16:18
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: How To Center Toolbar Icons?

The file. It's small and shows how you can use your own buttons.

The page that you linked is a reference for all the internal objects, methods, etc... that you might need to look at when you want to know how something works, but as I said, it's a reference, not a tutorial or guide.
Top
Wed, 06/15/2011 - 18:15
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Hmm...

We must be talking about different files? I can see no reference to buttons in this file...

ckeditor/_samples/api.html
Top
Wed, 06/15/2011 - 18:20
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: How To Center Toolbar Icons?

Yes, there are two buttons titled "execute bold command" and "execute link command"
Top
Wed, 06/15/2011 - 18:34
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Ok, I see what you mean now. Thank you.

So, I could remove all the toolbar icons (i know how to do that) and then create all my own buttons outside of the editor interface using the method shown in the avi sample page, right?

I could add the onclick command to my own images, instead of using form buttons as shown in the example, yes?

If yes, I think I get it now, and should be able to do what I have in mind. Thanks for hanging with me.
Top
Wed, 06/15/2011 - 23:32
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Got it working. Beautiful. I'm now the master of my own toolbar.

Well, almost, once I learn how to make plugins that is.

Thanks again!
Top
Thu, 06/16/2011 - 13:42
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Almost there....

I've got all my own toolbar buttons working, except for four.

Here's a stripped down test page which shows only the four features.

http://forum-engine-network.com/tooltest/test.html

In this sample, all four features work when triggered by the built-in default icons, but these features do not work when triggered by my own buttons.

I've experimented with these four commands extensively (uppercase, lowercase, etc). I've spent an hour searching forum, docs, files etc for a list of these toolbar commands, without success. I can see the issue probably is that these four commands involve two words, and have tried spaces, hyphens, underscores, and merging the two words in to one. I seem to be a lousy hacker... There's got to be a simple solution here, but it escapes me.

I was able to get all other toolbar commands I need to work by taking them from the icon code, and shifting the command to lowercase.

Here's the full source of the sample page I've linked to above.

Many thanks for any tips!

<html>
<head>

<script type="text/javascript" src="http://forum-engine-network.com/ckeditor/ckeditor.js"></script>

<title></title>

<script type="text/javascript">
//<![CDATA[

function ExecuteCommand( commandName )
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;

// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
   // Execute the command.
   // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
   oEditor.execCommand( commandName );
}
else
   alert( 'You must be in WYSIWYG mode!' );
}

//]]>
</script>

</head>

<body link=""  vlink="">


<center><br>
<table width=750 align=center  cellspacing="0" cellpadding="0">
<tr>
<td  align=center>
<div align=center style="display:block;width:750px;text-align:center;padding:5px 0px 0px 0px;background-color:#999999;" >
<img  onclick="ExecuteCommand('spellchecker');"  src = "buttons/spell.png" alt="">
<img  onclick="ExecuteCommand('textcolor');"  src = "buttons/textcolor.png" alt="">
<img  onclick="ExecuteCommand('BGColor');"  src = "buttons/backcolor.png" alt="">
<img  onclick="ExecuteCommand('removeformat');"  src = "buttons/unformat.png" alt="">
</div>
</td>
</tr>

</table>


<form action="sample_posteddata.php" method="post">
<textarea  id="editor1" name="editor1" ></textarea>

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
   { name: 'editing', items : [ 'SpellChecker' ] },
   { name: 'basicstyles', items : [ 'RemoveFormat' ] },
   { name: 'colors', items : [ 'TextColor','BGColor' ] },
]
});
</script>

</form>
</body>
</html>
Top
Thu, 06/16/2011 - 14:43
datalink
datalink's picture
Joined: 18/10/2007
Posts: 149

Re: How To Center Toolbar Icons?

Take a look to /_source/plugins/... to find the right command names.
Top
Thu, 06/16/2011 - 15:39
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Many thanks! Your suggestion helped me fix two of my broken buttons.

All I have left to fix is TextColor and BGColor.

The only plugin I can find that seems related to these features is "colorbutton". Not sure if this is helpful, but here's the code for that plugin. Thanks for any tips!

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.plugins.add( 'colorbutton',
{
   requires : [ 'panelbutton', 'floatpanel', 'styles' ],

   init : function( editor )
   {
      var config = editor.config,
         lang = editor.lang.colorButton;

      var clickFn;

      if ( !CKEDITOR.env.hc )
      {
         addButton( 'TextColor', 'fore', lang.textColorTitle );
         addButton( 'BGColor', 'back', lang.bgColorTitle );
      }

      function addButton( name, type, title )
      {
         var colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';
         editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,
            {
               label : title,
               title : title,
               className : 'cke_button_' + name.toLowerCase(),
               modes : { wysiwyg : 1 },

               panel :
               {
                  css : editor.skin.editor.css,
                  attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }
               },

               onBlock : function( panel, block )
               {
                  block.autoSize = true;
                  block.element.addClass( 'cke_colorblock' );
                  block.element.setHtml( renderColors( panel, type, colorBoxId ) );
                  // The block should not have scrollbars (#5933, #6056)
                  block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );

                  CKEDITOR.ui.fire( 'ready', this );

                  var keys = block.keys;
                  var rtl = editor.lang.dir == 'rtl';
                  keys[ rtl ? 37 : 39 ]   = 'next';               // ARROW-RIGHT
                  keys[ 40 ]   = 'next';               // ARROW-DOWN
                  keys[ 9 ]   = 'next';               // TAB
                  keys[ rtl ? 39 : 37 ]   = 'prev';               // ARROW-LEFT
                  keys[ 38 ]   = 'prev';               // ARROW-UP
                  keys[ CKEDITOR.SHIFT + 9 ]   = 'prev';   // SHIFT + TAB
                  keys[ 32 ]   = 'click';               // SPACE
               },

               // The automatic colorbox should represent the real color (#6010)
               onOpen : function()
               {
                  var selection = editor.getSelection(),
                     block = selection && selection.getStartElement(),
                     path = new CKEDITOR.dom.elementPath( block ),
                     color;

                  // Find the closest block element.
                  block = path.block || path.blockLimit || editor.document.getBody();

                  // The background color might be transparent. In that case, look up the color in the DOM tree.
                  do
                  {
                     color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';
                  }
                  while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) );

                  // The box should never be transparent.
                  if ( !color || color == 'transparent' )
                     color = '#ffffff';

                  this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );
               }
            });
      }


      function renderColors( panel, type, colorBoxId )
      {
         var output = [],
            colors = config.colorButton_colors.split( ',' ),
            total = colors.length + ( config.colorButton_enableMore ? 2 : 1 );

         var clickFn = CKEDITOR.tools.addFunction( function( color, type )
            {
               if ( color == '?' )
               {
                  var applyColorStyle = arguments.callee;
                  function onColorDialogClose( evt )
                  {
                     this.removeListener( 'ok', onColorDialogClose );
                     this.removeListener( 'cancel', onColorDialogClose );

                     evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );
                  }

                  editor.openDialog( 'colordialog', function()
                  {
                     this.on( 'ok', onColorDialogClose );
                     this.on( 'cancel', onColorDialogClose );
                  } );

                  return;
               }

               editor.focus();

               panel.hide();


               editor.fire( 'saveSnapshot' );

               // Clean up any conflicting style within the range.
               new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : 'inherit' } ).remove( editor.document );

               if ( color )
               {
                  var colorStyle = config['colorButton_' + type + 'Style'];

                  colorStyle.childRule = type == 'back' ?
                     function( element )
                     {
                        // It's better to apply background color as the innermost style. (#3599)
                        // Except for "unstylable elements". (#6103)
                        return isUnstylable( element );
                     }
                     :
                     function( element )
                     {
                        // Fore color style must be applied inside links instead of around it.
                        return element.getName() != 'a' || isUnstylable( element );
                     };

                  new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
               }

               editor.fire( 'saveSnapshot' );
            });

         // Render the "Automatic" button.
         output.push(
            '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
               ' title="', lang.auto, '"' +
               ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
               ' href="javascript:void(\'', lang.auto, '\')"' +
               ' role="option" aria-posinset="1" aria-setsize="', total, '">' +
               '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
                  '<tr>' +
                     '<td>' +
                        '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
                     '</td>' +
                     '<td colspan=7 align=center>',
                        lang.auto,
                     '</td>' +
                  '</tr>' +
               '</table>' +
            '</a>' +
            '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );

         // Render the color boxes.
         for ( var i = 0 ; i < colors.length ; i++ )
         {
            if ( ( i % 8 ) === 0 )
               output.push( '</tr><tr>' );

            var parts = colors[ i ].split( '/' ),
               colorName = parts[ 0 ],
               colorCode = parts[ 1 ] || colorName;

            // The data can be only a color code (without #) or colorName + color code
            // If only a color code is provided, then the colorName is the color with the hash
            // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
            if (!parts[1])
               colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );

            var colorLabel = editor.lang.colors[ colorCode ] || colorCode;
            output.push(
               '<td>' +
                  '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
                     ' title="', colorLabel, '"' +
                     ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +
                     ' href="javascript:void(\'', colorLabel, '\')"' +
                     ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +
                     '<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
                  '</a>' +
               '</td>' );
         }

         // Render the "More Colors" button.
         if ( config.colorButton_enableMore === undefined || config.colorButton_enableMore )
         {
            output.push(
               '</tr>' +
               '<tr>' +
                  '<td colspan=8 align=center>' +
                     '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
                        ' title="', lang.more, '"' +
                        ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
                        ' href="javascript:void(\'', lang.more, '\')"',
                        ' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',
                        lang.more,
                     '</a>' +
                  '</td>' );   // tr is later in the code.
         }

         output.push( '</tr></table>' );

         return output.join( '' );
      }

      function isUnstylable( ele )
      {
         return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );
      }
   }
});

/**
 * Whether to enable the "More Colors..." button in the color selectors.
 * @name CKEDITOR.config.colorButton_enableMore
 * @default true
 * @type Boolean
 * @example
 * config.colorButton_enableMore = false;
 */

/**
 * Defines the colors to be displayed in the color selectors. It's a string
 * containing the hexadecimal notation for HTML colors, without the "#" prefix.
 *
 * Since 3.3: A name may be optionally defined by prefixing the entries with the
 * name and the slash character. For example, "FontColor1/FF9900" will be
 * displayed as the color #FF9900 in the selector, but will be outputted as "FontColor1".
 * @name CKEDITOR.config.colorButton_colors
 * @type String
 * @default '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'
 * @example
 * // Brazil colors only.
 * config.colorButton_colors = '00923E,F8C100,28166F';
 * @example
 * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00'
 */
CKEDITOR.config.colorButton_colors =
   '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
   'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
   'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
   'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
   'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';

/**
 * Holds the style definition to be used to apply the text foreground color.
 * @name CKEDITOR.config.colorButton_foreStyle
 * @type Object
 * @example
 * // This is basically the default setting value.
 * config.colorButton_foreStyle =
 *     {
 *         element : 'span',
 *         styles : { 'color' : '#(color)' }
 *     };
 */
CKEDITOR.config.colorButton_foreStyle =
   {
      element      : 'span',
      styles      : { 'color' : '#(color)' },
      overrides   : [ { element : 'font', attributes : { 'color' : null } } ]
   };

/**
 * Holds the style definition to be used to apply the text background color.
 * @name CKEDITOR.config.colorButton_backStyle
 * @type Object
 * @example
 * // This is basically the default setting value.
 * config.colorButton_backStyle =
 *     {
 *         element : 'span',
 *         styles : { 'background-color' : '#(color)' }
 *     };
 */
CKEDITOR.config.colorButton_backStyle =
   {
      element      : 'span',
      styles      : { 'background-color' : '#(color)' }
   };
Top
Thu, 06/16/2011 - 16:30
datalink
datalink's picture
Joined: 18/10/2007
Posts: 149

Re: How To Center Toolbar Icons?

Oh yes, that's not easy. For this you have to write your own plugin. If you click on the original color buttons, there is a "More colors..." that call a function to open the colors dialog. Your plugin has to simulate this function. Look at var clickFn.
Top
Thu, 06/16/2011 - 18:18
tanny
tanny's picture
Joined: 15/06/2011
Posts: 21

Re: How To Center Toolbar Icons?

Ok, thanks for letting me know, that's helpful.

But fear not, I have engineered a brilliant solution to this tricky issue.

Keep the icons for the color feature. Duh! :lol:

This is great software, much fun to work with.

Image

Top
Thu, 06/16/2011 - 23:46
123steel
123steel's picture
Joined: 16/06/2011
Posts: 1

Re: How To Center Toolbar Icons?

Thank you for posting this! This helped me figure out my tool bar problem.
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check