如何仅针对特定的短码修改VisualComposer的TinyMCE编辑器

时间:2016-03-11 作者:alexg

我花了很多时间寻找如何为我正在开发的Visual Composer插件修改TinyMCE编辑器的按钮。我的要求是修改显示的按钮,但仅在Visual Composer TinyMCE实例中,并且仅在与我的快捷码对应的编辑器中,以免干扰任何其他插件。

我决定在这里分享解决方案,因为它有些不明显。

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

存在许多问题:

tiny_mce_before_init 过滤器不影响VC为参数实例化的TinyMCE编辑器name == \'content\'type == \'content_html\'. VC在单独的AJAX请求中获取TinyMCE HTML标记。编辑器的实例化不会从tinyMCEPreInit 筛选器影响的内联JavaScript数组。解决方案是引入一个TinyMCE插件,在客户端修改编辑器的设置here). 即使根据the wp_enqueue_script() documentation 通过将依赖项设置为内置的,您可以将插件排队tiny_mce 脚本,这不起作用,因为TinyMCE的加载方式不同。See here 讨论问题和解决方案我首先绑定到tiny_mce_before_init, 但不要修改按钮。我只添加了一个所有编辑器都将运行的插件。

add_filter( \'tiny_mce_before_init\', array( &$this, \'filter_tiny_mce_before_init\' ) );

    public function filter_tiny_mce_before_init( $mceInit ) {
        $mceInit[\'plugins\'] .= \',myplugin\';
        return $mceInit;
    }
然后我创建了以下简短的TinyMCE插件。它首先检查当前的TinyMCE编辑器是否是Visual Composer编辑器,然后使用jQuery确定它所对应的短代码是否以我的插件名称开头。

\'use strict\';
tinymce.PluginManager
            .add( \'myplugin\',
                function(editor, url) {

                    // skip editors that don\'t belong to VC
                    if ( editor.id != \'wpb_tinymce_content\' )
                        return;

                    // skip editors that don\'t belong to my shortcode
                    if ( !jQuery( \'#wpb_tinymce_content\' ).parents(
                        \'[data-vc-shortcode^="myplugin"]\' ).length )
                        return;

                    // these are the only buttons I want
                    editor.settings.toolbar1 = \'bold,italic,underline,strikethrough,link,unlink,spellchecker,wp_fullscreen\';
                    editor.settings.toolbar2 = \'pastetext,removeformat,charmap,undo,redo,wp_help\';

                } );
最后,我确保这个插件是在TinyMCE之后加载的。这很难看,但又是see here 为什么要这样做。

add_action( \'after_wp_tiny_mce\', array( &$this, \'action_after_wp_tiny_mce\' ) );

public function action_after_wp_tiny_mce() {
    printf( 
        \'<script type="text/javascript" src="%s"></script>\', 
        plugins_url( \'assets/scripts/myplugin-tinymce.js\', __FILE__ ) );
}
有效:)