CODEWITHSUNDEEP
phpjavascriptwordpresspluginstinymce
choise
choise

Reputation: 25244

Call TinyMCE in a WordPress plugin

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?

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>

Upvotes: 40

Views: 34917

Answers (8)

Jen
Jen

Reputation: 1733

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.

Upvotes: 1

Ranjith Siji
Ranjith Siji

Reputation: 1135

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

Upvotes: 4

Kevinleary.net
Kevinleary.net

Reputation: 9670

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.

Upvotes: 36

Marty
Marty

Reputation: 4657

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

Upvotes: 1

Hobo
Hobo

Reputation: 7611

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

Upvotes: 2

cregox
cregox

Reputation: 18390

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>

Upvotes: 2

Andy
Andy

Reputation: 3171

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>

Upvotes: 11

Camden Daily
Camden Daily

Reputation: 71

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

?>

Upvotes: 7

Related Questions