Создайте экземпляр TinyMCE с помощью JS (а не редактора PHP/wp)
Как создать редактор TinyMCE после загрузки страницы?
Ввод вызова wp_editor
в AJAX-запрос, а затем его отображение дает следующее:
Визуальные и текстовые вкладки нефункциональны, нет панели инструментов, нет активного экземпляра TinyMCE, только разметка html. Мне нужно создать экземпляр JS-компонента TinyMCE, но как?
Я также попытался сделать вызов в своем PHP-ответе AJAX на _WP_Editors::editor_js();
, и я вижу ответ в консоли с помощью консоли.войти и Я вижу там скрипт JS, но он не вставлен в DOM и никогда не выполняется
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, мы вместо этого крадем их из экземпляра, созданного при начальной загрузке страницы, и делаем копии. Мы тогда измените копии, чтобы использовать правильные идентификаторы элементов, и действуйте как обычно, проверяя, что у элементов еще нет экземпляра.
Проблемы
- Вкладки для простого текста и визуального контента не работают
- Нет быстрых тегов в представлении открытого текста
- Дополнительный вес начального экземпляра TinyMCE
- Нет кнопки загрузки мультимедиа
- Добавление 2 или более экземпляров TinyMCE в запрос AJAX приводит к одному рабочему экземпляру, и другие были сломлены. Я не уверен, почему это так, но 2 запроса AJAX с 1 экземпляром каждый дают вам 2 рабочих экземпляра.
- JS можно было бы изменить, чтобы не изменять структуру TinyMCEPreInit, и передать копию прямо в инициализатор, удалив обход DOM в процессе