Use TinyMCE Throughout WordPress Application

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.