web-dev-qa-db-fra.com

Existe-t-il un moyen d'obtenir un nombre N 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 mise en page à 2 colonnes, je voulais avoir un éditeur pour une colonne et un autre éditeur pour l'autre.

custom-post-typeswysiwyg
27
Paul Sheldrake

Supposons que votre type de message personnalisé s'appelle Properties, vous ajouteriez alors une boîte pour contenir votre éditeur supplémentaire tinyMCE à l'aide d'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-2 est l'identifiant que la méta-boîte aura appliqué, Second Column est le titre que la méta-boîte aura, second_column_box est la fonction qui imprimera le code HTML pour la méta-boîte, properties est notre type de publication personnalisé, normal est le l'emplacement de la boîte méta et high spécifie qu'il doit apparaître aussi haut que possible dans la page. (Habituellement en dessous de l'éditeur tinyMCE par défaut).

Ensuite, en prenant comme exemple le plus élémentaire, vous devez associer l’éditeur tinyMCE à une zone de texte. Nous devons encore définir notre fonction second_column_box qui imprimera le code HTML pour la méta-boîte, c’est donc un endroit aussi propice que celui-ci:

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 trop résoudre. L'éditeur tinyMCE sera imbriqué dans une metabox, ce qui pourrait ne pas être idéal, et il ne comportera pas la possibilité de basculer entre les modes d'édition HTML et Visuel, ainsi que les commandes d'insertion de média dont dispose l'éditeur de publication normal. Le changement de mode semble être défini comme une fonction dont le premier argument est l’ID, mais il semble aussi qu’il soit également codé dans le script wp-tinymce. Il est possible d'utiliser les fonctions intégrées de tinyMCE à cette fin, mais cela modifie la zone de texte entre tinyMCE complet et une zone de texte de base, sans aucun des boutons d'insertion HTML WP.

20
nobody

D'abord: Grand merci à @Thomas McDonald pour sa réponse ; J'avais besoin de comprendre exactement la même question que celle posée par (Paul Sheldrake}} et le code de Thomas m'a permis de démarrer dans la bonne direction.

Malheureusement, je me suis retrouvé bloqué parce que je devais changer la disposition par défaut pour une disposition plus simple et plus petite, car je devais utiliser TinyMCE dans un métabox latéral. Je cherchais (pratiquement) une solution partout et en particulier sur le MoxieCode TinyMCE Wiki et TinyMCE Tips & How To Forum et je n’ai rien trouvé! 1 Tout ce que j'ai trouvé explique comment définir theme, width, height, etc. à l'aide de tinyMCE.init({...}), mais apparemment, vous ne pouvez pas l'utiliser lorsque vous utilisez tinyMCE.execCommand("mceAddControl").

J'étais stupéfait lorsque j'ai rencontré l'article plusieurs occurrences de TinyMCE 3 sur une seule page de Hamilton Chua , et il a réussi! Sa solution consistait à assigner tinyMCE.settings avant 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;

La partie triste est que ce n’était vraiment pas difficile, mais cela n’a été documenté nulle part ailleurs. C'est étonnant de constater que presque personne d'autre n'a connu ce problème.

Quoi qu'il en soit, le code ci-dessus a généré le deuxième TinyMCE suivant dans le format/la présentation dont mon client avait besoin:

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(source: mikeschinkel.com )

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

P.S.Si vous faites quelque chose de légèrement incorrect, TinyMCE risque de ne pas s'afficher du tout. Par exemple, dans mon cas, j’utilise theme: "simple" au début, je n’ai rien reçu et il m’a fallu plus d’une heure pour comprendre que je devais simplement utiliser theme: "advanced". Donc, si vous pensez que TinyMCE ne fonctionne pas pour vous, essayez de changer les choses, vous rencontrez peut-être un problème similaire. (BTW, je n'ai pas encore essayé d'autres thèmes, ni exploré ce qui est disponible; si vous trouvez d'autres thèmes qui fonctionnent, laissez 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 suis généralement trouver la déception!

18
MikeSchinkel

Puisque j'ai trouvé cet article comme premier résultat dans Google, je voulais seulement dire que WP propose désormais une fonction permettant de gérer ce type de tâche.

Dans la fonction add_meta_box, ajoutez le code suivant ->

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

Où que vous vouliez ajouter l'éditeur TinyMCE

Référence: wp_editor

1
ejhost

Je l'ai 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>
0
Markus René Einicher

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

0
kevtrout