Existe-t-il un moyen d'obtenir N nombre d'éditeurs WYSIWYG dans un type de publication personnalisé?

Est-il possible d'avoir plusieurs éditeurs WYSIWYG pour un type de publication personnalisé? Par exemple, si j'avais une disposition à 2 colonnes, je voulais avoir un éditeur pour une colonne et un autre éditeur pour l'autre.

Supposons que votre type de publication personnalisé ait été appelé Properties, vous ajouteriez la case pour contenir votre éditeur tinyMCE supplémentaire en utilisant un code similaire à celui-ci:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2est l'ID que la meta box lui aura appliqué, Second Columnest le titre que la meta box aura, second_column_boxest la fonction qui imprimera le code HTML de la meta box, propertiesest notre type de message personnalisé, normalest l'emplacement de la meta box et highspécifie qu'il doit être affiché le plus haut possible dans la page. (Habituellement en dessous de l'éditeur tinyMCE par défaut).

Ensuite, en prenant cela comme l'exemple le plus élémentaire, vous devez attacher l'éditeur tinyMCE à une zone de texte. Nous devons encore définir notre second_column_boxfonction qui imprimera le code HTML de la méta-boîte, c'est donc le meilleur endroit pour le faire:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Il y a quelques problèmes que je ne sais pas comment résoudre. L'éditeur tinyMCE sera imbriqué dans une métaboxe, ce qui n'est peut-être pas idéal, et il ne proposera pas la possibilité de basculer entre les modes d'édition HTML et visuelle, ainsi que les commandes d'insertion de médias que possède l'éditeur de publication normal. La commutation des modes semble être définie comme une fonction dont le premier argument est l'ID, mais elle semble également codée dans le script wp-tinymce. Il est possible d'utiliser les fonctions intégrées de tinyMCE pour ce faire, mais cela change la zone de texte entre full tinyMCE et une zone de texte de base, sans aucun des boutons d'insertion WP HTML.

Premièrement: un grand merci à @Thomas McDonald pour sa réponse ; J'avais besoin de comprendre exactement la même question que @Paul Sheldrake a posé et le code de Thomas m'a fait démarrer dans la bonne direction.

Malheureusement, je suis resté coincé parce que je devais changer la disposition par défaut en une disposition plus simple et plus petite car j'avais besoin d'utiliser le TinyMCE dans une metabox latérale. J'ai cherché pratiquement partout une solution et en particulier sur le wiki MoxieCode TinyMCE et le forum TinyMCE Tips & How To et je n'ai rien trouvé! ¹ Tout ce que j'ai trouvé expliqué comment configurer theme, width, height, etc. , en utilisant , tinyMCE.init({...})mais apparemment vous ne pouvez pas utiliser que lorsque vous utilisez tinyMCE.execCommand("mceAddControl").

J'étais perplexe lorsque j'ai parcouru l'article plusieurs instances de TinyMCE 3 sur une page par Hamilton Chua , et il l'a cloué! Sa solution a été d'affecter tinyMCE.settingsavant d'appeler tinyMCE.execCommand("mceAddControl"), par exemple:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

Le plus triste, c'est que ce n'était vraiment pas difficile, mais cela n'a été documenté nulle part ailleurs. C'est incroyable de découvrir que presque personne d'autre n'a rencontré ce problème.

Donc, de toute façon, le code ci-dessus a généré le deuxième TinyMCE suivant exactement au format / mise en page dont mon client avait besoin:

_{(source: mikeschinkel.com )}

Donc, si vous utilisez le code @Thomas McDonald ci-dessus, vous trouvez que vous avez besoin de modifier la mise en page, assurez-vous de consulter l'article génial de Hamilton Chua (merci Ham!) :

• Plusieurs instances de TinyMCE 3 sur une seule page

PS Si vous faites quelque chose de mal, même le TinyMCE risque de ne pas s'afficher du tout. Par exemple, dans mon cas, j'utilisetheme: "simple"au début et je n'ai rien obtenu et il m'a fallu plus d'une heure pour réaliser que je devais juste l'utilisertheme: "advanced". Donc, si vous trouvez que TinyMCE ne fonctionne pas pour vous, assurez-vous d'essayer de changer les choses, vous pouvez avoir un problème similaire. (BTW, je n'ai pas essayé d'autres thèmes ni exploré quoi d'autre est disponible; si vous trouvez d'autres thèmes qui fonctionnent, veuillez laisser un commentaire ci-dessous.)

note de bas de page

1 : Très frustrant! Après un peu plus d'un mois avec WordPress Answer, je m'attends maintenant à trouver des réponses à toutes mes questions avec le même niveau de qualité qu'ici, et ailleurs, je trouve généralement la déception!

Depuis que j'ai trouvé cet article comme premier résultat sur Google, je voulais juste dire que WP propose désormais une fonction pour gérer ce genre de tâche.

Dans la add_meta_boxfonction, ajoutez le code suivant ->

wp_editor( $content, $editor_id, $settings = array() );

Partout où vous souhaitez ajouter l'éditeur TinyMCE

Référence: wp_editor

L'éditeur par défaut, tinymce, est chargé par une fonction dans wp-admin / includes / post.php appelée wp_tiny_mce (); Regardez dans la source à la ligne 1350. Il y a un tableau de paramètres à la ligne 1478. L'une des options désigne apparemment le sélecteur de zone de texte auquel appliquer l'éditeur javascript. Je lisais ce post de Keighl sur son blog qui m'y dirigeait. Lisez l'article, et il y a peut-être un moyen d'appeler wp_tiny_mce () dans un plugin de section admin et de l'appliquer à une deuxième zone de texte que vous créez.

Je l'ai eu juste en ajoutant "theEditor" comme attribut de classe à une zone de texte:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>