Appelez TinyMCE dans un plugin WordPress
Existe-t-il un moyen d'ajouter TinyMCE dans mon propre plugin WordPress?
J'ai une zone de texte dans mon script back-end et je souhaite faire de cette zone un champ modifiable TinyMCE WYSIWYG. Y-a-t-il un moyen de faire ça?
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 javascript
f is undefined
Capture d'écran de Firebug: 
Cela n'a pas fonctionné non plus:
<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
C'est beaucoup plus facile à faire dans WordPress 3.3 en utilisant la fonction wp_editor () .
Je travaille sur un plugin qui ajoutera une instance TinyMCE à une page d'options de thème. Voici à quoi ça ressemble:
// Add TinyMCE visual editor
wp_editor( $content, $id );
Où $ content est le contenu stocké et $ id est le nom de le champ. Des options peuvent également être passées pour personnaliser la fonctionnalité TinyMCE, consultez le WordPress Codex pour plus de détails.
Camden a déjà répondu à cela, mais au cas où quelqu'un aurait besoin du code complet ... Assurez-vous de connecter admin_head, le raccordement à admin_enqueue_scripts entraînera son chargement avant d'autres scripts, tels que jQuery, donc cela ne fonctionnera 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>
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'identifiant "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);
}
?>
La minuscule fonction mce wp_tiny_mce est désormais obsolète. Pour les derniers 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 de wordpress
En suivant les guides de ici et là (trouvés grâce à this ), 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>
J'ai eu un problème similaire et class="theEditor" ne m'a pas aidé non plus (au début). J'utilisais un type de publication personnalisé qui n'incluait pas l'éditeur par défaut (c'est-à-dire que l'argument supports n'incluait pas 'editor').
Cela signifiait WordPress n'incluait pas le code TinyMCE. Une fois que j'ai ajouté
add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );
à mon functions.php (basé sur le code dans le the_editor fonction dans general-template.php) cela a bien fonctionné (avec class="theEditor").
Testé et travaillant sur wordpress 3.3.1
ajouter aux fonctions ou au fichier de plugin.
<?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');
}
?>
pour l'ajout de nouveau contenu ..
<?php the_editor($id='content');?>
pour éditer mon contenu
<?php the_editor($mySavedContent); ?>
cela comprendra toute la rage des scripts/css et du code nécessaires pour produire une zone de texte tinyMCE dans vos fichiers de plugin ou de modèle ..
j'espère que cela t'aides..
M
J'ai eu pas mal de problèmes avec ça. Après avoir cherché toute la journée et essayé des dizaines d'exemples de code, je n'ai pas pu obtenir les options de thème Wordpress pour enregistrer les valeurs MCE dans la base de données. J'ai tout essayé, les réponses jQuery, les champs cachés, etc., etc.) Rien de tout cela ne marcherait pour moi, probablement parce que je manquais une étape quelque part.
Enfin j'ai trouvé cette page: http://wptheming.com/options-framework-theme/
Téléchargez depuis Github et installez comme indiqué (facile). Une fois installé, le dernier onglet de vos options de thème dispose d'un éditeur MCE. Entrez quelques paragraphes de test. Ouvrez maintenant le fichier index.php dans le téléchargement pour voir les exemples sur la façon d'inclure chaque chose dans votre page. Par exemple, j'ouvre footer.php et j'ajoute un peu de code.
La seule modification que je devais faire était:
<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>
La fonction wpautop () de Wordpress ajoute des balises de paragraphe, car elles ne sont jamais enregistrées dans la base de données wp. J'ai mis ce code dans mon pied de page pour afficher le contenu du MCE.