同一页面中的两个tinyMCE编辑器

时间:2011-03-08 作者:Asaf Chertkoff

I\'ve used this method to enter the first editor:

关于函数。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\\u editor”时,它被聚集起来了。

完成此任务的最佳方法是什么?你知道吗?忘记“最好”。。。给我“工作方法”,就可以。。。

1 个回复
最合适的回答,由SO网友:Asaf Chertkoff 整理而成

这当然不容易,但它来了。

(1) 我无法让媒体按钮以任何其他方式与编辑器一起工作,同时将媒体按钮从其中一个编辑器中排除,但不是从所有编辑器中排除,因此我必须使用the\\u editor();

JS在使用_editor()实现tinyMCE的多实例时发生冲突;在尝试实现更多功能时,请使用\\u editor();您将看到;“HTML”;和;“视觉”;选项卡相互冲突,虽然我没有深入了解JS,但我认为原因是使用了ID选择器;edButtonHTML“按钮”;和;edButtonPreview“编辑按钮预览”;按钮。

在我的情况下,我并不介意破解核心,所以我只是删除了wp includes/general模板中的。php 1828-1831行之间的内容:

<div id="quicktags"><?php
wp_print_scripts( \'quicktags\' ); ?>
<script type="text/javascript"> edToolbar()</script>
</div>
(2)并隐藏;edButtonHTML“按钮”;和;edButtonPreview“编辑按钮预览”;功能中的按钮。php(这个恼人的WYSIWYG不允许我向您展示整个“风格”函数snipt,但您得到了图片:

edButtonPreview{显示:无}

edButtonHTML{显示:无}

(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>
问题是,当您没有通过单击来关注编辑器时,媒体按钮仅作用于最后一个编辑器。解决这个问题的魔法是添加一个Jquery监听器,该监听器使用tinyMCE API在悬停每个编辑器时关注它们。“的第一个参数”;蒂尼姆斯。execInstanceCommand“;是编辑器的ID,也就是您在\\u 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中声明bug吗?我从来没有这样做过,我认为这是一个bug,因为它不会让wordpress开发人员使用一个以上的tinyMCE编辑器,否则。。。除非我错过了什么。

结束

相关推荐

如何在tinyMCE工具栏中添加自定义按钮?

我想在“添加新帖子”屏幕的tinyMCE工具栏上添加一个自定义按钮,单击该按钮后,将在新帖子中插入文本。我已尝试使用此代码(从http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php):wp_admin_css(\'thickbox\'); wp_print_scripts(\'jquery-ui-core\'); wp_print_scripts(\'jquery-ui-tabs\'); wp_print_scrip