Загрузка tinyMCE / wp_editor() через AJAX

Question

Загрузка tinyMCE / wp_editor() через AJAX

26 окт. 2012 г., 12:28:05

Просмотры: 13.6K

Голосов: 4

Возможный дубликат:
Как загрузить wp_editor() через AJAX/jQuery

Есть несколько вопросов на эту тему (например, этот, или этот), но ни один из них не предоставляет мне решения.

Ситуация: У меня есть метабокс. Внутри этого метабокса я хочу динамически добавлять редакторы 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); // нет экземпляра 'editor-id'
        console.log(tinyMCEPreInit.mceInit); // 'editor-id' отсутствует в списке
        console.log(tinyMCE.activeEditor); // null
    }
);

Результат - окно редактора (с вкладками html и визуальный режим), кнопка загрузки и текстовое поле, но полностью без кнопок.

Что я пробовал (как предлагалось в других вопросах):

// В функции response
tinyMCE.init({
    skin : "wp_theme",
    mode : "exact",
    elements : "editor-id",
    theme: "advanced"
});


// В функции response
tinyMCE.init(tinyMCEPreInit.mceInit['editor-id']);


// В 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']) - ВОЗМОЖНО.

Любая помощь будет очень ценной ;-)

Спасибо!

xsonic

751

ajax tinymce wp editor

Комментарии

Здесь: http://wordpress.stackexchange.com/a/192132/33667

T.Todua

15 авг. 2016 г. 19:03:12

Все ответы на вопрос

Комментарии

После переключения junrate вкладка wise не работает, и мы не можем вводить в нее текст

Ravi Patel

24 июл. 2020 г. 06:21:00

Mike Allen 31 · Answer 1 · 2012-11-02T07:04:51Z

Ваш пост помог мне найти решение. Вместе со свойством mceInit мне также пришлось получить qtInit, который генерирует wp_editor.

Ниже приведен соответствующий код в моем классе. По сути, я запускаю wp_editor, чтобы сгенерировать JavaScript. Я использую хуки для получения JavaScript, чтобы затем вывести его в ответе AJAX.

// AJAX-вызов для получения 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' );

// используется для захвата настроек JavaScript, генерируемых редактором
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-вызов для генерации 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();
    }

    /*
    * Используется для получения настроек JavaScript, которые генерирует редактор
    */

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

    /*
    * Код скопирован из класса _WP_Editors (немного изменен)
    */
    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, ' ,' ) . '}';
    }

}


// код ответа AJAX
success : function(response){
    textarea.replaceWith(response);
    tinyMCE.init(tinyMCEPreInit.mceInit[data.id]);
    try { quicktags( tinyMCEPreInit.qtInit[data.id] ); } catch(e){}
}