Front-end editor in WordPress 3.3 is easy

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

  1. Highlights
  2. Demos

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:


So the simplest one is:

Want better control?:

Don’t want the quick tags?:

Or you can do:


DFW (Distraction Free Writing) demo:

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

86 thoughts on “Front-end editor in WordPress 3.3 is easy

  1. Matthew Fries

    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.

    Reply
  2. Derk

    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?

    Reply
        1. PerS Post author

          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>

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

          Reply
          1. Derk

            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?

  3. Derk

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

    Reply
  4. Tuomas

    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

    Reply
    1. PerS Post author

      Tuomas, note that this is “pseudo code”, i.e. I’ve tested it, but it needs tweaks and polishing if you’re going to use it (and please feel free to do so):

      Reply
          1. Towfiq I.

            yeah I looked into that plugin earlier. but I like this one better. Is there a way to put up a update button anyhow?

            Thanks :)

          2. cR0Ck

            Yeah I would like to know also, how can i actually ‘edit’ the post i’m looking at?

            I can surely modify the content on the fly but cannot submit to modify the post in the database.

            A little help would be greatly appreciated, very thanks!

  5. Mac

    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?

    Reply
    1. PerS Post author

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

      Reply
  6. Stefan

    Hi PerS,

    i found your example of code by searching the web for “wordpress front end post” and the code looks good, but i can not get this to work. I failed every time i tried it out, to include the code from you into my twentyten theme.

    i use the original TwentyTen Theme from WordPress, no mods or something and i have no more idea in witch file i had to include your code example. Hope you understand me, because my english is not the best.

    Can you show me the right place in the files of the TwentyTen Theme, where i had to insert your lines of code? I tried to include it in the “loop.php” or “index.php” but nothing works, i get only a blank site.

    And oh jear, i am a Rookie and not good in PHP and stuff like that. I do it like, trial and error. ;)

    Reply
  7. Pingback: Front-End Editor für WordPress gibt es als Plugin oder als Code zum manuellen selbst einbauen. » Beitrag » YATTER

  8. Sola

    Hi PerS,

    Have you encountered any problem with user roles?

    I create a tinyMCE editor in the front end, the media upload button shows when I log in as an administrator, but the button disappears when log in as a subscriber, do you know how can I get the media upload button show for subscribers?

    Thanks in advance.

    Reply
  9. Sagive

    Thanks a lot mate… i was stuck trying to get the frontend tinymce to work and the toolbar was empty and non-responsive -> saved my ass! thanks :)

    Reply
  10. Amn

    I i want to validate the field generated by wp_editor() on click event using javascript, i get a null value for the field at first click even if it has input data. On second click it can see the input of the field. How can i get input of a field using javascript on first click of submit button?

    Reply
  11. Pingback: Frontend publisering - Webforumet.no

  12. Andreas

    Thanks for this, Per. I am having a small issue when saving the user input via ajax. It seems it only saves when the editor is in visual mode.

    I can still edit in html mode, but neet to switch to visual before saving the post.

    Anyone have any clue what may cause this?

    Reply
    1. Andreas

      Btw: Here is my code:

      Editor:

      Ajax:

      Reply
    2. PerS Post author

      Hei Andreas

      I believe that tinymce.get(‘epicpagecontent’).getContent(); only find contents when, as you say, you’re in visual mode. When you’re in html mode test if you can get the content directly : $(‘.epicpagecontent’).html();

      Reply
      1. Andreas

        Thanks. That seems to work. Much appreciated :-)

        Do you know how I can get the mode of the editor with jquery, so as it knows what data to use?

        Reply
        1. Andreas

          Nevermind. Figured it out:

          Reply
  13. Andrew

    Great article about the functionality of wp_editor(), thanks. I have implemented this in a couple places of my site’s frontend, and in most cases, it looks and works fantastically well. I do have a minor issue, however, which I was hoping someone might be able to shed some light on.

    For some users (including myself at the moment), the editor loads, but fails to initialize the “Visual” tab. The editor is there, the scripts are loaded, everything is in the browser, but the editor sticks on the HTML tab.

    In most cases, this is just a minor annoyance, users can easily tab over to visual before posting, however for some instances of TinyMCE, I prefer to keep quicktags (the HTML editor) disabled. In these cases, the editor loads, but gets stuck on the empty textarea that acts as its placeholder.

    Strangely, this issue seems to be intermittent, so I suspect it may be somehow related to caching, either browser-side or with w3 total cache. I know these types of issues are difficult to casually diagnose, but if anyone has a suggestion for “jumpstarting” my frontend tinyMCE to make sure it fires up the visual tab when it launches, I would definitely appreciate it.

    Reply
    1. Andrew

      I made a further discovery. This seems to be a cookie related issue. It affects some user accounts and not others. On my PC I can replicate the problem using my administrator account (who frequently uses HTML editing) but both my testuser accounts get the visual editor straight away.

      Its useful information…but I have no clue what to do next.

      Reply
      1. Andrew

        Aah, yes, of course, I should have specified my WP version. This is happening on either side of the update. Both for 3.4.1, and still under 3.4.2.

        I did a little bit more troubleshooting to try to isolate the problem…here’s the scenario. I have two machines, two user accounts, and three browsers; here’s what happens:

        Machine 1, Chrome:
        User 1: TinyMCE fails to initialize visual mode, gets stuck in HTML
        User 2: Everything works
        Guest: Everything works

        Machine 1, Firefox/IE:
        Everything works for all users

        Machine 2:
        Everything works for all users on all browsers

        Moral of the story, it must be a cookie issue, no? The problem is specific to a certain user, on a certain browser, for a certain machine, but doesn’t occur for the same user on a different browser or different machine (with the same browser).

        I know wordpress saves a cookie “wordpress_” plus some encoded information specific to your account. Deleting cookies doesn’t fix the problem, however. Somehow, wordpress thinks that a certain user/browser WANTS to use HTML editing, and it seems to *remembers* this choice even if the cookies are deleted.

        I suppose I need some way to force WP to “forget” this preference.

        Reply
        1. PerS Post author

          For User 1 on Machine 1, in /wp-admin/profile.php, is “Disable the visual editor when writing” chosen ?

          If not, I agree, it must be a cookie or local caching issue. Please try to clear the browser cache for User 1 on Machine 1.

          Reply
        2. Andrew

          Unfortunately, its not the “disable visual” checkbox, and the strangest thing is that even after completely purging the browser cache (which I have tried numerous times), the problem stays. It’s extremely bizarre.

          It seems like WordPress itself is saving some sort of cookie, but I’m not aware of any such behavior. Any other ideas? I’m worried about how many of my other users may be having this problem and I just don’t know about it.

          Reply
          1. Andrew

            Per, thanks for your suggestions. I solved the problem!

            It was actually nothing related to browser caching or TinyMCE initialization.

            It turns out that wordpress saves user interface settings in the user_meta table named wp_user_settings.

            If you can access a php console from within WordPress (I highly recommend http://wordpress.org/extend/plugins/wordpress-console/ for all kinds of php troubleshooting):

            Will display the data saved in this entry. One of the keys in this settings array is ‘editor’, in my case, my user settings contained

            This key takes two values ‘html’ or ‘tinymce’. For some reason, this setting was not updating my “preference” whenever I switched to the visual tab. I had to manually override it with the function:

            And everything is perfect now! Now I just have to figure out if any of my users are having the same problem. Hopefully not!

  14. Zac Eckstein

    I am replacing a regular textbox:

    with the TinyMCE editor:

    It displays fine but the content I enter does not save and the validation I have in place isn’t recognizing the content. Here is my validation/error message:

    The error message is returned even if content has been entered. It worked fine when it was just a regular textbox.

    Here are the parameters for inserting and updating posts:

    Any idea how I can fix this?

    Reply
    1. Zac Eckstein

      Quick edit: after playing for a couple minutes, I discovered that the content is sort of being saved but only shows up after I save the post twice. And, after that, it won’t update when I edit the post either.

      Very strange behavior…

      Reply
  15. s sta

    Hi, I’m using this code you posted previously in the comments to add the tinymce content editor to my front-end pages/posts. The code works as expected, (thank you), but I can’t see how to save this post/page content once it has been updated. Any help/ideas greatly appreciated.

    Reply
  16. Michael

    Hi,
    I’ve recently used WCK with Front-End Posting for our property listing website and it worked just fine. I liked the fact that’s it’s an all in one package, allowing you to create and manage custom fields, post types, taxonomies and providing front-end posting as well.

    Reply
  17. Jonathan

    For what is “theme_advanced_buttons2 – theme_advanced_buttons4“? (Example: 'theme_advanced_buttons2' => '',)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">