soderlind.no

I code for fun

Front-end editor in WordPress 3.3 is easy

| 46 Comments

Thanks to the work done by Andrew Ozz et al., adding a front-end editor in WordPress 3.3 is very simple.

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 (needs specific css)
	'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()
);


So the simplest one is:

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some content</p>', 'textarea01' );
echo '<input type="submit" value="Submit" /></form>'

Want better control?:

$settings = array(
	'wpautop' => true,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
		'theme_advanced_buttons2' => '',
		'theme_advanced_buttons3' => '',
		'theme_advanced_buttons4' => ''
	),
	'quicktags' => array(
		'buttons' => 'b,i,ul,ol,li,link,close'
	)
);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea02', $settings );
echo '<input type="submit" value="Submit" /></form>';

Don’t want the quick tags?:

$settings = array(
	'wpautop' => true,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
		'theme_advanced_buttons2' => '',
		'theme_advanced_buttons3' => '',
		'theme_advanced_buttons4' => ''
	),
	'quicktags' => false
);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea02', $settings );
echo '<input type="submit" value="Submit" /></form>';

Or you can do:

add_filter( 'teeny_mce_buttons',tinytiny_buttons);

$settings = array("teeny"=>true,'media_buttons' => false,'quicktags' => false);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea04', $settings );
echo '<input type="submit" value="Submit" /></form>';

function tinytiny_buttons($buttons) {
	return array('bold', 'italic', 'underline', 'blockquote', 'separator', 'undo', 'redo', 'fullscreen');
}

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

46 Comments

  1. Thank you for the tutorial, it gave me a great head start.

    Do you know if there is currently a way of using this when editing a post?

    For some reason when I create a post on the front end with the editor it works great, but when I click to edit the post I created I see the editor box, but the post content is not included so that I can edit it

  2. @PerS
    Thank you very much! exactly what I was after… man this gonna be cool :)

  3. Update:
    the above snippet works and does indeed populate the editor. However when in visual mode it shows the html code for images instead of displaying them visually like it does on the admin side. Even crazier, if you use the editor to edit a post with images and click save, the post is updated showing the html code instead of the images.

    Is there a specific way of passing data to the editor where it will still work in visual mode?

    Scenario:
    1. create post on front end of the website using the snippet and insert images –works
    2. edit the post on the front end, you no longer see images in visual but code
    3. click update/save now instead of seeing images on the post you see the html code on the front end.

    strange indeed, but very close I think

  4. That was the first thing I tried. My best guess is that somehow wp_editor is not ‘properly’ accepting the formatted input data?

  5. awesome. that was extremely useful!

    I got shocked when I was testing my plugin on the 3.3 beta 1 because it uses the tinymce editor in one my pages.

    now the new 3.3 compatible version is much better and has the visual/html tabs too. sweet

    thanks!

  6. Hi,
    it looks like this code does exactly what I was looking for…Great!
    But, can someone please explain me how I should use the above pieces of code? Is it not clear to me…
    Thanks a lot for the help!!!

  7. Have you actually tried applying above code on the front-end? I’m getting a lot of buggy behavior on two separate installs I’ve tried so far, namely issues with full screen mode and display problems with the visual editor when trying to insert a picture/media.

  8. Hi all,
    We currently try out this plugin:
    http://scribu.net/wordpress/front-end-editor
    that works really well.

    Will using your tutorial do any difference? Do you mean that the above mentioned plugin is no longer needed or that it is actually a replacement of it?

    Thanks

  9. Hi!
    i am new to wordpress and wants to know that is this code work for theme option page, i tried this one but it throws a call to undefined function error.

    i have three textarea on the option page, and wants the post editor there to easily format the content and uplaod the images, or files like post editor work. for theme option i used the code from http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/, but here is no example to add editor on the theme option page.

    plz help me.
    Thanx in advance.

    • Hi Mirza,

      Haven’t tested this myself, but try this. In step 7, in the Nettuts example, replace the textarea in code line 41 with:

      <?php
      // adjust the settings to your liking
      $settings = array(
          'wpautop' => true,
          'media_buttons' => false,
          'tinymce' => array(
              'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
              'theme_advanced_buttons2' => '',
              'theme_advanced_buttons3' => '',
              'theme_advanced_buttons4' => ''
          ),
          'quicktags' => array(
              'buttons' => 'b,i,ul,ol,li,link,close'
          )
      );
      $content = (get_settings( $value['id'] ) != "") ? stripslashes(get_settings( $value['id']) ) : $value['std'] ;
      wp_editor($content, $value['id'], $settings );
      ?>
      
  10. I’m trying to get the content from the editor without actually submitting the page (so the edits can be made via ajax), any suggestions?

  11. Has anyone figured out how to attach the uploaded image to the post created with this method as a front-end editor? All my images are “unattached”.

  12. Hi, I’ve implemented this fairly easy, but the language files doesnt seem to get loaded… when you hover over a button it says {{something}}, and all the image-upload-menus are the same. Fairly annoying and I can’t seem to solve it. Did anyone else notice this?

    Thanks!

    • Sorry, can’t help. On my test sites it works fine both in English and Norwegian (running WP 3.3.1)

      • But I guess you only use this on the back side (dashboard side) of wordpress? I’m using it on the front end… perhaps that’s causing the problem?

        Can you try how to solve this?

        • I’m using it only on the front-end. I need a copy of your code to be able to help you, I sent you an email.

  13. First, thanks for sharing!

    Though your note is interesting, I was compelled to say that “it lack clear details.” Or is it only for the big guys? LOL!!!

    I intend to use this for a multipurpose blogging. And as such I should be able to call it from both within the home page and the archive. So, I need to know, what goes in where. Is the function affected? Do I need to install extra plugin? Or any other helpful tips.

    Andrew Ozz and co are not an option here, so pls don’t refer me there!

    Thanks once again!

    • No, it’s not only for the big guys, but you need some knowledge on plugin and / or theme development. I learned how to use wp_editor by reading the comments to ticket #17144 at WordPress Trac.

      Not sure what you mean by “is the function affected”, but you don’t need to install any plugins to use wp_editor, it’s part of WordPress 3.3 core (you’ll find it in wp-includes/general-template.php)

  14. Pingback: How to edit posts with the new wp_editor api? | Q&A System

  15. Pingback: wp_editor:in käyttö WordPress 3.3 versiossa

  16. I was having a lot of trouble with this until I realized that the theme I was working with did not have the wp_footer action in it! so I added

    just before the body tag and voila!

  17. Sorry for not approving comments until now, been on vacation and offline for the last couple of weeks .. btw, everyone should be offline now and then, it’s a nice experience ;)

  18. Pingback: wp_editor() - What's new in WordPress 3.3

  19. Pingback: Introducing WordPress 3.3.1 - WP Austin

  20. This method of including the text editor in plugins makes things SOOOOO much easier (now that I’ve found how it works!). Thanks!!!

    Question – the media uploader works – files are uploaded and placed into the editor – but it doesn’t include the image resize options (you only get full size or thumbnail). I assume this is something that needs to be loaded in the head or in the editor settings somehow but haven’t figured that part out yet and haven’t found any information about it. Any ideas how to get the media uploader completely working in a plugin?

    • In my test bed everything, including editing images, works fine. Make sure your theme has wp_footer() and that you’re running WordPress 3.3.1. Also see the notes in the post above (editor id can’t have underscore etc). I’m using the following settings array:

      $settings = array(
      	'teeny' => false,
      	'wpautop' => true,
      	'media_buttons' => true,
      	'dfw' => false,
      	'tinymce' => array(
      		'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
      		'theme_advanced_buttons2' => '',
      		'theme_advanced_buttons3' => '',
      		'theme_advanced_buttons4' => ''
      	),
      	'quicktags' => false
      );
      
  21. Never mind! I had old code in the head using wp_tiny_mce() that was causing parts of the editor to not work. Stripped that out and using the default settings. It’s all there! Great – thanks for the article.

  22. Great article .. took me a while to figure out but i got it working with my custom page metabox!

    1 question though: my new field has a grey background instead of a normal white background (like all text editors in WordPress). Any idea whats causing this?

    • And for some reason my output doesnt print a bold word, instead it prints word

    • Please post the code (settings array + wp_editor function) and I’ll have a look.

      The problem with grey background is mentioned in ticket 17144, but was solved,as I understand it, by using wp_editor() and not calling the WP_Editor class.

      Please check if you get a grey background using the test plugin attach to ticket 17144 (download link)

      • http://snippi.com/s/udullb4
        http://snippi.com/s/epf1yuk

        Thats parts of the code i use .. it works .. only the editor shows strong tags instead of the actual mark-up .. and that counts for all sorts of mark-up! The grey background doesnt even bother me that much in comparison to not being able to use plain HTML.

        Help would be apriciated!

        • The plugin doesnt give me a grey background!

        • Ref grey background. I suspect that wp_editor inherits the background from its parent tag (the table you’ve wrapped it in, i.e. class=”form-table”). Use firebug and see if that’s the case. Btw, the closing TD after wp_editor is missing.

          Ref showing markup, try this: wp_editor(esc_html($meta),$field['id'], $settings );, also check what $meta really contains, is it html or is it &ltTAG&gt;

          .. sorry for the hasty answer, got to run .. bbl

        • htmlspecialchars in line 27 in http://snippi.com/s/epf1yuk might be the reason you get the tags back instead of the markup.

          • Pers,

            Thanks for your feedback!

            The htmlspecialchars line fixed the output issue, bold text is now display as bold text (without the strong tags).

            In the admin however i still see tags instead of the actual mark-up!

            Any ideas on that?

  23. It seems i got it working: wp_editor($meta, $field['id'], $settings ); did the trick! (After removing the htmlspecialchars)

  24. This is good stuff, I’ve been reading and searching about the wp_editor a lot lately.

    Anyway, I’m having trouble taking the next step with the editor.I’ve designed several sites with the WP but I wouldn’t consider my self as a coder, so ANY help would be greatly appreciated.

    What I’m trying to do is to be able to write a new post from the frontend, and I’ve got a snippet like this:
    http://snippi.com/s/pnm3un4

    it works as it should.. Just create a new page and paste it in.

    Now the question is.. How can I edit a post with the wp_editor.
    Each post on the front page should have a edit button, that leads to editing that post, so I should write some code to a loop I guess?
    example:
    http://dl.dropbox.com/u/11912245/example.jpg

    I’ve been trying to do this for the last 2 weeks without getting even close to the answer :| I think the functionality would be a bit like in Facebook, author could write and edit posts straight from the homepage.

    Any help would be great :)

    -Tuomas

  25. Thank you so much for this. Have a question for you though; I am creating a front end admin system for my theme, and i have managed to implement the tinyMce on a textarea for editing the post content, but I also have a timyMce plugin for adding shortcodes that I am not managing to add to the tinymce on the front end.

    Any ideas on how I can register the tinyMce plugin in wp_editor?

    • Haven’t tested this myself (I seem to say that a lot lately), but the mce_buttons and mce_external_plugins filters still exists (see wp-includes/class-wp-editor.php).

      Have your tried something like (code adapted from the Loading a TinyMCE Plugin example) this?:

      add_filter("mce_external_plugins", "add_myplugin_tinymce_plugin");
      add_filter('mce_buttons', 'register_myplugin_button');
      
      $settings = array("teeny"=>false); // teeny must be false for external plugins
      
      echo '<form action="" method="post" target="_blank">';
      wp_editor('<p>Some more content</p>', 'textarea04', $settings );
      echo '<input type="submit" value="Submit" /></form>';
      
      function register_myplugin_button($buttons) {
         array_push($buttons, "separator", "myplugin");
         return $buttons;
      }
      
      //
      function add_myplugin_tinymce_plugin($plugin_array) {
         $plugin_array['myplugin'] = plugins_url('my_tinymce_plugin.js', __FILE__);
         return $plugin_array;
      }
      
Click on a tab to select how you'd like to leave your comment

Leave a Reply

Required fields are marked *.

*


Rodney's 404 Handler Plugin plugged in.