I want to use the instance of ckeditor. when user click on add more button it will create the instance of ckeditor, but that instance of ckeditor is not editable. I mean user is not able to enter anything there.
Need help...Thanks in advance :)
fiddle : http://jsfiddle.net/pkz7auLy/
Jump to PostProblem is when you are cloning ckeditor TR , so textarea with same id OR name created in dom. so second editor after click on add more will not come in editor mode. if try to input some text via editor tool . it will always inject to first cke …
I was able to enter stuff when viewed in my mobile.
Problem is when you are cloning ckeditor TR , so textarea with same id OR name created in dom. so second editor after click on add more will not come in editor mode. if try to input some text via editor tool . it will always inject to first cke editor instance. i tried some thing below it will work for you. I think not good approch but it will work.
<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>
THanks for the negative rep PP. If you gave more info, perhaps you'd have the answer you were fishing for.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.