如何在 wordpress 插件中动态加载 tinymce 编辑器？答案

【问题标题】：How do I dynamically load tinymce editors in a wordpress plugin?如何在 wordpress 插件中动态加载 tinymce 编辑器？
【发布时间】：2014-07-19 08:42:06
【问题描述】：

我搜索了很多，找到了很多关于这个问题的答案，但似乎没有一个对我有用。

我正在制作一个 WordPress 插件。当您添加/编辑页面/帖子时，会出现一个带有 2 个按钮的新元框。一种是删除已创建的编辑器，效果很好。另一个允许您通过一些 jquery 和 PHP 创建新的编辑器。这里的问题是 wp_editor 创建的 HTML 正在被创建并添加到页面中，但是 tinymce 从未生效。我知道这可能是因为脚本需要重新启动等，但我遇到的任何解决方案都没有解决这个问题。

这是用于生成编辑器 HTML 的 PHP。

    $blocks = get_post_meta( $post_id, '_mbp-blocks', true );
    $id = sanitize_title( $name );

    $box_html = "";

    if( ! is_array( $blocks ) )
        $blocks = array();

    $blocks[ $id ] = array(
        'name' => $name, 
        'type' => 'editor'
    );

    update_post_meta( $post_id, '_mbp-blocks', $blocks );

    $box_html .= '<div id="block_'.$id.'">';
    $box_html .= '<p><input id="checked_mbp" type="checkbox" name="checked_mbp[]" value="'.$id.'"><strong>' . $name . '</strong></p>';

    ob_start();
    wp_editor( get_post_meta( $post_id, '_mbp-' . $id, true ), 'editor_' . $id );
    $box_html .= ob_get_contents();
    ob_end_clean();

    $box_html .= '</div>';

    $return_array = array("html" => $box_html, "editorid" => $id);

    return json_encode($return_array);

这是使用的 JavaScript，减去我尝试过的任何修复。

    jQuery( function( $ ) {

$('#addblock').click(function(e){
    e.preventDefault();

    var blockname = $("#blockname").val();
    var blockpostid = $("#blockpostid").val();
    $.ajax({
        url: 'http://www.casinovault.com/wp-content/plugins/blockpages/ajax_functions.php',
        type: 'POST',
        dataType: "json",
        data: { 'name': blockname, 'action': 'register', 'post_id': blockpostid },
        success: function(result){

             $('#mbp_blocks').append(result['html']);
        }

     });         

});

$('#deleteblock').click(function(e){
    e.preventDefault();

    var blockpostid = $("#blockpostid").val();

    confirm('Are you sure you want to delete the checked blocks?');

    var checked_mbp = $('#checked_mbp:checked').map(function(i,n) {
        return $(n).val();
    }).get();

    $.ajax({
        url: 'http://www.casinovault.com/wp-content/plugins/blockpages/ajax_functions.php',
        type: 'POST',
        data: { 'action': 'delete', 'delete_mbp[]': checked_mbp, 'post_id': blockpostid },
        success: function(result){
            var checked = result.split(',');
            $.each(checked, function() {
                $('#block_'+this).remove();
            });
        }

     });         

});

});

我一直在尝试通过添加对 ajax 成功的修复来使其正常工作。

【问题讨论】：

标签： jquery wordpress

【解决方案1】：

我的问题有点复杂，因为每当用户单击项目的编辑按钮时，我都必须动态加载表单。

如果您有 id，请使用以下代码。

function editorFix( qtid )
{
    if ( typeof quicktags !== 'undefined' ) {

        try 
        {
            if ( typeof QTags.instances[qtId] !== 'undefined' )
            {
                QTags.instances = {};
                tinymce.execCommand( 'mceRemoveEditor', false, qtId );
            }

            quicktags( tinyMCEPreInit.qtInit[qtId] );

            if ( ! window.wpActiveEditor ) {
                window.wpActiveEditor = qtId;
            }

            switchEditors.go(qtId, 'html');
        } catch(e){};
    }
}

如果您没有 ID 或想要显示多个编辑器

function editorFix()
{
    if ( typeof quicktags !== 'undefined' ) {
        for ( var qtId in tinyMCEPreInit.qtInit )
        {
            try 
            {
                if ( typeof QTags.instances[qtId] !== 'undefined' )
                {
                    QTags.instances = {};
                    tinymce.execCommand( 'mceRemoveEditor', false, qtId );
                }

                quicktags( tinyMCEPreInit.qtInit[qtId] );

                if ( ! window.wpActiveEditor ) {
                    window.wpActiveEditor = qtId;
                }

                // Wordpress Switch Editor
                switchEditors.go(qtId, 'html');
            } catch(e){};
        }
    }
}

【讨论】：