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

26

Existe-t-il un moyen 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 pour l’autre.

    
posée Paul Sheldrake 17.08.2010 - 12:09

5 réponses

20

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 de la méta-boîte, properties est notre type de message personnalisé, normal est l'emplacement de la boîte à méta et high spécifie qu'il doit être affiché aussi haut que possible dans la page. (Généralement en dessous de l'éditeur tinyMCE par défaut).

Ensuite, en prenant l’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 de 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 suis pas sûr de savoir comment surmonter. 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 Visual, ainsi que les commandes d'insertion de média que l'éditeur de publication normale a. 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. Pour ce faire, il est possible d’utiliser les fonctions intégrées de tinyMCE, mais cela modifie la zone de texte comprise entre complète tinyMCE et une zone de base, sans aucun des boutons d’insertion HTML HTML.

    
réponse donnée nobody 17.08.2010 - 13:30
18

D'abord: Un grand merci à @Thomas McDonald pour sa réponse ; Je devais comprendre exactement la même question que @Paul Sheldrake et le code de Thomas m'avaient 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 partout une solution, en particulier sur le Wiki de TinyMCE et Conseils TinyMCE & Comment Forum et 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 utiliser cela lorsque vous utilisez tinyMCE.execCommand("mceAddControl") .

J'étais stupéfait quand j'ai trouvé l'article Plusieurs instances de TinyMCE 3 sur une page par Hamilton Chua , et il l'a cloué! Sa solution consistait à affecter 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;

Ce qui est triste, c’est que ce n’était vraiment pas difficile, mais cela n’a été documenté nulle part ailleurs. C'est incroyable 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:

Donc,sivousutilisezlecode@ThomasMcDonaldci-dessus,vousconstaterezquevousavezbesoindemodifierlamiseenpage,assurez-vousdeconsulterl'articlegénialdeHamiltonChua(merciHam!):

  • Plusieurs instances de TinyMCE 3 sur une page

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 et je n'ai rien eu et cela m'a pris plus d'une heure pour réaliser 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 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 au même niveau de qualité qu'ici, et ailleurs, je suis généralement déçu!

    
réponse donnée MikeSchinkel 12.09.2010 - 10:47
1

Puisque j'ai trouvé cet article comme premier résultat de Google, je voulais simplement 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 souhaitiez ajouter l'éditeur TinyMCE

Référence: wp_editor

    
réponse donnée ejhost 12.10.2014 - 21:49
0

L’éditeur par défaut, tinymce, est chargé par une fonction de wp-admin / includes / post.php appelée wp_tiny_mce (); dans la 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 message 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.

    
réponse donnée kevtrout 17.08.2010 - 13:28
0

Je l'ai eu simplement 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>
    
réponse donnée Markus René Einicher 04.10.2011 - 13:55

Lire d'autres questions sur les étiquettes