Languages: English • 日本語 (Add your language)
WordPress is bundled with the open source HTML WYSIWYG editor TinyMCE by Moxiecode Systems, AB.
WordPress 3.9 was released with a major update to TinyMCE version 4.0 in WordPress core. TinyMCE version 4 provides many changes:
There is a changelog which highlights many of the new features.
Generally, there are three groups of TinyMCE plugins added by WordPress plugins:
Looking for more buttons in the WYSIWYG editor? You can toggle the Advanced Editor Toolbar (row 2 of the editor) and unlock a dozen or so extra buttons.
Simply hover over each button in the toolbar, noting the tooltips. When you see "Toggle Toolbar" as a tooltip, click that button. Note the purpose of this button is to expand/collapse row 2 of the editor buttons.
If the "Toggle Toolbar" button is moved to another row of the editor (via custom hooks or filters), it's possible clicking the button will remove all editor button rows. In this case; you must use Alt-V (IE) or Shift-Alt-V (Firefox) to toggle the advanced buttons back "on".
In WP version 3.3.1 the correct toggle command for IE and Firefox is Shift-Alt-Z.
There is a simple (if you understand the Plugin API and hooks) means of adding your own buttons to TinyMCE in WordPress on the TinyMCE Custom Buttons page. See also Plugin API Rich Text Editor Filters for more information.
A detailed tutorial is also available on WP Tuts + and here
If the Advanced Editing Toolbar buttons are not sufficient, and writing your own buttons isn't your thing, perhaps you're looking for a plugin to extend the functionality of the TinyMCE editor. Examples include:
You can find more in the WordPress Plugin Directory.
By default Wordpress & the TinyMCE WYSIWYG editor will automatically add paragraph tags ( P tags or <p> ) around line breaks. This default functionality was installed to assist new users in adhering to standard coding principles.
For many advanced users there are times when the additional spacing caused by paragraph tags interferes with the overall design of the site. For these users the ability to remove the automatic use of P tags or a specific use of P tags is required.
In the case where P tags are disabled completely the user will then be responsible for manually adding paragraph tags themselves via the Text editor instead.
There are 3 primary options for removing P tags. These include:
You may also find plugins to assist with this at WordPress Plugins
If you want to customize which buttons are shown in the editor, or you want to use a custom css file to stylize the visual editor contents, or to prevent tinyMCE from removing styles, spans, etc.. or to customize every aspect of TinyMCE, you can modify the init settings array with the use of the filter tiny_mce_before_init.
You can see the default settings in /wp-includes/class-wp-editor.php, here are some options.
function my_format_TinyMCE( $in ) {
$in['remove_linebreaks'] = false;
$in['gecko_spellcheck'] = false;
$in['keep_styles'] = true;
$in['accessibility_focus'] = true;
$in['tabfocus_elements'] = 'major-publishing-actions';
$in['media_strict'] = false;
$in['paste_remove_styles'] = false;
$in['paste_remove_spans'] = false;
$in['paste_strip_class_attributes'] = 'none';
$in['paste_text_use_dialog'] = true;
$in['wpeditimage_disable_captions'] = true;
$in['plugins'] = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
$in['content_css'] = get_template_directory_uri() . "/editor-style.css";
$in['wpautop'] = true;
$in['apply_source_formatting'] = false;
$in['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";
$in['toolbar1'] = 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv ';
$in['toolbar2'] = 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help ';
$in['toolbar3'] = '';
$in['toolbar4'] = '';
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );