Инициализируйте CKEDITOR, прежде чем элемент будет присоединен к DOM

0

То, что я хочу сделать, - это полностью инициализировать CKEDITOR на текстовом поле, прежде чем текстовое поле будет прикреплено к DOM.

У меня есть функция, которая будет клонировать html-форму, присоединять события и инициализировать входные данные формы.

Это так, что я могу получить полностью функционирующую форму через один вызов функции. Обеспечение легкости во всей системе.

HTML

<div id="clones" style="display:none">

    <!-- The form to submit Reminders to the system -->
    <form id="reminder-submit-form">
        <input type="text" name="date" />
        <textarea name="note"></textarea>
        <input type="button" class="submit" value="Add Reminder"/>
    </form>

</div>

JS

function getReminderForm()
{
    var form = $('#reminder-submit-form').clone();

    form.find('[name="date"]').datepicker();

    // These are what I tried...
    // CKEDITOR.replace('note')                      // FAILS
    // CKEDITOR.replace(form.find('[name="note"]')); // FAILS
    // form.find('[name="note"]').ckeditor()         // FAILS

    form.find('input.submit').on('click', function(){
        // handle click
    });
    return form;
}

Из-за этого дизайна... Я могу использовать форму во многих местах:

var popup_content = $('<div/>')
                        .append('<h1>Add a Reminder</h1>')
                        .append(getReminderForm());
$.fancybox(popup_content);

Проблема в том, что вызов:

CKEDITOR.replace

не будет работать, потому что CKEDITOR выполняет поиск DOM для элемента. Однако мой элемент еще не прикреплен к DOM.

Кто-нибудь может подумать о работе? Потому что, если я не могу, то по всей моей системе плохо иметь такой код:

// attach form to container
$('#some-container').append(getReminderForm());

// Initialize AFTER form has been attached
CKEDITOR.replace('note');

Когда я мог просто иметь:

$('#some-container').append(getReminderForm());
  • 0
    Или вы можете абстрагироваться от функции. $.fn.placeReminderForm = function(){this.append(getReminderForm());CKEDITOR.replace('note');}; затем просто сделайте $('#some-container').placeReminderForm()
  • 0
    Я мог бы, да, спасибо за ваш комментарий. Я, вероятно, в конечном итоге буду использовать это, но мне все еще интересно, можно ли связать CKEDITOR до того, как элемент будет прикреплен. В идеале я хотел бы связать ckeditor ВНУТРИ функции getReminderForm, ПОТОМУ ЧТО это где остальная часть вещи связана, и это имеет смысл :)
Показать ещё 7 комментариев
Теги:
dom
ckeditor

1 ответ

0

CKEditor должен быть создан с существующим элементом DOM (CKEDITOR.replace) или существующим родителем (CKEDITOR.appendTo).

Если бы я был вами, я бы просто создал функцию:

function appendReminderForm( where ) {
    // Clone existing form...
    // ...

    // Append cloned form to DOM.
    where.append( clonedForm );

    // Replace textarea to create the editor.
    CKEDITOR.replace( clonedTextarea );
}

Обратите внимание, что при вызове CKEDITOR.replace аргумент, передаваемый функции, должен быть уникальным идентификатором, поэтому CKEDITOR.replace( 'note' ) не имеет большого смысла, поскольку есть два элемента с одним и тем же name (клоны). Лучше получить собственный DOM-элемент (textarea клонированной формы) и передать его на CKEDITOR.replace.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню