通过JS实例化TinyMCE(而不是通过PHP/wp_EDITOR)

时间:2012-07-26 作者:Tom J Nowell

加载页面后,如何创建TinyMCE编辑器?

放置wp_editor 调用AJAX请求,然后显示该请求,可以得到以下结果:

enter image description here

视觉和文本选项卡没有功能,没有工具栏,没有活动的TinyMCE实例,只有html标记。我需要实例化TinyMCE的JS组件,但是如何实例化呢?

我还尝试在AJAX响应中调用PHP_WP_Editors::editor_js();, 我可以使用console在控制台中看到响应。log,我在那里看到了JS脚本,但它没有插入到DOM中,也从未执行过

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

Updated for TinyMCE 4

我取得了一些进展

在隐藏div的初始页面加载中加载wp\\u编辑器,然后执行AJAX调用以获取编辑器标记。

在PHP中,需要检索通过wp\\U编辑器调用创建的编辑器的ID。不幸的是,\\u WP\\u Editors类上的变量是私有的,但我们可以通过使用过滤器来解决这个问题。为此,我们首先在输出缓冲区内调用editor\\u js挂钩。它将尝试生成所需的设置并输出所需的JS,尽管此JS在通过AJAX发回并插入时不起作用。

在此调用结束时,\\u WP\\u Editors类通过一个过滤器传递mcesettings数组,我们将使用该过滤器创建一个副本,以便从中提取编辑器ID:

add_action( \'after_wp_tiny_mce\', array( $this, \'steal_away_mcesettings\' ) );

function steal_away_mcesettings( $mcesettings ) {
    $this->mcesettings = $mcesettings;
}
因此,在添加此过滤器后,我们调用editor\\u js函数:

ob_start();
_WP_Editors::editor_js();
ob_end_clean(); 
现在,我们可以使用$mcesettings副本填写ID列表:

$ids = array();

foreach ( $this->mcesettings as $editor_id => $init ) {
    $ids[] = $editor_id;
}
ids数组现在可以在AJAX响应中与html一起发回。

进入浏览器后,我们可以将html插入页面,然后使用我们的编辑器ID,我们可以像这样实例化TinyMCE实例:

function tinyMCE_bulk_init( editor_ids ) {
    var init, ed, qt, first_init, DOM, el, i;

    if ( typeof(tinymce) == \'object\' ) {

        var editor;
        for ( e in tinyMCEPreInit.mceInit ) {
            editor = e;
            break;
        }
        for ( i in editor_ids ) {
            var ed_id = editor_ids[i];
            tinyMCEPreInit.mceInit[ed_id] = tinyMCEPreInit.mceInit[editor];
            tinyMCEPreInit.mceInit[ed_id][\'elements\'] = ed_id;
            tinyMCEPreInit.mceInit[ed_id][\'body_class\'] = ed_id;
            tinyMCEPreInit.mceInit[ed_id][\'succesful\'] =  false;
        }

        for ( ed in tinyMCEPreInit.mceInit ) {
            // check if there is an adjacent span with the class mceEditor
            if ( ! jQuery(\'#\'+ed).next().hasClass(\'mceEditor\') ) {
                init = tinyMCEPreInit.mceInit[ed];
                try {
                    tinymce.init(init);
                    tinymce.execCommand( \'mceAddEditor\', true, ed_id );
                } catch(e){
                    console.log(\'failed\');
                    console.log( e );
                }
            }
        }

    }
}
因为我们自己无法生成与WordPress样式匹配的必要TinyMCE设置,所以我们从初始页面加载中创建的实例中窃取它们,并进行复制。然后,我们修改副本以使用正确的元素ID,并像往常一样继续,检查元素是否还没有实例。

enter image description here

问题纯文本与视觉内容的选项卡不起作用,在纯文本视图上没有快速标记初始TinyMCE实例的额外重量,没有媒体上载按钮,在AJAX请求中添加2个或更多TinyMCE实例会导致一个工作实例,而其他实例会被破坏。我不知道为什么会出现这种情况,但是2个AJAX请求(每个请求有1个实例)会提供2个工作实例
  • 可以修改JS,使其不修改TinyMCEPreInit结构,并将副本直接传递给初始化器,从而在过程中删除DOM遍历

  • 结束

    相关推荐

    如何在管理员端包含使用jQuery的JavaScript

    我试试这个:add_action(\'admin_print_scripts\', \'custom_admin_scripts\' ); function custom_admin_scripts() { echo \'<script type=\"text/javascript\" src=\"\' . get_bloginfo(\'stylesheet_directory\') . /admin-scripts.js\"></script>\'