Skip to content
Siolon
Siolon
  • Home
  • About
  • Archives
  • Testimonials
  • Contact
Siolon

Use TinyMCE Throughout WordPress Application

Chris Poteet, June 11, 2007June 11, 2007

We are familiar with TinyMCE from the WordPress WYSIWYG editor, and it is a fantastic tool to quickly generate markup that is semantic and XHTML compliant. But what if what we want to offer it in other parts of our application? One noticeable example would be on single post pages so your visitors can use the editor. Here is the code to use, and it goes in your functions.php file in your current theme directory (if you don’t have one then just add it).

function addtinymce() {
    echo '<script language="javascript" type="text/javascript" src="/wp-includes/js/tinymce/tiny_mce.js"></script>';
    echo '<script language="javascript" type="text/javascript">';
    echo 'tinyMCE.init({mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,strikethrough,bullist,numlist,outdent,indent,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", language : "en",theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left"});';
    echo '</script>';
} ?>

Then you simple add the following function in your header.php before the closing head statement.

<?php addtinymce(); ?>

Notice that I didn’t have to install anything, because I’m using the TinyMCE code that exists in the core (under the wp-includes directory). So, whenever WP updates the code then you will receive the updates automatically, and this is going to happen when 2.3 is released.

You might want to consider where you want to actually load all that JavaScript as it could slow down the loading of your site and increase bandwidth. To circumvent this we should load it only on the pages that it is used via WP conditional tags. Here is an example to load it only on the post reply page. This logic can replace the second code block above.

<?php 
if (is_single()) {
  addtinymce();
}
else {}
?>

Feel free to add multiple conditions to this logic, and you can also configure the TinyMCE options all your heart desires.

Related Posts

Content Management User Interface WordPress

Post navigation

Previous post
Next post

Comments (15)

  1. Scot Hacker says:
    June 27, 2007 at 3:34 am

    Cool! Do you know whether it’s possible to just use it on post pages in QuickTags mode, i.e. with simple buttons but without the full rich text editor?

    I know you’ve linked to the docs above, but just thought you might be able to give me a leg up, if you’ve played with this before. Thanks.

    Reply
  2. Chris Poteet says:
    June 27, 2007 at 3:45 am

    @Scott: You could by adding a filter to the code, but why would you want to do that? What’s wrong with the rich text editor?

    Reply
  3. Scot Hacker says:
    June 27, 2007 at 6:14 am

    Chris – Too heavy/slow loading. I think most people prefer commenting in plain text, but wouldn’t mind a little assist with hrefs etc.

    So there’s no way in that init line to specify the simplified version?

    Reply
  4. Chris Poteet says:
    June 28, 2007 at 3:39 am

    @Scott: You could change the “theme : advanced” to “theme: simple”, but the toolbar will then have to go along the bottom of the textarea. Regardless, it will turn it into a rich text area.

    How slow loading is it for you? It can’t be that bad.

    Reply
  5. Scot Hacker says:
    June 28, 2007 at 8:24 am

    Hmm. Basically I was hoping to reproduce a simplified version of the post editor in wp-admin when rich text editing is disabled in the profile. WP gets it to appear above the text area, rather than below.

    Hard to explain, but for some reason I have little interest in using the rich editor for user comments (for the same reason you’re not using it? :)

    Reply
  6. Chris Poteet says:
    June 28, 2007 at 11:55 am

    @Scott: Ah, I see what you’re wanting, and I wouldn’t know how to hack around that. I think it’s an either/or proposition.

    Reply
  7. Scot Hacker says:
    June 29, 2007 at 4:00 am

    Thanks for your tips on this. I’ll give it a whirl one of these days.

    Reply
  8. Cau says:
    September 2, 2007 at 4:38 am

    There is another way, using WP native functions (loads the editor with the default WP configurations):

    if(user_can_richedit()) { // if rich editor is enabled
    wp_enqueue_script(‘tiny_mce’);
    wp_enqueue_script(‘wp_tiny_mce’);
    }

    Reply
  9. Sebastian says:
    August 19, 2009 at 8:08 am

    Hey,

    your highlight function for google search related visitors also puts the highlight in the code block!

    tinyMCE.init

    just want to let you know!

    Reply
    1. Chris Poteet says:
      September 4, 2009 at 12:44 am

      @Sebastian: Thanks. That is expected behavior.

      Reply
  10. Doug says:
    November 13, 2009 at 4:32 pm

    yeah if you arrive here from Google the stupid search term highlight deal makes the code unusable. Can’t copy paste it and most of it is invisible.

    Reply
  11. Chris Poteet says:
    November 13, 2009 at 4:39 pm

    @Doug: Sorry about that. My plugin was screwed up. Now it should work although I haven’t tested this code in a while.

    Reply
  12. Wijnand says:
    August 5, 2010 at 8:43 pm

    I would like to have some syntaxhighlighting-button to this script, is that possible?

    So you can show php/C#/etc. code with colors in your page?

    Reply
    1. Chris Poteet says:
      August 5, 2010 at 8:51 pm

      @wijnand: I assume you can use a TinyMCE plugin like this.

      Reply
  13. Pingback: The Sharing and Caring of the WordPress Community Shines « Lorelle on WordPress

Leave a Reply Cancel reply

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

Search

        ©2025 Siolon | WordPress Theme by SuperbThemes