The WYSIWYG module for Drupal is extremely useful in terms of providing a great plugin for many different WYSIWYG editors. It even allows you to select the different WYSIWYG buttons that will be available for different input formats. However, this functionality has a downside: It places all of the buttons in one long, unorganized line if you place them in with the Drupal interface. This can cause the WYSIWYG editor to be more cumbersome for your users, and can cause it to look unnecessarily sloppy. It can be hard for a non-web savvy person to master WYSIWYG editing, and one long line of uncategorized buttons doesn’t help the process.

Thankfully, the module provides a hook that allows developers to sort and group buttons, but it does require quite a bit of code traversal to figure out. This blog post demonstrates how to do this for three of the most widely used WYSIWYGs: CKEditor, FCKEditor, and TinyMCE. This example only use a sampling of the available buttons, but you can find all available buttons in "/sites/all/modules/wysiwyg/editors/". Just open up the .inc file that corresponds to your WYSIWYG and look for the wysiwyg_ckeditor_plugins() function.

CKEditor

This is the most customizable of the three solutions. Not only can you sort and group buttons, but you can decide what line the buttons go on. All buttons are placed into the $settings[‘toolbar’] array.

FCKEditor

There are only three differences between CKEditor and FCKEditor in terms of button customizations. Button names are different, they need to go into a different array ($settings[‘buttons’]), and you cannot arbitrarily define the rows that buttons it it.

TinyMCE

This is very similar to FCKEditor, except for the fact that button customizations take place in a separate array, $settings['theme_advanced_buttons1'].

Example

Here is a code example that lists a single function that you need to place in your custom module to take advantage of this functionality. Replace 'mymodule' in the function name with the name of your custom module:

function wysiwygbuttons_wysiwyg_editor_settings_alter(&$settings,$context) {
	//Note that you must check to see the editor that is being used before defining the available buttons. For FCKEditor, the "-" character counts as a separator
	if ($context['profile']->editor == "fckeditor") {
		$settings['buttons'] = array(
			array ( 'Bold', 'Italic', 'Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','Image','Flash','-','UnorderedList','OrderedList','-','Undo','Redo','-','Link','Unlink','Anchor','-','TextColor','BGColor','-','Superscript','Subscript','-','FontSize','Style','Table','PasteWord','-','RemoveFormat','Undo','Source'),
		);

	//CKEditor - You can separate lines by using a multidimensional array, and by placing a "/" string in between arrays. "-" also counts as a separator just as in FCKEditor
	} else if ($context['profile']->editor == "ckeditor") {
		$settings['toolbar'] = array(
			//Line 1
			array ( 'Bold', 'Italic', 'Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','Image','Flash','-','BulletedList','NumberedList','-','Undo','Redo','-','Link','Unlink','Anchor','-','Textcolor','BGcolor','-','Superscript','Subscript'),
			
			//Line Separator
			'/',
			
			//Line 2
			array ('FontSize','Styles','Table','PasteFromWord','-','RemoveFormat','Undo','-','Maximize','Source'),
		);
	
	//TinyMCE - The "|" character counts as as separator. In addition, the buttons are defined within a string instead of an array, as CKEditor and FCKEditor are.
	} else if ($context['profile']->editor == "tinymce") {
		$settings['theme_advanced_buttons1'] = "bold,italic,underline,|,link,unlink,anchor,|,justifyleft,justifycenter,justifyright,|,image,flash,|,bullist,numlist,|,undo,redo,";
	}
}

NOTE: If you want to use IMCE in conjunction with a WYSIWYG, you still need to check it off under the corresponding WYSIWYG profile.