如何解决将 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="" />
</td>
<td class="col-xs-3">
<input type="text" class="txtOptions form-control" name="txtOptions" value="" />
<span class="addOptions">(+)</span>
</td>
<td class="col-xs-3">
<input type="text" class="txtAnswers form-control" value="" />
<span class="addAnswers">(+)</span>
</td>
<td class="col-xs-12">
<input type="text" class="txtExplanation form-control editor1" name="editor1" />
</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> </tr>');
});
</script>
上述代码在页面默认加载时有效。但是,当我尝试使用 jQuery
向表中动态添加更多行时,不会创建或分配 CKEditor 到该输入元素。除编辑器外,其他输入元素均已创建。有什么方法可以将 CKEditor 分配给表中动态创建的行并从中获取所有值?
解决方法
这是一个工作示例。你必须确保给所有编辑一个唯一的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());
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。