Группа полей формы клонирования jQuery добавляет функцию wp_editor() в текстовую область

В метабоксе CPT я использую wp_editor(). Первый загружается через функцию php. Однако, когда я клонирую поля формы через jQuery, он добавляет не wp_editor, а простое текстовое поле.

Итак, здесь я нашел скрипт, который загружает wp_editor через javascript. Однако, когда я пытался клонировать/добавлять поля формы, он загружал не wp_editor, а простое текстовое поле.

Я считаю, что DOM не загружает функцию wp_editor() js. Так может ли кто-нибудь сказать мне, как я могу загрузить wp_editor для клонированных полей?

jQuery

// Just to cross check. This is loading wp_editor on page load
jQuery('.cn-wp-editor').wp_editor();

// wp_localization
var title = cn_fields.title;
var teditor = cn_fields.editor;

// adding incremental id
var i = 1;

// clone fields
$('#add_item').on('click', function () {
    i++;
    $('#fieldgroup').append('<div class="formgroup"><div class="card-meta-box"><label for="card_title" class="card-field-label">Item Title</label><input type="text" name="' + title + '[]" id="' + title + i +'"></div><div class="card-meta-box"><textarea name="' + teditor + '[]" id="' + teditor + i +'" class="cn-wp-editor"></textarea></div><button class="remove">x</button></div><!-- formgroup -->');
    return false; //prevent form submission
});

// remove fields
$('#fieldgroup').on('click', '.remove', function () {
    $(this).parent().remove();
    return false; //prevent form submission
    i--;
});

javascript wordpress php jquery wp-editor
person Code Lover    schedule 01.06.2017    source источник
comment
привет, подскажи, как работать с html частью?   -  person Nayeem Hyder Riddhi    schedule 28.12.2018
comment
@NayeemHyderRiddhi См. stackoverflow.com/a/44305061/1053190 Раунака Гупты   -  person Code Lover    schedule 28.12.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно повторно инициализировать wp_editor() всякий раз, когда вы дублируете/копируете поле. Ваш код не работает, так как скопированное/созданное поле не находится в DOM при загрузке страницы, поэтому wp_editor() не прикреплялось к этим новым полям.

Проверьте этот код:

$('#add_item').on('click', function () {
    i++;
    $('#fieldgroup').append('<div class="formgroup"><div class="card-meta-box"><label for="card_title" class="card-field-label">Item Title</label><input type="text" name="' + title + '[]" id="' + title + i + '"></div><div class="card-meta-box"><textarea name="' + teditor + '[]" id="' + teditor + i + '" class="cn-wp-editor"></textarea></div><button class="remove">x</button></div><!-- formgroup -->');
    $('#' + title + i).wp_editor(); //<------ add this line
    return false; //prevent form submission
});

Надеюсь это поможет!

person Raunak Gupta    schedule 01.06.2017
comment
$(...).wp_editor не является функцией, вы можете помочь исправить это - person Ravi Patel; 22.07.2020