如何在wordpress插件中动态加载tinymce编辑器?

时间:2014-05-29 18:17:02

标签: jquery wordpress

我搜索了很多,并找到了很多这个问题的答案,但它们似乎都不适合我。

我正在制作一个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成功添加修复来实现这一点。

1 个答案:

答案 0 :(得分:0)

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

如果您有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){};
    }
}

如果您没有身份证或想要展示多个编辑

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