0
417
ViewsTinyMce no es editable y no se puede hacer clic en el área de texto dinámica creada
el escenario que tengo es hacer clic en el botón Agregar, genero una nueva área de texto, es como campos repetidores. Quiero configurar Tinymce en cada área de texto recién creada y en todas las demás que ya existen. el problema que tengo es que el área de texto existente funciona bien, pero los otros generados dinámicamente no funcionan correctamente. Se muestra el área de texto de TinyMCE, pero no se puede hacer clic ni editar.
Código HTML:
<!-- 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>codigo jquery:
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; }); });Lo que obtuve como resultado, adjunto una imagen.
el primer editor de tinymce funciona bien, pero después de eso no se puede hacer clic en ningún editor de tinymce
·
Juan Pablo Isaza
1 answers
Answer question0
Considere el siguiente ejemplo.
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>Ver más:
·
Juan Pablo Isaza
Report
Answer question