Per Søderlind

Update: 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:

wp_editor( $content, $editor_id, $settings = array() );

// default settings
$settings =   array(
	'wpautop' => true, // use wpautop?
	'media_buttons' => true, // show insert/upload button(s)
	'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	'tabindex' => '',
	'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
	'editor_class' => '', // add extra class(es) to the editor textarea
	'teeny' => false, // output the minimal editor config used in Press This
	'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
	'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
	'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);

wp_editor( $content, $editor_id, $settings = array() );

// default settings

$settings = array(

'wpautop' => true, // use wpautop?

'media_buttons' => true, // show insert/upload button(s)

'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here

'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."

'tabindex' => '',

'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".

'editor_class' => '', // add extra class(es) to the editor textarea

'teeny' => false, // output the minimal editor config used in Press This

'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)

'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()

'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()

);

View the wp_editor() examples

I code for fun

Adding custom headers to the WordPress plugin directory

WordPress and WebPutty

Modernizr 101

Front-end editor in WordPress 3.3 is easy

Running WordPress locally on Mac OS X Lion and Mountain Lion