Создайте экземпляр TinyMCE с помощью JS (а не редактора PHP/wp)


Как создать редактор TinyMCE после загрузки страницы?

Ввод вызова wp_editor в AJAX-запрос, а затем его отображение дает следующее:

enter image description here

Визуальные и текстовые вкладки нефункциональны, нет панели инструментов, нет активного экземпляра TinyMCE, только разметка html. Мне нужно создать экземпляр JS-компонента TinyMCE, но как?

Я также попытался сделать вызов в своем PHP-ответе AJAX на _WP_Editors::editor_js();, и я вижу ответ в консоли с помощью консоли.войти и Я вижу там скрипт JS, но он не вставлен в DOM и никогда не выполняется

Author: Tom J Nowell, 2012-07-26

1 answers

Обновлено для TinyMCE 4

Я добился некоторого прогресса

Загрузите wp_editor при начальной загрузке страницы в скрытом div, затем выполните вызов AJAX, чтобы захватить разметку редактора.

Находясь в PHP, вам нужно будет получить идентификаторы редакторов, созданных с помощью вызовов wp_editor. К сожалению, переменные в классе _WP_Editors являются частными, но мы можем обойти это с помощью фильтров. Для этого мы начнем с вызова крючка editor_js внутри вывода буфер. Он попытается сгенерировать необходимые настройки и вывести требуемый JS, хотя этот JS не будет работать при отправке обратно через AJAX и вставке.

В конце этого вызова класс _WP_Editors пропускает массив mcesettings через фильтр, который мы будем использовать для создания копии, из которой мы сможем извлечь идентификаторы редактора:

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

function steal_away_mcesettings( $mcesettings ) {
    $this->mcesettings = $mcesettings;
}

Итак, после того, как мы добавили этот фильтр, мы вызываем функцию editor_js:

ob_start();
_WP_Editors::editor_js();
ob_end_clean(); 

Теперь мы можем использовать нашу копию $mcesettings для заполнения списка Идентификаторы:

$ids = array();

foreach ( $this->mcesettings as $editor_id => $init ) {
    $ids[] = $editor_id;
}

Массив идентификаторов теперь можно отправить обратно в ответе AJAX вместе с html.

Попав в браузер, мы можем вставить html-код на страницу, а затем, используя наши идентификаторы_редактора, мы можем создать экземпляры 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 );
                }
            }
        }

    }
}

Поскольку у нас нет возможности самостоятельно сгенерировать необходимые настройки TinyMCE в соответствии со стилем WordPress, мы вместо этого крадем их из экземпляра, созданного при начальной загрузке страницы, и делаем копии. Мы тогда измените копии, чтобы использовать правильные идентификаторы элементов, и действуйте как обычно, проверяя, что у элементов еще нет экземпляра.

enter image description here

Проблемы

  • Вкладки для простого текста и визуального контента не работают
  • Нет быстрых тегов в представлении открытого текста
  • Дополнительный вес начального экземпляра TinyMCE
  • Нет кнопки загрузки мультимедиа
  • Добавление 2 или более экземпляров TinyMCE в запрос AJAX приводит к одному рабочему экземпляру, и другие были сломлены. Я не уверен, почему это так, но 2 запроса AJAX с 1 экземпляром каждый дают вам 2 рабочих экземпляра.
  • JS можно было бы изменить, чтобы не изменять структуру TinyMCEPreInit, и передать копию прямо в инициализатор, удалив обход DOM в процессе
 3
Author: Tom J Nowell, 2016-04-21 13:26:36