web-dev-qa-db-fra.com

deux éditeurs tinyMCE dans la même page

J'ai utilisé cette méthode pour entrer dans le premier éditeur:

sur functions.php:

function add_admin_theme_styles() {
    wp_enqueue_style('thickbox');
}
    add_action('admin_print_styles', 'add_admin_theme_styles');
        wp_enqueue_script('jquery');
        wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('Word-count');
    wp_enqueue_script('post');
    wp_enqueue_script('editor');

function fb_change_mce_buttons( $initArray ) {

        $initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
        $initArray['theme_advanced_disable'] = 'strikethrough';
        $initArray['theme_advanced_buttons1'] = 'bold,italic,underline,bullist,justifyleft,justifycenter,justifyright,justifyfull,link,unlink';
        $initArray['theme_advanced_buttons2'] = 'fontselect, fontsizeselect,forecolor,backcolor';
        $initArray['width'] = '320px';
        $initArray['theme_advanced_resizing'] = 'false';

        return $initArray;
     }

     add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

     add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

et en faisant écho à l'éditeur, dans la section page d'option:

<?php the_editor($options['MoobAboutText'], "MoobAboutText", "", true); ?>

ça a marché comme sur des roulettes. mais quand j'ai essayé d'utiliser "the_editor" une fois de plus, il a été massé.

Quelle est la meilleure méthode pour y arriver? vous savez quoi? oubliez "meilleur" ... donnez-moi "méthode de travail", et ça ira ...

theme-developmenteditoroptionstinymcewysiwyg
1
Asaf Chertkoff

Ce n'était certes pas facile mais ça vient ici.

(1) Je ne pouvais pas faire en sorte que le bouton multimédia fonctionne d'une autre manière avec les éditeurs, tout en excluant les boutons multimédia de l'un des éditeurs, mais pas de tous les autres. J'ai donc dû utiliser the_editor ();

le JS est en conflit lors de la mise en œuvre de plusieurs instances de tinyMCE avec the_editor (); en essayant d'implémenter plus celui the theeditor (); vous verrez que les onglets "HTML" et "VISUAL" sont en conflit et bien que je ne sois pas plongé profondément dans le JS, je suis convaincu que la cause en est l'utilisation d'un sélecteur d'identifiant pour "edButtonHTML" et "edButtonPreview " boutons.

dans mon cas, cela ne me dérangeait pas de pirater le noyau, donc je viens de supprimer, dans wp-includes/general-template.php, le contenu entre les lignes 1828-1831:

<div id="quicktags"><?php
wp_print_scripts( 'quicktags' ); ?>
<script type="text/javascript"> edToolbar()</script>
</div>

(2) et caché les boutons "edButtonHTML" et "edButtonPreview", dans functions.php (ce WYSIWYG gênant ne me permet pas de vous montrer l'intégralité de la fonction "<" style ">", mais vous avez la photo:

edButtonPreview {display: none}

edButtonHTML {display: none}

(3) Et en guise de frappe finale, les boutons média sont également en conflit car ici, nous utilisons également ID en tant que sélecteurs:

<div id="media-buttons" class="hide-if-no-js">
Upload/Insert 
    <a href="media-upload.php?post_id=0&amp;type=image&amp;TB_iframe=1" id="add_image" class="thickbox" title="Add an Image"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-image.gif?ver=20100531" alt="Add an Image" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=video&amp;TB_iframe=1" id="add_video" class="thickbox" title="Add Video"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-video.gif?ver=20100531" alt="Add Video" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=audio&amp;TB_iframe=1" id="add_audio" class="thickbox" title="Add Audio"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-music.gif?ver=20100531" alt="Add Audio" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;TB_iframe=1" id="add_media" class="thickbox" title="Add Media"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-other.gif?ver=20100531" alt="Add Media" onclick="return false;"></a>       
</div>

Le problème est que lorsque vous ne vous concentrez pas sur l'éditeur par clic, le bouton de média n'agit que sur le dernier éditeur. la magie pour résoudre ce problème consiste à ajouter un écouteur Jquery qui utilise l'API tinyMCE pour se concentrer sur chacun des éditeurs au fur et à mesure que vous les survolez. Le premier argument de "tinyMCE.execInstanceCommand" est l'ID de l'éditeur, AKA l'ID que vous avez utilisé dans les fonctions the_editor ():

<script type="text/javascript">
    jQuery(document).ready(function($) {

        jQuery('#editor-one').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText", "mceFocus"); 
        });

        jQuery('#editor-two').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText2", "mceFocus");
        });

        jQuery('#editor-three').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText3", "mceFocus"); 
        });
    });

C'est tout. dis moi comment ça se passe. sait-on comment déclarer un bogue dans TRAC? Je ne l'ai jamais fait et je pense que c'est un bogue, car il ne laissera pas les développeurs de wordpress utiliser plus d'un éditeur tinyMCE, sinon ... sauf si j'ai raté quelque chose.

2
Asaf Chertkoff