[英]How can i clone or add multiple ck editor on page
I want multiple textarea
(ck editor) where user can input multiple data in it , i tried various function and methods of jquery like clone()
and appendTo
but the problem is they are cloning the textarea
but ckeditor is not working, after cloning the textarea
i am unable to wrote anything in it Please help me with it. 我想要多个textarea
(ck编辑器),用户可以在其中输入多个数据,我尝试了jquery的各种功能和方法,例如clone()
和appendTo
但问题是它们正在克隆textarea
但是在克隆textarea
之后ckeditor无法正常工作我无法在其中写任何东西,请帮帮我。
This is what i tried 这就是我尝试过的
test1 http://jsfiddle.net/FADxv/793/ test1 http://jsfiddle.net/FADxv/793/
test2 http://jsfiddle.net/kbqjnecx/3/ test2 http://jsfiddle.net/kbqjnecx/3/
Thanks 谢谢
Add an id
to each new textarea and manually initialize the editor using CKEditor.replace(id [,config])
向每个新的textarea添加一个id
,并使用CKEditor.replace(id [,config])
手动初始化编辑器
Something like: 就像是:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var editorId = 'editor_' + x;
$(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea><a href="#" class="remove_field">Remove</a></div>'); //add input box
CKEDITOR.replace(editorId, { height: 200 });
}
});
Check this for cloning ckeditor. 检查此克隆ckeditor。
Check this fiddle : http://jsfiddle.net/manektech/47htysb5/ 检查此小提琴: http : //jsfiddle.net/manektech/47htysb5/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
</head>
<body>
<div class="row hide_mail_id_domain">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
</td>
<td></td>
</tr>
</tbody>
</table>
<a href="javascript:void(0)" class="btn btn-success add_more right" style="float: right;">Add More</a>
</div>
</div>
<script>
var REMOVE = '';
var i=1;
$(document).ready(function () {
$('.add_more').click(function () {
var oneplus=i+1;
var tr_object = $('tbody').find('tr:first').clone();
// getting and renaming existing textarea by name.
$(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
$(tr_object).find('input').val('');
$(tr_object).find('td:last').html('<a href="javascript:void(0)" class="btn btn-danger remove_more">Remove</a>');
$('tbody').append(tr_object);
//replace code
CKEDITOR.replace("question_option_"+oneplus+"");
// when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
// included below code
$('#cke_question_option_1').each(function() {
var $ids = $('[id=' + this.id + ']');
if ($ids.length > 1) {
$ids.not(':first').remove();
}
});
i=i+1;
oneplus++;
});
$(document).on('click', '.remove_more', function () {
var id = $(this).closest('tr').find('.id').val();
if (id != '') {
if (REMOVE != '') {
REMOVE = REMOVE + ',' + id;
} else {
REMOVE = id;
}
$('#id').val(REMOVE);
}
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.