То, что я хочу сделать, - это полностью инициализировать CKEDITOR на текстовом поле, прежде чем текстовое поле будет прикреплено к DOM.
У меня есть функция, которая будет клонировать 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>
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());
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
.
$.fn.placeReminderForm = function(){this.append(getReminderForm());CKEDITOR.replace('note');};
затем просто сделайте$('#some-container').placeReminderForm()