tengo este JavaScript
<script> $(document).ready(function() { $(".summernote").each(function() { const self = $(this); // store self as this and this is referenced to each .summernote element. self.summernote({ placeholder: "start typing", lang: "en-GB", height: 300, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true, // set focus to editable area after initializing summernote callbacks: { onImageUpload: function(files) { for (var i = 0; i < files.length; i++) { send(files[i], self); // pass selft to send function } }, }, }); }); }); function send(file, context) { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { response = JSON.parse(this.responseText); const urls = response.url; urls.forEach(item => { context.summernote('insertImage', item, function($image) { $image.attr('src', item).attr('width', '100%'); }); }); } }; var data = new FormData(); data.append("files[]", file); xhttp.open("POST", "/admin/ans-img-upload", true); xhttp.send(data); } </script>tengo este html
<textarea class="form-control summernote" id="summernote" name="af_options[]"> </textarea>Esto funciona bien con javascript.
Ahora estoy tratando de agregar más área de texto
function add_more_additional_field() { $('#additional_options').append( '<textarea class="summernote" id="summernote" name="af_options[]" placeholder="Start typing the answers here"></textarea>' ); $(document).ready(function() { $([...document.querySelectorAll('#additional_options .summernote')].pop()).summernote(); }); }pero no todas las funciones como
context.summernote('insertImage', item, function($image) { $image.attr('src', item).attr('width', '100%');fue anexado.
Necesito ayuda sobre cómo agregar más área de texto con la función exacta en el javascript para que funcione como el de $(document).ready()... Ese es el que se cargó cuando el sitio se cargó realmente.
Debe definir una identificación diferente para cada nueva área de textarea .
Ejemplo a continuación:
$(document).ready(function () { $(".summernote").each(initSummernote); }); function send(file, context) { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { response = JSON.parse(this.responseText); const urls = response.url; urls.forEach(item => { context.summernote("insertImage", item, function ($image) { $image.attr("src", item).attr("width", "100%"); }); }); } }; var data = new FormData(); data.append("files[]", file); xhttp.open("POST", "/admin/ans-img-upload", true); xhttp.send(data); } function initSummernote() { const self = $(this); // store self as this and this is referenced to each .summernote element. self.summernote({ placeholder: "start typing", lang: "en-GB", height: 300, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true, // set focus to editable area after initializing summernote callbacks: { onImageUpload: function (files) { for (var i = 0; i < files.length; i++) { send(files[i], self); // pass selft to send function } }, }, }); } function add_more_additional_field() { const count = $(".summernote").length + 1; const id = `summernote${count}`; $("#additional_options").append( `<textarea class="form-control summernote" id="${id}" name="af_options[]"></textarea>` ); $(`#${id}`).each(initSummernote); } $("#add").on("click", add_more_additional_field); <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- include summernote css/js --> <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> <button id="add">Add more</button> <div id="additional_options"> <textarea class="form-control summernote" id="summernote1" name="af_options[]"></textarea> <textarea class="form-control summernote" id="summernote2" name="af_options[]"></textarea> </div>