我有這個 javascript
<script>
$(document).ready(function() {
$('.summernote1').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]);
}
}
}
});
});
function send(file) {
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(imgurls);
function imgurls(item) {
$('.summernote1').summernote('insertImage', item);
}
}
};
var data = new FormData();
data.append('files[]', file);
xhttp.open("POST", "/admin/ans-img-upload", true);
xhttp.send(data);
}
//第二個
$(document).ready(function() {
$('.summernote2').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]);
}
}
}
});
});
function send(file) {
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(imgurls);
function imgurls(item) {
$('.summernote2').summernote('insertImage', item);
}
}
};
var data = new FormData();
data.append('files[]', file);
xhttp.open("POST", "/admin/ans-img-upload", true);
xhttp.send(data);
}
</script>
然后我有這個html代碼
<textarea class="form-control summernote1" id="summernote1" name="af_options[]"></textarea>
<textarea class="form-control summernote2" id="summernote2" name="af_options[]"></textarea>
現在如果我想在summernote1中上傳圖片，圖片將被插入到最后一個textarea中，即summernote2。
請問我如何解決這個問題，無論如何我可以在所有的textarea中使用1個javascript代碼而不是重復javascript代碼，因為我有一個回圈多個textarea的foreach。
請幫忙
感謝您的解決方案......
現在如何添加更多欄位...我有下面的代碼，但它不適用于影像插入
function add_more_additional_field() {
$('#additional_options').append(
'<textarea id="summernote" name="af_options[]" placeholder="Start typing the answers here"></textarea>'
);
$(document).ready(function() {
$([...document.querySelectorAll('#additional_options .summernote')].pop()).summernote();
});
}
uj5u.com熱心網友回復：
您可以將所有類名更改為summernote并使用$('.summernote')以將它們全部選中并應用summernote()。
棘手的部分是存盤$(this)并將其傳遞給send函式。
$(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);
});
}
};
var data = new FormData();
data.append("files[]", file);
xhttp.open("POST", "/admin/ans-img-upload", true);
xhttp.send(data);
}<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/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
<textarea class="form-control summernote" id="summernote1" name="af_options[]"></textarea>
<br />
<br />
<textarea class="form-control summernote" id="summernote2" name="af_options[]"></textarea>uj5u.com熱心網友回復：
的第二個定義function send(file)是覆寫第一個定義。
您應該只有一個定義send并添加第二個引數以包含正確的 textarea。
function send(file, $el) {
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(imgurls);
function imgurls(item) {
// Use the passed textarea instead of a hard-coded value
$el.summernote('insertImage', item);
}
}
};
var data = new FormData();
data.append('files[]', file);
xhttp.open("POST", "/admin/ans-img-upload", true);
xhttp.send(data);
}
要利用這一點，您還需要更新您的document.ready回呼。您將無法更改onImageUpload回呼的引數，因此您需要“嵌入”正確的元素。有幾種方法可以做到這一點，但我更喜歡圍繞參考正確元素的變數創建一個閉包，因為這樣可以方便以后重構。
$(document).ready(function() {
$('.summernote1').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: (() => {
let $el = $('.summernote1');
return function(files) {
for (var i = 0; i < files.length; i ) {
send(files[i], $el);
}
};
})()
}
});
});
這將創建一個 IIFE，它形成一個閉包，$el并send()在 onImageUpload 回呼被觸發時將其傳遞給。
你可以.summernote2在你的另一個document.readyfor 中做同樣的事情.summernote2
可能還可以進行更多重構以進一步減少代碼重復。
uj5u.com熱心網友回復：
您有沖突的send()函式定義。添加類作為引數。
function send(file, summerclass) {
...
function imgurls(item) {
$(summerclass).summernote('insertImage', item);
}
并從ready().
send(files[i],'.summernote1');
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404547.html
標籤：
上一篇：根據元素的索引向元素添加類