Vor kurzem ist aufgrund von Projektanforderungen ein Front-End-Textbearbeitungsfeld benötigt, wobei die Funktion des Echtzeit-Hochladens von Bildern. Ich habe mehrere Plug-Ins online verglichen. Erstens war es Baidus Ueiitor und stellte fest, dass der Rahmen zu groß war. Es war nicht das, was ich sehen wollte, ob ein kleines Framework so viele Dateien einführte. Zweitens war es JQuery's Easyui. Obwohl die persönliche Version kostenlos ist, gehört das Projekt zum Geschäft des Unternehmens, und es scheint nicht angebracht, die kommerzielle Version des Frameworks zu verwenden. In Anbetracht der Tatsache, dass das vordere Ende des Projekts hauptsächlich auf Bootstrap gebaut ist, wurde das Bootstrap-Wysiwyg-Plug-In schließlich ausgewählt, was sehr einfach, leicht und hoch erweiterbar ist.
Es ist sehr bequem, Bootstrap-Wysiwyg einzuführen und Textbearbeitungsfunktion zu implementieren, aber ich habe festgestellt, dass das Bild-Upload mit Fileapi implementiert wird. Für die meisten Websites, obwohl die Benutzererfahrung ohne Hochladen mit FileApi sehr gut ist, hoffen wir immer noch, den statischen Pfad des Bildes auf dem Server und nicht auf String -Bildern zu speichern. Kurz gesagt, wir müssen einen kleinen Umschreiben von Bootstrap-Wysiwyg (im Folgenden als WY bezeichnet) umschreiben.
Beobachten wir zunächst die Bildsteuerungen auf der Seite. Überspringen Sie die anderen Steuerelemente und überprüfen Sie den Quellcode. Es ist leicht, den folgenden Code zu finden:
<div> <a id = "pictureBtn"> <i> </i> </a> <Eingabe type = "Datei" data-role = "Magic-Overlay" data-target = "#pictureBtn" data-edit = "InsertImage"/> </div>
Lassen Sie uns eine Erklärung machen. Die Datenrollen- und Daten-Ziel-Eigenschaften sind vordefinierte Ereignisse in Bootstrap. Hier können wir es als Layout verstehen, ohne es zu betrachten. Der entscheidende Punkt ist hier. Die dritte Immobiliendaten-Aufgabe gibt es in Bootstrap kein solches Ereignis. Beobachten Sie Bootstrap-Wysiwyg.js, Sie finden einige Codes wie folgt:
ToolBar.find ('input [type = Datei] [Daten-' + optionenMit anderen Worten, diese Eigenschaft wird tatsächlich implementiert, um Selektoren zu erleichtern, was dem Hinzufügen eines Listener -Ereignisses zur Bildschaltfläche entspricht.
Lassen Sie uns weiterhin die Implementierung der WY -Bildvorschau untersuchen. Der erste Schritt ist, wie im obigen Code gezeigt, der Hörer das Änderungsanfall von FileInput erwischt, antwortet und ruft die Funktion InsertFiles auf
restoReSection (); if (this.type === 'Datei' && this.files && this.length.length> 0) {InsertFiles (this.files);} saveSelection (); his.value = '';Finden Sie die Funktion InsertFiles
InsertFiles = Funktion (Dateien) {editor.focus (); $ .each (Dateien, Funktion (idx, FileInfo) {if (/^image//.test(fileinfo.type)) {$ .When (readFileInToDataurl (FileInfo)). Done (function (function (dataurl) {execcommand ('Inssertimage', dataurl); Optionen.FileUploadError ("Dateileser", e); }Wir haben festgestellt, dass die $ .Deferred () -Methode von JQuery verwendet wird, die zuerst als ReadFileIntodataurl-Methode bezeichnet wird, und gibt das Bild dann erfolgreich in das Textfeld über die selbstkapselige Execcommand-Methode aus. Dieses Bild ist eigentlich ein <img> Tag, aber das SRC -Attribut ist ein Bild, das durch eine Zeichenfolge dargestellt wird. Wir müssen also die Datei tatsächlich hochladen, nachdem der Hörer ausgelöst wurde, die SRC des Bildes erhalten und dann den Link zur nachfolgenden Execcommand -Methode übergeben.
Da der Autor nicht sehr mit verschobenen Menschen vertraut ist, verwendet er immer noch den allgemeineren Rückrufmodus
Beobachten Sie die Anrufmethode von AjaxFileUpload:
$ .ajaxFileUpload ({url: ..., SecureUrl: false, FileElementId: ..., Datentyp: "JSON", Erfolg: Funktion (obj) {...}, Fehler: function () {...}});Es gibt zwei erforderliche Eigenschaften, URL und FileElementID. Um die Richtigkeit der Abhängigkeit aufrechtzuerhalten, ist es nicht ratsam, AjaxFileUpload neu zu schreiben. Da die WY -Kontrolle jedoch von einem Hörer implementiert wird, ist es unrealistisch, Parameter durch Funktionen zu übergeben. Daher müssen wir einige Eigenschaften für den Eingabefeld selbst definieren, um unser Ziel zu erreichen.
Fügen Sie einige Eigenschaften in FileInput hinzu
<input type = "Datei" id = "pictInput" name = "bild" data-role = "Magic-Overlay" data-target = "#pictBETN" data-edit = "InsertImage" Action = "..." />
Die ID wird als FileElementID verwendet, und das Namensattribut ist auch erforderlich, hauptsächlich für die Auswahl der Hintergrundwert. Die Aktion ist die URL, an die das Bild übermittelt werden muss.
Definieren Sie eine Funktion in Bootstrap-wysiwyg.js, die als UploadFiletoServer bezeichnet werden. Das Funktionsformat lautet wie folgt:
var uploadFileToServer = function(id, action, callback) { $.ajaxFileUpload({ url : action, secureurl : false, fileElementId : id, dataType : 'json', success : function(obj) { if (obj.status) { callback(obj.imgsrc); } else options.fileUploadError("server-internal-exception", obj.message);Schreiben Sie die Methode InsertFiles wie folgt neu:
InsertFiles = Funktion (Dateien, ID, Aktion) {editor.focus (); $ .each (Dateien, Funktion (IDX, FileInfo) {if (/^image//.test(FileInfo.type)) {/ * * $ .Wen (ReadFileIntodataurl (FileInfo)). Done (function (dataurl) { * execommand ('Einfügung', dataurl).}). Optionen.FileUploadError ("Dateileser", e);Nehmen Sie den Hörer gleichzeitig bestimmte Änderungen vor, um die erforderlichen Attribute zu erhalten
ToolBar.find ('input [type = file] [data-' + options.commandrole + ']') .Change (function () {restoRectionEction (); if (this.type === 'Datei' && this.files && this.files.Length> 0) {ids.Files ($). SaveSelection ();Hauptsächlich wurden zwei Parameterpositionen hinzugefügt.
Auf diese Weise ist das Umschreiben vollständig. Beachten Sie , dass die korrekte Ausführung vor der Steuerung vor der Kontrolle unter AjaxFileUpload.js erhalten.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.