web-dev-qa-db-fra.com

TinyMCE avec des boutons personnalisés sur une méta-boîte

Tout d'abord, permettez-moi de m'excuser - ma quatrième question de la semaine où je suis ici! Vous avez tous été très serviables, c'est pourquoi je reviens sans cesse.

J'essaie de créer un type d'article personnalisé qui n'utilise pas "l'éditeur". Il y a beaucoup de champs de saisie sur la page et la plupart d'entre eux nécessiteront un éditeur TinyMCE personnalisé.

J'ai des méta-boîtes avec textareas. J'ai essayé le code suivant:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#etymology").addClass("mceEditor");
        if ( typeof( tinyMCE ) == "object" &&
        typeof( tinyMCE.execCommand ) == "function" ) {
            tinyMCE.execCommand("mceAddControl", false, "etymology");
        }
    });
</script>

avec...

    if (function_exists('wp_tiny_mce')) {

        add_filter('teeny_mce_before_init', create_function('$a', '
            $a["theme"] = "advanced";
            $a["skin"] = "wp_theme";
            $a["height"] = "75";
            $a["theme_advanced_buttons1"] = "bold, italic, pastetext, pasteword,
                bullist, numlist, link, unlink, outdent, indent, charmap, removeformat, spellchecker, fullscreen";

            return $a;'));

        wp_tiny_mce(true);
    }

Ils ne semblent pas travailler ensemble. L'éditeur TinyMCE apparaît sur le bon élément, mais il ne s'agit que de l'éditeur par défaut WP, et non des paramètres que j'ai essayé de mettre en œuvre.

Donc, mes trois questions sont ...

Question 1 Lors de l'utilisation de méta-boîtes pour des types de publication personnalisés, quel est le meilleur moyen (de mon mieux, probablement le plus flexible et intégré et le moins "hacky") de ajouter un éditeur TinyMCE personnalisé à plusieurs éléments?

Question 2 Suite de la question 1 ... Comment puis-je ajouter des boutons personnalisés à une telle configuration?

Question 3 Est-il possible de modifier la hauteur minimale de l'éditeur TinyMCE? Il semble être limité à 100px.

Mes recherches et mes tentatives pour faire en sorte que ce travail semble indiquer que les fonctions intégrées de TinyMCE de WordPress ne fonctionneront pas. S’il est préférable que ce soit entièrement sur mesure, c’est-à-dire annuler l’enregistrement des scripts tinyMCE existants et enregistrer le mien? Si tel est le cas, est-il possible de le faire uniquement sur mes pages de type publication personnalisée?

Merci d'avance, excuses pour l'essai!

MAJOR EDIT - QUESTIONS 1 & 2 RÉSOLUES OK, grâce au message de Martin (et au code de Mike!), J'ai réussi à configurer plusieurs zones de texte avec des boutons personnalisés. :

function meta_genus_species() {
    global $post;

    $genus = get_post_custom_values( 'genus', $post->ID );
    $species = get_post_custom_values( 'species', $post->ID );
    $etymology = get_post_custom_values( 'etymology', $post->ID );
    $family = get_post_custom_values( 'family', $post->ID );
    $common_names = get_post_custom_values( 'common_names', $post->ID );

    if (!isset($id)) { $id = "etymology"; }
    if (!isset($temp_min)) { $temp_min = plugins_url('images/temp_max.png' , __FILE__); }
    if (!isset($temp_max)) { $temp_max = plugins_url('images/temp_min.png' , __FILE__); }
    if (!isset($pH_min)) { $pH_min = plugins_url('images/pH_max.png' , __FILE__); }
    if (!isset($pH_max)) { $pH_max = plugins_url('images/pH_max.png' , __FILE__); }

$tinyMCE = <<<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:"75",
                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,|,temp_min,temp_max,pH_min,pH_max",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                setup : function(ed) {
                    ed.addButton('temp_min', {
                        title : 'Temperature: Minimum',
                        image : '{$temp_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_min]');
                        }
                    }),
                    ed.addShortcut("ctrl+1", "temp_min", "temp_min"),
                    ed.addButton('temp_max', {
                        title : 'Temperature: Maximum',
                        image : '{$temp_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_max]');
                        }
                    }),
                    ed.addButton('pH_min', {
                        title : 'pH: Minimum',
                        image : '{$pH_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_min]');
                        }
                    }),
                    ed.addButton('pH_max', {
                        title : 'pH: Maximum',
                        image : '{$pH_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_max]');
                        }
                    });
                }
              };
              tinyMCE.execCommand("mceAddControl", true, "{$id}");
            }
        });
    </script>
EOT;
    echo $tinyMCE;

    ?>
<div class="meta_control normal">
    <p>Description of taxonomy.</p>
    <div class="box">
        <label>Genus</label>
        <p>
            <input name="genus" class="text" value="<?php if(isset($genus[0])) { echo esc_attr( $genus[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <div class="box">
        <label>Species</label>
        <p>
            <input name="species" class="text"  value="<?php if(isset($species[0])) { echo esc_attr( $species[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <p>
        <label>Etymology</label>
        <textarea cols="50" rows="5" name="etymology" id="etymology"><?php if(isset($etymology[0])) { echo esc_attr( $etymology[0] ); } ?></textarea>
        <span>Description</span>
    </p>
    <p>
        <label>Family</label>
        <input name="family" class="text"  value="<?php if(isset($family[0])) { echo esc_attr( $family[0] ); } ?>" />
        <span>Description</span>
    </p>
    <p>
        <label>Common Names</label>
        <input name="common_names" class="text"  value="<?php if(isset($common_names[0])) { echo esc_attr( $common_names[0] ); } ?>" />
        <span>Description</span>
    </p>
</div>
    <?php

}

function meta_authored() {
    global $post;

    $species_author = get_post_custom_values( 'species_author', $post->ID );
    $year_described = get_post_custom_values( 'year_described', $post->ID );

    ?>
<div class="meta_control side">
    <label>Species Author</label>
    <p>
        <input name="species_author" class="text" value="<?php if(isset($species_author[0])) { echo esc_attr( $species_author[0] ); } ?>" />
    </p>
    <label>Year Described</label>
    <p>
        <input name="year_described" class="text" value="<?php if(isset($year_described[0])) { echo esc_attr( $year_described[0] ); } ?>" />
    </p>
</div>
    <?php
}

Je suis absolument sur la lune! Je travaille SO pour trouver cette information. Merci beaucoup Martin :)

Juste la question 3 pour répondre maintenant!

metaboxtinymceplugin-tinymce
2
dunc

cela irait-il dans la bonne direction? .. Voir le code de Mikes

1
MartinJJ