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.

Answer 1

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

Answer 2

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);
}

?>

Answer 3

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").

Answer 4

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.

Answer 5

Tested and working on wordpress 3.3.1

add to functions or plugin file.

<?php
    add_filter('admin_head','ShowTinyMCE');
    function ShowTinyMCE() {
        // conditions here
        wp_enqueue_script( 'common' );
        wp_enqueue_script( 'jquery-color' );
        wp_print_scripts('editor');
        if (function_exists('add_thickbox')) add_thickbox();
        wp_print_scripts('media-upload');
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
        wp_admin_css();
        wp_enqueue_script('utils');
        do_action("admin_print_styles-post-php");
        do_action('admin_print_styles');
    }
?>

for Adding new content..

<?php the_editor($id='content');?>

for editing my content

<?php the_editor($mySavedContent); ?>

this will include the entire rage of scripts / css and code needed to produce a tinyMCE textarea within either your plugin or template files..

hope this helps..

M

Answer 6

Following guides from here and there (found thanks to this), here's how I've managed to make something work on wordpress 3.0.5 :

<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
    wp_enqueue_script('tiny_mce');
}
wp_tiny_mce( false , // true makes the editor "teeny"
    array(
        "editor_selector" => "tinymce_data"
    )
);
?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.toggleVisual').click(function() {
            console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
        });
        $('a.toggleHTML').click(function() {
            console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
        });
    });
</script>

<form method="post" action="">
<ul>
  <li>
    <span id="submit"><input class="button" type="submit"></span>
    <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
  </li>
  <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
</ul>
</form>