Question

我想要做的是在textarea附加到DOM之前在textarea上完全初始化CKEDITOR。

我有一个函数可以克隆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());

Answer 1

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。

在元素附加到DOM之前初始化CKEDITOR

HTML

JS

1 个答案: