0
419
ViewsTinyMce isn't editable and clickable on dynamic created textarea
the scenario I have is to by clicking add button i generate new textarea, its like repeater fields. I want to set Tinymce on every newly created textarea and all other existing already. the issue i am having is the existing textarea is working fine, but the others generated dynamically are not working properly. The TinyMCE textarea is showing but it is completely not clickable nor editable.
HTML Code:
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<tr class="empty-row screen-reader-text">
<td>
<input type="text" class="widefat" name="index[]" />
</td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="file" class="widefat" name="attachment[]" />
<input type="hidden" name="attachment_current[]" >
</td>
<td>
<textarea class="widefat tiny" name="anno_text[]" ></textarea>
</td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>
Jquery code :
jQuery(document).ready(function( $ ){
$.fn.extend({
initTiny: function() {
tinymce.init({
mode: "textareas",
height: 100
});
}
});
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
$("textarea", row).initTiny();
return false;
});
$(".tiny").initTiny();
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
what i have got in result i'm attaching an image.
the 1st tinymce editor works fine but after that not a signle tinymce editor is clickable
·
Juan Pablo Isaza
1 answers
Answer question0
Consider the following example.
jQuery(function($) {
$.fn.extend({
initTiny: function() {
console.log("Init TinyMCE");
tinymce.init({
selector: "textarea.tiny",
height: 100
});
}
});
$("#add-row").click(function() {
var row = $(".row-template").html();
console.log("Row Cloned");
$(row).appendTo('#repeatable-fieldset-one > tbody');
console.log("Row Appended", $("#repeatable-fieldset-one tbody tr").length);
$(".tiny").initTiny();
});
$("#add-row").trigger("click");
$("#repeatable-fieldset-one").on("click", ".remove-row", function() {
if (confirm("Are you sure you want to remove the Row?")) {
$(this).closest("tr").remove();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js" integrity="sha512-XNYSOn0laKYg55QGFv1r3sIlQWCAyNKjCa+XXF5uliZH+8ohn327Ewr2bpEnssV9Zw3pB3pmVvPQNrnCTRZtCg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/jquery.tinymce.min.js" integrity="sha512-nmHWouzLZ3EkXUiXVLpRy/scUPyOOwWkAZ6p8GJnswtVIfSgQ6dFjfCv4VrUA9YgutCRqUDyjHGfQ+/3OEbH4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<template class="row-template">
<tr>
<td>
<input type="text" class="widefat" name="index[]" />
</td>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="file" class="widefat" name="attachment[]" />
<input type="hidden" name="attachment_current[]">
</td>
<td>
<textarea class="widefat tiny" name="anno_text[]"></textarea>
</td>
<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</template>
<table id="repeatable-fieldset-one">
<tbody>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>See More:
·
Juan Pablo Isaza
Report
Answer question