TinyMCE in WordPress Plugins

Unlike some of the other JavaScript assets available to plugin developers through wpenqueuescript(), getting TinyMCE to function in your plugin is a little different. You would perhaps expect to use it like this:

<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
    wp_enqueue_script('tiny_mce');
}
?>

tinyMCE.init({
    mode : "exact",
    elements: "a_nice_textarea",
    theme : "simple"
});

<textarea id="a_nice_textarea" name="a_nice_textarea"></textarea>

However, enqueuing the TinyMCE really won't get you any results. You need to use the wptinymce() function, which is not well documented. Essentially, the function pre-constructs the TinyMCE for you, and you override its default options. The main option to override is editor_selector which points TinyMCE at a specific textarea class.

wp_tiny_mce( false , // true makes the editor "teeny"
    array(
        "editor_selector" => "a_nice_textarea"
    )
);

<textarea class="a_nice_textarea" id="a_nice_textarea" name="a_nice_textarea"></textarea>

You can stick this anywhere you want, and it will work (for the most part). All the available configuration options for TinyMCE can be determined by referencing it within the array. WordPress has a bunch of them determined by default for the post content editor; most of them are fine as is.

// TinyMCE init settings
$initArray = array (
    'mode'                              => 'none',
    'onpageload'                        => 'switchEditors.edInit',
    'width'                             => '100%',
    'theme'                             => 'advanced',
    'skin'                              => 'wp_theme',
    'theme_advanced_buttons1'           => "$mce_buttons",
    'theme_advanced_buttons2'           => "$mce_buttons_2",
    'theme_advanced_buttons3'           => "$mce_buttons_3",
    'theme_advanced_buttons4'           => "$mce_buttons_4",
    'language'                          => "$mce_locale",
    'spellchecker_languages'            => "$mce_spellchecker_languages",
    'theme_advanced_toolbar_location'   => 'top',
    'theme_advanced_toolbar_align'      => 'left',
    'theme_advanced_statusbar_location' => 'bottom',
    'theme_advanced_resizing'           => true,
    'theme_advanced_resize_horizontal'  => false,
    'dialog_type'                       => 'modal',
    'relative_urls'                     => false,
    'remove_script_host'                => false,
    'convert_urls'                      => false,
    'apply_source_formatting'           => false,
    'remove_linebreaks'                 => true,
    'paste_convert_middot_lists'        => true,
    'paste_remove_spans'                => true,
    'paste_remove_styles'               => true,
    'gecko_spellcheck'                  => true,
    'entities'                          => '38,amp,60,lt,62,gt',
    'accessibility_focus'               => true,
    'tab_focus'                         => ':prev,:next',
    'content_css'                       => "$mce_css",
    'save_callback'                     => 'switchEditors.saveCallback',
    'wpeditimage_disable_captions'      => $no_captions,
    'plugins'                           => "$plugins"
);

For a closer look at wptinymce(), check out the source.

For incorporating the Visual/HTML mode switcher, and turning TinyMCE on and off, see Switching Visual/HTML Modes With TinyMCE.

---