Update: Things will have to change, TinyMCE 4.0 is in core:
- New UI and UI API.
- New theme.
- Revamped events system/API.
- Better code quality, readability and build process.
- Lots of (inline) documentation.
- And generally many improvements everywhere.
TinyMCE 4.0
Thanks to sushkov, WordPress 3.4 adds support for DFW (Distraction Free Writing) on the front-end. See the example below.
Thanks to the work done by Andrew Ozz et al., adding a front-end editor in WordPress 3.3 is very simple. If you're not into creating your own plugins, head over to wpmu.org, they have a great list of 10 front-end editing plugins.
Syntax:
<br />
wp_editor( $content, $editor_id, $settings = array() );</p>
<p>// default settings<br />
$settings = array(<br />
'wpautop' => true, // use wpautop?<br />
'media_buttons' => true, // show insert/upload button(s)<br />
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here<br />
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."<br />
'tabindex' => '',<br />
'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".<br />
'editor_class' => '', // add extra class(es) to the editor textarea<br />
'teeny' => false, // output the minimal editor config used in Press This<br />
'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)<br />
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()<br />
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()<br />
);<br />
So the simplest one is:
<br />
echo '<form action="" method="post" target="_blank">';<br />
wp_editor('<p>Some content</p>', 'textarea01' );<br />
echo '<input type="submit" value="Submit" /></form>'<br />
Want better control?:
<br />
$settings = array(<br />
'wpautop' => true,<br />
'media_buttons' => false,<br />
'tinymce' => array(<br />
'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',<br />
'theme_advanced_buttons2' => '',<br />
'theme_advanced_buttons3' => '',<br />
'theme_advanced_buttons4' => ''<br />
),<br />
'quicktags' => array(<br />
'buttons' => 'b,i,ul,ol,li,link,close'<br />
)<br />
);</p>
<p>echo '<form action="" method="post" target="_blank">';<br />
wp_editor('<p>Some more content</p>', 'textarea02', $settings );<br />
echo '<input type="submit" value="Submit" /></form>';<br />
Don't want the quick tags?:
<br />
$settings = array(<br />
'wpautop' => true,<br />
'media_buttons' => false,<br />
'tinymce' => array(<br />
'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',<br />
'theme_advanced_buttons2' => '',<br />
'theme_advanced_buttons3' => '',<br />
'theme_advanced_buttons4' => ''<br />
),<br />
'quicktags' => false<br />
);</p>
<p>echo '<form action="" method="post" target="_blank">';<br />
wp_editor('<p>Some more content</p>', 'textarea02', $settings );<br />
echo '<input type="submit" value="Submit" /></form>';<br />
Or you can do:
<br />
add_filter( 'teeny_mce_buttons',tinytiny_buttons);</p>
<p>$settings = array("teeny"=>true,'media_buttons' => false,'quicktags' => false);</p>
<p>echo '<form action="" method="post" target="_blank">';<br />
wp_editor('<p>Some more content</p>', 'textarea04', $settings );<br />
echo '<input type="submit" value="Submit" /></form>';</p>
<p>function tinytiny_buttons($buttons) {<br />
return array('bold', 'italic', 'underline', 'blockquote', 'separator', 'undo', 'redo', 'fullscreen');<br />
}<br />
DFW (Distraction Free Writing) demo:
<br />
<?php<br />
/**<br />
* Template Name: DFW Demo Template<br />
* Description: A Page Template that demos DFW front-end editing<br />
*<br />
*/</p>
<p>get_header(); ?><br />
<div id="primary"><br />
<div id="content" role="main"><br />
<?php<br />
wp_editor('DFW demo content', 'dfw_id', array(<br />
'dfw' => true<br />
));<br />
?><br />
</div><br />
</div><br />
<?php get_footer(); ?><br />
Save the code above as dfw-demo.php in your (child) theme folder (tested with the Twenty Eleven template). Create a page, using the DFW Demo Template. Note, you must be running WordPress 3.4.
Notes (from the codex)
Note that the ID that is passed to the wp_editor() function can only be comprised of lower-case letters. No underscores, no hyphens. Anything else will cause the WYSIWYG editor to malfunction.
Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page
More information
wp_editor() is located in wp-includes/general-template.php
The default settings are defined in wp-includes/class-wp-editor.php
I've also added several examples in the comments below