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
21 responses to “Customize WordPress WYSIWYG Editor”
Awesome! Thanks! I’ll have to use this in some themes I’m putting together.
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.
Excelent article & tutorial!
A greeting.
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?
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?
Do you know how we can add a style from the list of styles tinymce ?
[…] Customize WordPress WYSIWYG Editor […]
Own Stylesheet for the TinyMCE:
function ses_tinymce_css($wp) {
$wp .= ',' . get_bloginfo('stylesheet_url');
return $wp;
}
add_filter( 'mce_css', 'ses_tinymce_css' );
[…] Customize WordPress WYSIWYG Editor […]
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 !
The fact that rte editor screw up my HTML code is also annoying me a lot.
I’ve fixed it up few weeks ago.
The default wordpress tnymce implementation doesn’t have the style dropdown.
I think you can add it using the tinymce advanced plugin.
‘p,address,pre,code,h3,h4,h5,h6’
code – visible and not work!
Very useful. Thanks Frank.
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?
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!!!
Thank you Frank. I finally put a stop to multi-colored text in Pages and Posts by disabling forecolor 🙂
Cheers.
[…] gibt es einen Post und die passenden Kommentare dazu, dieser liegt in ähnlicher Form auch bei WPEngineer.com [EN] vor. Bei wpTricks.net [EN] habe ich einen Post für die visuellen Anpassungen gefunden. Zu den […]
[…] } add_filter('tiny_mce_before_init', 'fb_change_mce_options'); » Source: https://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/Set HTML editor as the defaultI know a lot of tech-savvy persons who don’t really like WordPress […]
great!
just what I needed, after trying a few plugins who do not make this happen, this is what fixed it!
cheers!
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){…}”