时间戳

首页 > 解决方案 > 将 CKEditor 分配给动态创建的文本框元素

javascript - 将 CKEditor 分配给动态创建的文本框元素

问题描述

我有一个表结构，其中CKEditor附加到表 td。像这样的东西：

HTML：

<table class="table table-striped table-condensed" id="questionDetails">
    <thead>
        <tr>
            <th>Question Name</th>
            <th>Options</th>
            <th>Answers</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td class="col-xs-3">
                <input type="text" class="txtQuestionName form-control" name="txtQuestionName" value="" />
                &nbsp;
            </td>
            <td class="col-xs-3">
                <input type="text" class="txtOptions form-control" name="txtOptions" value="" />
                <span class="addOptions">(+)</span> &nbsp;
            </td>
            <td class="col-xs-3">
                <input type="text" class="txtAnswers form-control" value="" />
                <span class="addAnswers">(+)</span> &nbsp;
            </td>
            <td class="col-xs-12">
                <input type="text" class="txtExplanation form-control editor1" name="editor1" />
                &nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" id="btnAdd" class="btn btn-primary">Add</a>
            </td>
        </tr>
    </tbody>
</table>

jQuery :

<script src="~/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
        //Initialize CKEditor by giving id of text area
        CKEDITOR.replace('editor1');

        //Get each instance of CKEditor
        for (instance in CKEDITOR.instances) {
            //update element
            CKEDITOR.instances[instance].updateElement();
        }

  //Add row to the table
   $("#btnAdd").click(function () {
        $("#questionDetails").append('<tr><td><input type="text" class="txtQuestionName form-control" class="form-control" /></td> <td><input type="text" class="txtOptions form-control" /><span class="addOptions">(+)</span></td> <td><input type="text" class="txtAnswers form-control" /> <span class="addAnswers">(+)</span></td><td><input type="text" class="txtExplanation form-control editor1" name="editor1" /></td> <td><a href="javascript:void(0);" class="btn btn-danger remCF">Remove</a></td> &nbsp;</tr>');
   });
</script>

上面的代码在默认加载页面时有效。但是，当我尝试使用动态向表中添加更多行时jQuery，不会创建CKEditor或将其分配给该输入元素。除编辑器外，其他输入元素均已创建。有什么方法可以将CKEditor分配给表中动态创建的行并从中获取所有值？

标签： javascriptjqueryasp.netasp.net-mvc

解决方案

这是一个工作示例。您必须确保为所有编辑者提供唯一 ID

<div>
    <textarea id="editor1"></textarea>
</div>

<div>
    <button type="button" id="btnAdd">Add CKEditor</button>
</div>

<div id="questionDetails">

</div>

<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>

<script type="text/javascript">

    //the inital editor
    CKEDITOR.replace('editor1');

    //use an number to make the id's of the new editors unique
    var index = 2;

    //Add row to the table
    $("#btnAdd").click(function () {

        //create the new id
        var newEditor = 'editor' + index;

        //append some html
        $("#questionDetails").append('<textarea id="' + newEditor + '"></textarea>');

        //init the new editor
        CKEDITOR.replace(newEditor);

        //increment
        index++;
    });
</script>

如果要读取内容，只需循环实例并获取数据getData()

$("#btnRead").click(function () {
    for (var i in CKEDITOR.instances) {
        alert(CKEDITOR.instances[i].getData());
    }
});

推荐阅读