Customize WordPress WYSIWYG Editor

Adjustments to the editor TinyMCE via hook, so regardless of the core files of WordPress is also possible and must be used in a number of requirements. So in this article are some examples that can be adapted to its needs and should give an introduction of customizing the TinyMCE editor in WordPress.

You put the following code snippet in the functions.php of the theme or stores it into a Plugin. There are a whole range of possibilities and I would like to show only a small range of them. Adjusting the buttons is quite comfortable to do via the Plugin TinyMCE Advanced.

Adjust HTML-Filter

The default editor is set to always generate xHTML 1.0 and thus not all tags are allowed; a classic example are iframes, which you use for Google Map for example. Sure there are other approaches via short code, etc., but this is not the today topic. Merely as an example, allowing the tag iframe, with various attributes, and the Tags must be added to the variable $ext.

function fb_change_mce_options($initArray) {
	// Comma separated string od extendes tags
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}
	// maybe; set tiny paramter verify_html
	//$initArray['verify_html'] = false;

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Customizing the function of the buttons in your Editor

A way to expand the block formats (theme_advanced_blockformats) or modify and disable a few buttons in your editor (theme_advanced_disable).

function fb_change_mce_buttons( $initArray ) {
	//@see http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
	$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
	$initArray['theme_advanced_disable'] = 'forecolor';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Change language of spelling

In our third case, we adapt the language of the spelling checker, in our example we will now allow German and English only.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+German=de, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

The default values of WordPress

Following the values that are used in the standard of wordpress which gives an insight into the possibilities for the transfer of the array.

'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

Comments are closed.

21 comments

  1. Brandon Martinez

    Awesome! Thanks! I'll have to use this in some themes I'm putting together.

  2. Tiago Morena

    Great post! Thank you very much for this little hack! I´m developing a theme for a client and it´s important to control what he can use in the editor to preserve the overall theme layout. The tutorial worked really nice. Thank you again!
    Tiago.

  3. desarrollo web

    Excelent article & tutorial!

    A greeting.

  4. Hunter Satterwhite

    Is there any way to easily integrate a select, few custom styles? For instance specific classes or id's in to the Format box or the style selector?

    Very cool tutorial; I'll be using this one for sure. Has WP3.0 made any improvements to the WYSIWYG editor?

  5. Carlos

    Some of these settings dont seem to change behavior, e.g.:

    'remove_linebreaks' => true

    ...if I change that to false, linebreaks are still removed. Is something else controlling this?

  6. Sebastien

    Do you know how we can add a style from the list of styles tinymce ?

  7. Frank

    Own Stylesheet for the TinyMCE:

    function ses_tinymce_css($wp) {
    $wp .= ',' . get_bloginfo('stylesheet_url');
    return $wp;
    }
    add_filter( 'mce_css', 'ses_tinymce_css' );

  8. cliotine

    Thanks for the tutorial, very usefull !
    I'd like to know too how to add a style from the list of styles tinymce ?
    I personalized your function adding :
    "$initArray['theme_advanced_blockformats'] = 'p,h2,h3,introduction';" and I'd like to define my style "introduction"

    Thanks for your help !

  9. Lucian Apostol

    The fact that rte editor screw up my HTML code is also annoying me a lot.

    I've fixed it up few weeks ago.

  10. Victor Teixeira

    The default wordpress tnymce implementation doesn't have the style dropdown.

    I think you can add it using the tinymce advanced plugin.

  11. Олег

    'p,address,pre,code,h3,h4,h5,h6'
    code - visible and not work!

  12. Darío Ferrer

    Very useful. Thanks Frank.

  13. slee

    This is a great tip it worked perfectly to set the width of the editor i shall be using this in all my future websites.

    One problem though i cannot get 'remove_linebreaks' to be set to false to stop removing the line breaks.

    have you managed to get this to work?

  14. Martin

    Changing the language of spelling was something I always wanted to do and as time went by I forgot about it. Now with this simple explanation it's done!

    Thanks mate!!!

  15. mercime

    Thank you Frank. I finally put a stop to multi-colored text in Pages and Posts by disabling forecolor :-)
    Cheers.

  16. Karel Cardinaels

    great!
    just what I needed, after trying a few plugins who do not make this happen, this is what fixed it!

    cheers!

  17. Gerry

    Just a little annoying problem, filter ALWAYS quotes the values.

    So you can get this working:
    theme_advanced_buttons1:"bold",

    But you won't be able to get this working:
    setup:function(ed){...}
    because you will always get it wrapped in quotes
    setup:"function(ed){...}"

4 pingbacks

  1. WordPress Picks for the Week [02/24] | Techtites
  2. Best WordPress Development Tutorials From February 2010
  3. Den WYSIWYG-Editor von WordPress anpassen » Guru 2.0 › 3.0
  4. Killer hacks to enhance WordPress editor - CatsWhoCode.com