Ініціалізуйте редактор 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"
Квадраджа

Схоже, вам може знадобитися також зареєструвати деякі речі за допомогою швидких тегів. Я не впевнений на 100%, оскільки не можу це перевірити локально, але ви можете почати з stackoverflow.com/questions/21519322/…, щоб побачити, чи це взагалі допомагає.
phatskat

Гей, знову натрапив на це. ОП, ви можете додати фрагмент, як додати одне з цих полів до редактора публікацій? Я можу спробувати перепрофілювати це на місцевому рівні та закопати його, якщо ви можете створити спосіб вирішити це.
phatskat

Привіт @phatskat, спасибі Насправді я повністю перейшов у інший бік ... Клієнт хотів упакувати цю систему для комерційного продажу, тому ми переписали все за допомогою спеціального інтерфейсу без ACF. Вдячні за пропозицію допомогти!
Джек Артуро

Відповіді:


1

Вам вдалося змусити редактор працювати без включення Javascript? Якщо так, спробуйте створити шаблон, що включає в себе робочий редактор tinymce, а потім перепишіть свій JavaScript, щоб скопіювати цей шаблон, використовуючи WithDataAndEventsаргумент clone()функції jQuery, встановлений на true.

Наприклад:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.