I have this 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>
I have this html
<textarea class="form-control summernote" id="summernote" name="af_options[]"> </textarea>
This works well with the javascript.
Now I am trying to append more textarea
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();
});
}
but not all the functions like
context.summernote('insertImage', item, function($image) {
$image.attr('src', item).attr('width', '100%');
was appended.
Please I need help on how to append more textarea with the exact function in the javascript to work like the one at $(document).ready() ... That is the one that loaded when the site was actually loaded
You need to define a different id for each new textarea.
Example below:
$(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>