Appelez TinyMCE dans un plugin WordPress

Question

Est-il un moyen d'ajouter de TinyMCE dans mon propre plugin WordPress?

J'ai un textarea dans mon dos fin du script et que vous voulez faire de cette zone dans un TinyMCE WYSIWYG champ modifiable. Est-il un moyen de le faire?

Ce code ne fonctionne pas pour moi:

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

Il montre l'erreur de javascript

f is undefined

Firebug capture d'écran:

Cela ne fonctionne pas non plus:

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

Answer 1

C'est beaucoup plus facile à faire dans WordPress 3.3 utilisation du wp_editor() fonction.

Je travaille sur un plugin qui va ajouter une TinyMCE exemple d'une page d'options de thème. Voici à quoi il ressemble:

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

Où $content est le contenu stocké et $id est le nom du champ. Les Options peuvent également être transmises à personnaliser la TinyMCE fonctionnalité, consultez le Codex WordPress pour plus de détails.

Answer 2

Camden a déjà répondu à cette question, mais au cas où quelqu'un aurait besoin du code complet ... Assurez-vous de bien connecter admin_head, car si vous le connectez à admin_enqueue_scripts, il se chargera avant d'autres scripts, tels que jQuery, afin que cela ne fonctionne pas.

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


}
 

Ensuite, quelque part dans votre modèle, insérez une zone de texte régulière:

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

Answer 3

L'exemple suivant fonctionne pour moi. Assurez-vous simplement d'utiliser l'id de la zone de texte que vous souhaitez sélectionner dans la variable $ a ["elements"].

En supposant que vous ayez une zone de texte avec l'id de '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 4

La minuscule fonction mp wp_tiny_mce est maintenant privée. Pour le dernier wordpress vous voulez utiliser 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);
 

pour plus d'instructions, il suffit de parcourir la documentation dans wordpress

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

Answer 5

À la suite de guides d' ici et là - bas (trouvé grâce à ce ), voici comment j'ai réussi à faire fonctionner quelque chose sur 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>