web-dev-qa-db-ja.com

同じページに2つのtinyMCEエディタ

最初のエディタに入るためにこの方法を使いました：

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";') );

そして、オプションページのセクションでエディタをエコーし​​ます。

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

それは魅力のように働いた。しかし、私がもう一度 "the_editor"を使おうとしたとき、それは大衆化しました。

これを実現するための最善の方法は何ですか？あのね？ 「最高」を忘れて…「働き方」を教えてください。

theme-developmenteditoroptionstinymcewysiwyg
1
Asaf Chertkoff

それは確かに簡単ではありませんでしたが、ここに来ます。

（1）メディアボタンを他の方法でエディタと連動させることはできませんでしたが、いずれかのエディタからはメディアボタンを除外していましたが、すべてのエディタからメディアボタンを除外することはできませんでした。

the_editor（）でtinyMCEのマルチインスタンスを実装している間にJSが競合しています。 the_editor（）をもっと実装しようとしている間。 「HTML」タブと「VISUAL」タブが矛盾していることがわかります。JSの詳細については説明しませんでしたが、原因は「edButtonHTML」と「edButtonPreview」のIDセレクタの使用にあると思います。 "ボタン。

私の場合、私はコアをハックすることを気にしませんでした、それで私はただ削除します、wp-includes/general-template.phpの1828-1831行の間の内容：

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

（2）そして "edButtonHTML"と "edButtonPreview"ボタンをfunctions.phpに隠しました（この迷惑なWYSIWYGはあなたに全体の "<" style ">"関数の断片を見せさせてくれませんでしたが、あなたは絵を見ました：

edButtonPreview {display：none}

edButtonHTML {display：none}

（3）そして最後のパンチとして、ここでも私達はセレクターとしてIDを使用しているのでメディアボタンも衝突しています：

<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>

問題は、クリックでエディタに集中していない場合、メディアボタンは最後のエディタにのみ作用していることです。この問題を解決するための魔法は、tinyMCE APIを使用するJqueryリスナーを追加することです。 "tinyMCE.execInstanceCommand"の最初の引数はエディタのID、AKAはthe_editor（）関数で使用したIDです。

<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"); 
        });
    });

それでおしまい。どうなるか教えてください。 TRACでバグを宣言する方法を知っている人はいますか？ Wordpressの開発者が1つ以上のtinyMCEエディタを使うことはできないので、私はそれをやったことがないし、これはバグだと思う。

2
Asaf Chertkoff