Инициализируйте редактор TinyMCE / визуальный редактор после вставки AJAX

11

У меня есть группа полей стиля «повторитель» на странице пользовательских настроек. Есть активный визуальный редактор в скрытом состоянии, и когда пользователь нажимает «добавить новый», вся строка клонируется. Затем мне нужно инициализировать визуальный редактор в клонированной строке. Мой код:

$('.repeater-add-new').click(function(event) {
    event.preventDefault();
    var target = $(this).data('repeater');
    $( '#' + target).find('.repeater-row:not(.clone) .repeater-content.in').collapse();
    var newRow = $( '#' + target + ' .repeater-row.clone' ).clone().appendTo( '#' + target + ' .repeater-row-wrapper' ).removeClass('clone');
    rebuildIndex(target);

    // Initialize editors if needed
    newRow.find('.wp-editor-wrap').each(function(index, el) {
        var ed_id = $(this).find('textarea').attr('id');

        tinymce.init(tinyMCEPreInit.mceInit[ed_id]);
        tinymce.execCommand('mceAddEditor', false, ed_id); 
        quicktags({id : ed_id});
    });
});

Скриншот интерфейса:

Снимок экрана

Когда страница загружается, я получаю ошибку консоли:

Uncaught TypeError: Невозможно прочитать свойство 'onpageload' из неопределенного

И, конечно, редактор не работает. После того, как я сохранил страницу, она, конечно, работает нормально, но мне нужно, чтобы она работала и при добавлении строки.

Джек Артуро
источник
Вы получили решение проблемы «onpageload»
Kvvaradha
Похоже, вам также может понадобиться зарегистрировать некоторые вещи с помощью быстрых тегов. Я не уверен на 100%, так как я не могу проверить это локально, но вы можете начать с stackoverflow.com/questions/21519322/… чтобы посмотреть, поможет ли это вообще.
phatskat
Эй, снова сталкивался с этим. OP, не могли бы вы добавить фрагмент для того, как добавить одно из этих полей в редактор сообщений? Я могу попытаться повторить это локально и покопаться в нем, если вы сами сможете предоставить такой способ.
phatskat
Привет, @phatskat, спасибо. Я на самом деле закончил в совершенно ином направлении ... клиент хотел упаковать эту систему для коммерческой продажи, поэтому мы переписали все, используя пользовательский интерфейс без ACF. Цени предложение за помощь!
Джек Артуро

Ответы:

1

Удалось ли вам заставить редактор работать без включенного JavaScript? Если это так, попробуйте создать шаблон, включающий работающий редактор tinymce, а затем перепишите свой javascript, чтобы скопировать этот шаблон, используя WithDataAndEventsаргумент clone()функции jQuery, установленной в true.

Например:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
Fleuv
источник