- Betroffene Version
- WoltLab Suite 5.4
Hallo zusammen,
ich bin kein Entwickler und versuche ein älteres Plugin ein wenig zu erweitern. Ich dachte Anfangs das wäre simple, aber dem scheint nicht so.
Der eigentliche Entwickler ist aus Zeitgrünen schon länger nicht mehr zugegen.
Das ganze ist ein BBCode, welches mit imgur.com kommuniziert und entsprechend Bilder hochladen kann.
Das ganze klappt auch aktuell im WSC 5.4, nur eben die Erweiterung funktioniert nicht.
Das Modal sieht aktuell so aus und funktioniert ohne meine Erweiterung Problemlos.
init: function() {
if (this.opts.woltlab.allowImages) {
var button = this.button.add('qnetImgur', '');
this.button.addCallback(button, this.QnetImgur.add);
}
// overwrite modal template
this.opts.modal['imgur-edit'] = '<div class="section">'
+ '<dl id="redactor-imgur-source-container">'
+ '<dt><label for="redactorImgurUpload">' + WCF.Language.get('wcf.editor.imgur.source') + '</label></dt>'
+ '<dd><input type="file" id="redactorImgurUpload" class="long"></dd>'
+ '</dl>'
+ '<dl>'
+ '<dt></dt>'
+ '<dd>' + WCF.Language.get('wcf.editor.imgur.or') + '</dd>'
+ '</dl>'
+ '<dl id="redactor-imgur-url-container">'
+ '<dt><label for="redactorImgurSource">' + WCF.Language.get('wcf.editor.imgur.url') + '</label></dt>'
+ '<dd><input type="text" id="redactorImgurSource" class="long"></dd>'
+ '</dl>'
+ '<input id="redactor-imgur-title" style="display: none">' /* dummy because redactor expects it to be present */
+ '<input id="redactor-imgur-caption" style="display: none">' /* dummy because redactor expects it to be present */
+ '<div class="formSubmit">'
+ '<button id="redactor-modal-button-action" class="buttonPrimary">Insert</button>'
+ '</div>'
+ '</div>';
},
Alles anzeigen
Ich habe nun folgendes hinzugefügt:
+ '<dl>'
+ '<dt><label for="categoryID">Bildgröße</label></dt>'
+ '<dd class="floated">'
+ '<label><input type="radio" name="imagesize" value="t"> Klein</label>'
+ '<label><input type="radio" name="imagesize" value="m" checked=""> Mittel</label>'
+ '<label><input type="radio" name="imagesize" value="l"> Groß</label>'
+ '<label><input type="radio" name="imagesize" value="h"> Original</label>'
+ '</dd>'
+ '</dl>'
init: function() {
if (this.opts.woltlab.allowImages) {
var button = this.button.add('qnetImgur', '');
this.button.addCallback(button, this.QnetImgur.add);
}
// overwrite modal template
this.opts.modal['imgur-edit'] = '<div class="section">'
+ '<dl id="redactor-imgur-source-container">'
+ '<dt><label for="redactorImgurUpload">' + WCF.Language.get('wcf.editor.imgur.source') + '</label></dt>'
+ '<dd><input type="file" id="redactorImgurUpload" class="long"></dd>'
+ '</dl>'
+ '<dl>'
+ '<dt></dt>'
+ '<dd>' + WCF.Language.get('wcf.editor.imgur.or') + '</dd>'
+ '</dl>'
+ '<dl id="redactor-imgur-url-container">'
+ '<dt><label for="redactorImgurSource">' + WCF.Language.get('wcf.editor.imgur.url') + '</label></dt>'
+ '<dd><input type="text" id="redactorImgurSource" class="long"></dd>'
+ '</dl>'
+ '<dl>'
+ '<dt><label for="categoryID">Bildgröße</label></dt>'
+ '<dd class="floated">'
+ '<label><input type="radio" name="imagesize" value="t"> Klein</label>'
+ '<label><input type="radio" name="imagesize" value="m" checked=""> Mittel</label>'
+ '<label><input type="radio" name="imagesize" value="l"> Groß</label>'
+ '<label><input type="radio" name="imagesize" value="h"> Original</label>'
+ '</dd>'
+ '</dl>'
+ '<input id="redactor-imgur-title" style="display: none">' /* dummy because redactor expects it to be present */
+ '<input id="redactor-imgur-caption" style="display: none">' /* dummy because redactor expects it to be present */
+ '<div class="formSubmit">'
+ '<button id="redactor-modal-button-action" class="buttonPrimary">Insert</button>'
+ '</div>'
+ '</div>';
},
Alles anzeigen
Soweit so gut. Bei imgur.com kann man an die Bilddatei Buchstaben setzen, wie in den value zu sehen. Diese geben das Bild dann entsprechend in einer anderen Größe aus. Diese Möglichkeit wollte ich eben mit verbauen, dass man das direkt mit anfügen kann.
Mir sagte nun jemand, dass ich var imagesize = elBySel('input[name=imagesize]:checked'); nutzen könne, aber ich weiß weder wo das hin soll, noch wie ich diesen Bereich dafür modifizieren müsste:
_success: function(data) {
// remove any existing error messages first
this.modal.getModal().find('.innerError').remove();
var source = data.link;
var imagesize = elBySel('input[name=imagesize]:checked');
var html = '<img src="' + WCF.String.escapeHTML(imagesize) + '">';
var linkUuid;
if (source) {
linkUuid = WCF.getUUID();
html = '<a href="' + WCF.String.escapeHTML(source) + '" data-uuid="' + linkUuid + '">' + html + '</a>';
}
this.modal.close();
this.buffer.set();
this.insert.html(html);
if (linkUuid) {
window.setTimeout((function() {
var link = elBySel('a[data-uuid="' + linkUuid + '"]', this.core.editor()[0]);
if (link) {
link.removeAttribute('data-uuid');
this.caret.after(link);
}
}).bind(this), 1);
}
},
Alles anzeigen
Alles was ich versucht habe, ergab sowas wie [object HTMLInputElement] oder sö ähnlich.
Dann dachte ich mir, dass ich die ImgurUploadAction.class.php bearbeite und habe aus:
if ($returnValues !== null) {
// send JSON-encoded response
header('Content-type: application/json');
echo JSON::encode($returnValues);
}
Das gemacht:
if ($returnValues !== null) {
// send JSON-encoded response
header('Content-type: application/json');
$image = JSON::encode($returnValues);
$fileArray = pathinfo($image);
echo $fileArray['dirname'].'/'.$fileArray['filename'].'l'.'.'.$fileArray['extension'];
}
Das klappt auch in dem ich dann .'l'. den Buchstabe ändere.
Daher meine Frage: WIe kann ich das ganze innerhalb des Javascript abfragen und die URL entsprechend mit dem value ergänzen oder wenigstens an die CLASS übergeben?
Danke im Voraus.