web-dev-qa-db-fra.com

Ajout de plusieurs éditeurs WYSIWYG à un type de publication personnalisé

J'ai créé un type d'article personnalisé et trouvé un bon code qui me permet d'ajouter un éditeur WYSIWYG. Je n'ai aucun problème à ce que cet éditeur apparaisse dans mon backend de type post. Mais je ne sais pas comment ajouter un autre éditeur et afficher le contenu du deuxième dans le même fichier single.php dans lequel je voudrais afficher le contenu du premier. Laissez-moi écrire les codes en premier:

Voici le code d'implémentation permettant d'ajouter un éditeur WYSIWYG (functions.php):

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important for CSS that this is different
define('WYSIWYG_META_KEY', 'extra-content');

add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
add_meta_box(WYSIWYG_META_BOX_ID, __('Display title', 'wysiwyg'), 'wysiwyg_render_meta_box', 'artists');
}

function wysiwyg_render_meta_box(){

global $post;

$meta_box_id = WYSIWYG_META_BOX_ID;
$editor_id = WYSIWYG_EDITOR_ID;

//Add CSS & jQuery goodness to make this work like the original WYSIWYG
echo "
        <style type='text/css'>
                #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                #$editor_id{width:100%;}
                #$meta_box_id #editorcontainer{background:#fff !important;}
                #$meta_box_id #$editor_id_fullscreen{display:none;}
        </style>

        <script type='text/javascript'>
                jQuery(function($){
                        $('#$meta_box_id #editor-toolbar > a').click(function(){
                                $('#$meta_box_id #editor-toolbar > a').removeClass('active');
                                $(this).addClass('active');
                        });

                        if($('#$meta_box_id #edButtonPreview').hasClass('active')){
                                $('#$meta_box_id #ed_toolbar').hide();
                        }

                        $('#$meta_box_id #edButtonPreview').click(function(){
                                $('#$meta_box_id #ed_toolbar').hide();
                        });

                        $('#$meta_box_id #edButtonHTML').click(function(){
                                $('#$meta_box_id #ed_toolbar').show();
                        });

        //Tell the uploader to insert content into the correct WYSIWYG editor
        $('#media-buttons a').bind('click', function(){
            var customEditor = $(this).parents('#$meta_box_id');
            if(customEditor.length > 0){
                edCanvas = document.getElementById('$editor_id');
            }
            else{
                edCanvas = document.getElementById('content');
            }
        });
                });
        </script>
";

//Create The Editor
$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
the_editor($content, $editor_id);

//Clear The Room!
echo "<div style='clear:both; display:block;'></div>";
}

add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){

$editor_id = WYSIWYG_EDITOR_ID;
$meta_key = WYSIWYG_META_KEY;

if(isset($_REQUEST[$editor_id]))
        update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);

}

Voici le code d'affichage pour afficher le contenu (single-cpt.php):

<?php $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true); ?>
<p><?php echo $content; ?></p>

Mon problème: Dans le code d'affichage, nous avons "WSIWYG_META_KEY" qui est une constante. Cela signifie donc que je ne peux pas utiliser ce code une deuxième fois dans le même fichier single.php afin d'afficher un autre contenu d'un autre deuxième éditeur que je mettrais en œuvre dans le fichier functions.php. Quelqu'un d’entre vous voit-il une solution permettant à deux d’ajouter deux de ces éditeurs et d’en afficher séparément le contenu dans mon fichier single.php?

custom-post-typeswysiwyg
1
Kent Miller

Comment afficher une métabox et comment enregistrer/insérer des valeurs dans des zones de texte dépasse le cadre de cette question, mais vous avez demandé comment créer une zone de texte enrichi, comme le contenu principal.

Pour ce faire, utilisez la fonction wp_editor. WordPress prendra votre identifiant, votre contenu et certaines options, et créera une nouvelle instance de TinyMCE avec des boutons, etc.

$settings = array( 'media_buttons' => false );
$content = get_post_meta( $post_id, 'kents-secondary-content-thing', true );
wp_editor( $content, 'kents-second-editor', $settings );

wp_editor crachera le html et les css/js nécessaires pour afficher ce que vous voulez.

Notez que cela ne fonctionnera de manière fiable que dans la zone d'administration. L'utilisation frontend de wp_editor nécessitera quelques étapes supplémentaires (une bonne idée pour une nouvelle question!).

Notez également que wp_editor affichera une zone d’éditeur de contenu, mais ne sauvegardera/validera pas ce contenu, vous devez toujours le faire.

Un sidenote:

Votre code utilise the_editor, une fonction que wp_editor a remplacée. Lorsque vous trouvez du code sur un site Web, lisez-le toujours et recherchez la documentation. Sinon, comment allez-vous intercepter l'appel de sendAllMyMoneyTo("0723-323...etc");

Si vous aviez fait cela, vous l'auriez vu et vous auriez économisé beaucoup de temps:

enter image description here

Activer WP_DEBUG et consulter votre journal php vous auraient également indiqué que the_editor était une fonction obsolète. Regardez-les, ils vous éviteront de nombreux maux de tête

3
Tom J Nowell