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

27

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.

Paul Sheldrake
la source
De quel type de configuration WYSIWYG avez-vous besoin? Le panneau complet incl. téléchargement d'images, mode plein écran, etc.?
hakre
Bueltge a un bel article qui montre comment cela peut être fait: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre
J'ai besoin d'une réponse exacte à cette question pour un projet client. Merci d'avoir posé la question!
MikeSchinkel
MikeSchinkel - Je suis nouveau sur WordPress; où dois-je mettre le code que vous avez publié?

Réponses:

21

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.

personne
la source
"Meta_boxen"? Impressionnant! Je pensais que j'étais le seul. Je vais essayer votre solution dans un petit moment.
mfields
La solution de Thomas McDonald ne fonctionne pas pour moi en 3.1 - existe-t-il un moyen en 3.1 de le faire?
19

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é! 1 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:

Plusieurs zones de texte TinyMCE dans l'éditeur d'administration WordPress 3.0
(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!) :

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!

MikeSchinkel
la source
Mike, vous manquez un égal après $scriptet il n'y a pas non plus de fermeture pour votre hérédoc, c'est-à-dire. EOT;. Mis à part les petites erreurs, c'est un bon exemple de travail ..;)
t31os
@ t31os - Merci de m'avoir prévenu. Je ne sais pas comment je les ai manqués; J'ai l'habitude de tester puis de copier mes réponses à partir de mon code de travail. Allez comprendre!
MikeSchinkel
en utilisant cette solution, l'éditeur visuel normal a également été défini pour SimpleLayout en 3.1.
mfields
@mfields - Bummer que 3.1 a cassé tant de choses. :-(
MikeSchinkel
Je voulais attirer votre attention sur cet article, car il peut clarifier certaines choses: dannyvankooten.com/450/…
marfarma
2

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

ejhost
la source
1
Les réponses devraient être plus que de simples liens . Ils devraient en fait être une réponse plutôt qu'un itinéraire où quelqu'un trouvera peut - être une réponse. Aidez-nous à prévenir la pourriture des liens, modifiez votre réponse et fournissez les informations nécessaires qui aideront le PO ainsi que les visiteurs ultérieurs à résoudre leur problème.
kaiser
0

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.

kevtrout
la source
0

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>
Markus René Einicher
la source