Call TinyMCE in a WordPress plugin

1 Views

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?

Read More

wysiwyg demonstration screenshot

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:
TinyMCE error

This didn’t work either: 

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
Post Views: 1

Related posts

Leave a Reply

8 comments

  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.

  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>

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

    ?>

  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

  5. 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>

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

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

  8. I had quite a bit of trouble with this. After searching all day and trying dozens of code examples, I couldn’t get WordPress theme options to save MCE values to database. I tried everything, the jQuery answers, the hidden fields, etc etc. None of that would work for me, probably because I was missing a step somewhere.

    Finally I found this page: http://wptheming.com/options-framework-theme/

    Download from Github & install as directed (easy). Once installed, the last tab in your theme options has an MCE editor. Enter some test paragraphs. Now open the index.php file in the download to see the examples of how to include each thingy in your page. For example, I open footer.php and add a bit of code.

    The only edit I needed to make was:

    <?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>

    The function wpautop() from WordPress adds in paragraph tags, since they aren’t ever saved in the wp database. I put that code in my footer to display the contents of the MCE.