通过AJAX加载tinyMCE/wp_Editor()

时间:2012-10-26 作者:xsonic

Possible Duplicate:
How to load wp_editor() through AJAX/jQuery

关于这一点有几个问题(like this, or that), 但没有一个能为我提供解决方案。

情况:我有一个代谢箱。在这个元框中,我想动态添加tinyMCE编辑器。

代码:

PHP:

add_action(\'wp_ajax_insert_tinymce\', \'insert_tinymce\');
function insert_tinymce(){
    wp_editor(\'\',\'editor-id\');
    exit;
}
JS公司:

$.post(
    global.ajaxurl,
    {
        action : \'insert_tinymce\'
    },
    function(response) {

        $(response).appendTo(\'#target-div\');

        console.log(tinyMCE); // no instance of \'editor-id\'
        console.log(tinyMCEPreInit.mceInit); // \'editor-id\' not listed
        console.log(tinyMCE.activeEditor); // null
    }
);
结果是一个编辑器窗口(带有html和可视选项卡)、一个上载按钮和一个文本区域,但完全没有按钮。

我尝试的内容(如其他问题所示):

// In the response function
tinyMCE.init({
    skin : "wp_theme",
    mode : "exact",
    elements : "editor-id",
    theme: "advanced"
});


// In the response function
tinyMCE.init(tinyMCEPreInit.mceInit[\'editor-id\']);


// in the PHP
ob_start();
wp_editor( \'\', \'editor-id\' );
echo ob_get_clean();
第一个可行,但我必须手动设置许多设置,而且我的自定义按钮不会显示。

第二个显然不起作用,因为没有editor-id 在中列出tinyMCEPreInit.mceInit

第三个(输出缓冲)没有区别。

我注意到wp_editor() 将tinyMCE实例添加到tinyMCEPreInit 并通过以下方式添加admin_print_footer_scripts 钩所以我必须动态更新tinyMCEPreInit (在不丢失主编辑器实例的情况下)然后激发tinyMCE.init(tinyMCEPreInit.mceInit[\'editor-id\']) - MAYBE

非常感谢您的帮助;-)

谢谢

1 个回复
SO网友:Mike Allen

你在这里的帖子帮助我找到了一个解决方案。除了mceInit属性之外,我还必须检索wp\\u编辑器生成的qtInit。

下面是我班上的相关代码。基本上,我已经运行了wp\\u编辑器,以便生成javascript。我使用挂钩来检索javascript,以便在ajax响应中对其进行响应。

// ajax call to get wp_editor
add_action( \'wp_ajax_wp_editor_box_editor_html\', \'wp_editor_box::editor_html\' );
add_action( \'wp_ajax_nopriv_wp_editor_box_editor_html\', \'wp_editor_box::editor_html\' );

// used to capture javascript settings generated by the editor
add_filter( \'tiny_mce_before_init\', \'wp_editor_box::tiny_mce_before_init\', 10, 2 );
add_filter( \'quicktags_settings\', \'wp_editor_box::quicktags_settings\', 10, 2 );

class wp_editor_box {

    /*
    * AJAX Call Used to Generate the WP Editor
    */

    public static function editor_html() {
        $content = stripslashes( $_POST[\'content\'] );
        wp_editor($content, $_POST[\'id\'], array(
            \'textarea_name\' => $_POST[\'textarea_name\']
        ) );
        $mce_init = self::get_mce_init($_POST[\'id\']);
        $qt_init = self::get_qt_init($_POST[\'id\']); ?>
        <script type="text/javascript">
            tinyMCEPreInit.mceInit = jQuery.extend( tinyMCEPreInit.mceInit, <?php echo $mce_init ?>);
            tinyMCEPreInit.qtInit = jQuery.extend( tinyMCEPreInit.qtInit, <?php echo $qt_init ?>);
        </script>
        <?php
        die();
    }

    /*
    * Used to retrieve the javascript settings that the editor generates
    */

    private static $mce_settings = null;
    private static $qt_settings = null;

    public static function quicktags_settings( $qtInit, $editor_id ) {
        self::$qt_settings = $qtInit;
                    return $qtInit;
    }

    public static function tiny_mce_before_init( $mceInit, $editor_id ) {
        self::$mce_settings = $mceInit;
                    return $mceInit;
    }

    /*
    * Code coppied from _WP_Editors class (modified a little)
    */
    private function get_qt_init($editor_id) {
        if ( !empty(self::$qt_settings) ) {
            $options = self::_parse_init( self::$qt_settings );
            $qtInit .= "\'$editor_id\':{$options},";
            $qtInit = \'{\' . trim($qtInit, \',\') . \'}\';
        } else {
            $qtInit = \'{}\';
        }
        return $qtInit;
    }

    private function get_mce_init($editor_id) {
        if ( !empty(self::$mce_settings) ) {
            $options = self::_parse_init( self::$mce_settings );
            $mceInit .= "\'$editor_id\':{$options},";
            $mceInit = \'{\' . trim($mceInit, \',\') . \'}\';
        } else {
            $mceInit = \'{}\';
        }
        return $mceInit;
    }

    private static function _parse_init($init) {
        $options = \'\';

        foreach ( $init as $k => $v ) {
            if ( is_bool($v) ) {
                $val = $v ? \'true\' : \'false\';
                $options .= $k . \':\' . $val . \',\';
                continue;
            } elseif ( !empty($v) && is_string($v) && ( (\'{\' == $v{0} && \'}\' == $v{strlen($v) - 1}) || (\'[\' == $v{0} && \']\' == $v{strlen($v) - 1}) || preg_match(\'/^\\(?function ?\\(/\', $v) ) ) {
                $options .= $k . \':\' . $v . \',\';
                continue;
            }
            $options .= $k . \':"\' . $v . \'",\';
        }

        return \'{\' . trim( $options, \' ,\' ) . \'}\';
    }

}


// the ajax respnose code
success : function(response){
    textarea.replaceWith(response);
    tinyMCE.init(tinyMCEPreInit.mceInit[data.id]);
    try { quicktags( tinyMCEPreInit.qtInit[data.id] ); } catch(e){}
}

结束

相关推荐

从HTML切换到可视(TinyMCE)时停止WordPress删除<SCRIPT>标记

好吧,我已经看到了解决这个问题的半途而废的解决方案,但没有什么确定的,也没有什么能够百分之百解决我的问题。场景:在HTML模式下,我向正在编辑的帖子添加了一些javascript</我切换到Visual,然后返回HTML,标签及其所有内容都消失了</如何阻止这种情况发生?我已尝试向函数中添加自定义代码。php试图访问TinyMCE的extended\\u valid\\u元素,但没有任何效果。请帮忙!