Call TinyMCE in a WordPress plugin

Question

Is there a way to add TinyMCE into my own WordPress plugin?

I have a textarea in my back end script and want to make this area into a TinyMCE WYSIWYG editable field. Is there a way to do that?

This code does not work for me:

<?php
    wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>

It shows the javascript error

f is undefined

Firebug screenshot:

This didn't work either:

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>

Solution 1

This is much easier to do in WordPress 3.3 using the wp_editor() function.

I'm working on a plugin that will add a TinyMCE instance to a theme options page. Here's what it looks like:

// Add TinyMCE visual editor
wp_editor( $content, $id );

Where $content is the stored content and $id is the name of the field. Options can also be passed to customize the TinyMCE functionality, check out the WordPress Codex for more details.

Solution 2

Camden already answered this, but in case somebody needs the full code... Be sure to hook in admin_head, hooking into admin_enqueue_scripts will cause it to load before other scripts, such as jQuery, so it will not work.

add_action("admin_head","load_custom_wp_tiny_mce");
function load_custom_wp_tiny_mce() {

if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}


}

Then somewhere in your template insert a regular textarea:

<textarea id="intro"></textarea>

Solution 3

The following example works for me. Just make sure to use the id of the textarea you want to select in the $a["elements"] variable.

Assuming you have a textarea with the id of 'intro':

// attach the tiny mce editor to this textarea
if (function_exists('wp_tiny_mce')) {

  add_filter('teeny_mce_before_init', create_function('$a', '
    $a["theme"] = "advanced";
    $a["skin"] = "wp_theme";
    $a["height"] = "200";
    $a["width"] = "800";
    $a["onpageload"] = "";
    $a["mode"] = "exact";
    $a["elements"] = "intro";
    $a["editor_selector"] = "mceEditor";
    $a["plugins"] = "safari,inlinepopups,spellchecker";

    $a["forced_root_block"] = false;
    $a["force_br_newlines"] = true;
    $a["force_p_newlines"] = false;
    $a["convert_newlines_to_brs"] = true;

    return $a;'));

 wp_tiny_mce(true);
}

?>

Solution 4

The tiny mce function wp_tiny_mce is now depricated. For Latest wordpress you want to use wp_editor

$initial_data='What you want to appear in the text box initially';
$settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'text_area_name'=>'extra_content',//name you want for the textarea
'quicktags' => true,
'tinymce' => true
);
$id = 'editor-test';//has to be lower case
wp_editor($initial_data,$id,$settings);

for more instructions just go through the documentation in wordpress

http://codex.wordpress.org/Function_Reference/wp_editor

Solution 5

I had a similar problem, and class="theEditor" didn't help me either (at first). I was using a custom post type which didn't include the default editor (ie the supports argument didn't include 'editor').

That meant WordPress didn't include the TinyMCE code. Once I added

add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );

to my functions.php (based on the code in the the_editor function in general-template.php) it worked fine (with class="theEditor").

View more solutions

Comments

[CommentLuv]

this worked great for me on my plugins page (wp 3.2.1) I used add_action('admin_head-mypluginpage' to load it only on my plugins page

[Ranjith Siji]

the editor function wp_tiny_mce() depricated in the latest version of wordpress...

[choise]

this is indeed the newest and easiest one. used it for a new project and it works great

[realmag777]

key "text_area_name" must be rewriten as "textarea_name"