Diese Woche, nach einer Meldung auf der Mailing-Liste von Made in Flex , erinnerte ich mich an eine der ersten Anwendungen im Flex vor zwei Jahren, die ich dargelegt, dass Code abzurufen, frei von überflüssigen Dingen und zu veröffentlichen. Ich lasse auch einen Link zu einem Beitrag von mir auf der Liste Flexcoders die, wie es geht erklärt hat tatsächlich eine Menge von Menschen, die von dieser Stelle schrieb ich fragen Details.
Für Puristen im Voraus gewarnt werden, dass es Dinge, die nicht gut funktionieren kann, ist seltsam Code und tausend Geschichten, ein Code, der zwei Jahre, wenn ihr in diesen Tagen Konten, die Sie werden sehen, dass gerade zwei Jahre alt Flex2. Ja, begann ich mit der ersten Beta-Version von dieser Version. Alles, was ich tat, war zu schaffen, in Flex3 und lassen Sie die Anwendung, um es so aussehen sauberen Betrieb. Wenn du mir einen Kommentar zu sagen, dass dieses oder jenes funktioniert nicht gut geht, können Sie ahorrárosla.
Da ein Bild mehr sagt als tausend Worte, hier ist das Beispiel und die Quellcode des gesamten Projekts.
All diejenigen, die es irgendwann zu uns gekommen, Flex verwenden, um ein Content-Management-System, das wir mit einem ernsten Problem in der Front gekommen zu erstellen: die ideale Komponente zu schreiben und Aktualisierung von Inhalten, RichTextEditor, NO kann, wird standardmäßig Bilder einfügen, mit die praktisch verliert seine Nützlichkeit. Graben in der Hilfe, jedoch merkt man, dass zwischen den HTML-Tags durch die TextArea-Komponente unterstützt wird <IMG>, die a priori nichts verhindern ein Bild einfügen würde. In der Tat so, und dass diese ganze Artikel ist / Projekt. Ein wichtiges Detail ist, dass die Verwendung der Bilder ist nicht gut in den Flash Player selbst, die, wenn wir beginnen, Hinzufügen und Entfernen von Bildern eine Zeit kommen wird, wenn alle werden instabil und seltsame Dinge TEXTAREA erreicht.
Das Projekt basiert auf zwei Komponenten, in Ihrem Texteditor und ein Datei-Browser basiert. Von der Redaktion haben eine Schaltfläche Einfügen Bild, das einen Browser auf dem Desktop-style-Betriebssystem, das die Dateien, die Sie auf dem Server und können hochladen und löschen wird geöffnet. Die Logik der Browser mit dem Server Ich löschte die meisten, so dass nur eine statische XML-Liste der Ordner und Bilder zur Verfügung. Um gut tun würden Sie mit ein Skript ähnlich wie diese, aber das, was tatsächlich Listen hatten auf einer Strecke von Ihrem Server zu tun.
Unser Text-Editor
Ich versuche, wie den gesamten Prozess zu erklären, aber es war schon einige Zeit so es möglich ist, vergesse ich etwas ausführlicher.
Die Idee war es, einen erweiterten Editor machen, mit fehlenden Funktionen der ursprünglichen RichTextEditor:
- Einfügen von Bildern.
- Fähigkeit zur tabellarischen Daten hinzufügen (Tische nicht so).
- Ändern Sie die Hintergrundfarbe des Editors, z. B. Text erstellen in weiß.
- Löschen Sie alle Text (und Bildern).
- Erweiterter Editor Links.
- Button-Text speichern (legen Sie sie in Ihrer Datenbank)
Wir starten einen RichTextEditor dass wir vordefinierte Schaltfläche Hinzufügen Link und fügen Sie unsere neue Schaltflächen zu tun. Nach den Code zu verstehen, was sie tun, so dass wir auf dem Bild, die Gegenstand des Artikels ist zu konzentrieren. Zuerst habe ich erklären, was die Taste tabellarische Daten. Es ist sehr einfach. Wenn wir wollten, in der RichTextEditor, erstellen Sie eine Tabelle mit den Werten mit der Registerkarte wir konnten, und dass durch das Drücken Tab würde Textarea des Schreibens konzentrieren und würde in der Standardeinstellung die Quelle Wähler. Um eine Schaltfläche hinzufügen, um alle es tut, zu beheben ist, fügen Sie ein Tabulatorzeichen (\ t) in den Text, so dass Sie als tabellarische Daten perfekt zu finden. Sehr nützlicher Trick.
Laßt uns gehen, um Bilder Schaltfläche einfügen. Der Knopf, wie oben erläutert, öffnen Sie die Datei-Browser Pop-up, so dass dieser Teil werden wir im nächsten Abschnitt sehen. Wenn im Browser wählen Sie das Bild einfügen es gibt die Kontrolle an den Redakteur und es ist diese, die das Bild fügt. Um das Bild in der Cursor-Position <IMG> mit den erforderlichen Parametern eingefügt hinzuzufügen. Offenbar nicht mehr Trick, aber wenn Sie versuchen, Dinge, die wir wissen, dass ja sie hat zu starten.
Für den Anfang, wenn wir diese RichTextEditor htmltext halten in der Datenbank und dann versuchen, sich zu erholen erhalten eine böse XML-Validierung Fehler. Ich möchte zunächst klarstellen, dass dieser Fehler mir damals passiert ist, vielleicht, hoffentlich, die neueste Version von Flex Sie gelöst haben, sparen Sie eine Menge Ärger. Die Ursache für die Validierung Versagen war, dass intern, aber Ihr añadieses ein Tag <img… /> (oder <img…> </ img>) gültig ist, wird der Editor immer zurück <img .. >, Dh die XML ohne Abschluss, die Fehler bei der Validierung laden gesprungen. Zur Lösung dieses Problems haben wir eine Methode desProcesaTexto dass es zu konvertieren alle Tags <img..> ungültig gültig tag, was haben wir das erste Problem gelöst. Verwenden von regulären Ausdrücken ist extrem einfach.
- ^> ] * ) >/gi; var pattern: RegExp = / <IMG ([^>] *)> / gi;
- pattern, "<IMG $1 ></IMG>" ) ; text = Text ersetzen (pattern "<IMG $1> </ IMG>").
Zweites Problem. Wenn Sie ein Bild einfügen, wie können wir sie entfernen oder modifizieren? Kommt der schwierige Teil. Die Idee, im Grunde ist, einen Link zu jedem Bild hinzufügen, so dass, wenn Sie darauf klicken wir ein Popup, das uns, um das Bild zu entfernen oder ändern Sie die Attribute ermöglicht öffnen. Dies schafft einen weiteren Nachteil. Wenn wir auf den Inhalt des textarea die Datenbank speichern wiederherstellen möchten beseitigen müssen diese falschen Links hinzugefügt, um die Benutzeroberfläche, aber wir wollen nicht zu verlassen, wenn die Darstellung des Textes. Im Gegensatz dazu muss beim Laden der Text aus den Datenbank-Attribute bearbeiten Bilder, um diesen Link hinzufügen, und wir können mit ihnen arbeiten.
- = XML ( "<texto>" +texto+ "</texto>" ) ; var Temp: XML = XML ("<text>" + text + "</ text>");
- var Alltags: XMLList;
- ; var Titel: XML;
- ;allTags= temp.. IMG ; var tempitem: XML; Alltags = Temp. .. IMG;
- item in allTags ) { für jede (Artikel in Alltags) {
- XMLListCollection ( item. parent ( ) . parent ( ) . children ( ) ) ; var xlcParent: XMLListCollection = new XMLListCollection (.. item. parent () parent () children ());
- xlcParent. toXMLString ( ) ) ; tempitem = XML (xlcParent. toXMLString ());
- item, 0 ) ; . xlcParent setItemAt (Artikel, 0);
- }
Wie in den Code gesehen, bucamos Alle Tags <IMG> und unter der Annahme, alle bisherigen <A> haben einen Tag, ersetzen Sie das vollständige <A> Knoten <IMG> und alle sortiert, einfacher als es klingt Wenn Sie verstehen, das Verfahren.
Um zu sehen, diese Merkmale jedes Mal weisen wir den Text in der Komponente oder jedes Mal, wenn ich wieder haben wir die folgenden Methoden:
- getHtmlText ( ) : String { getHtmlText public function (): String {
- this . htmlText ) ; desProcesaTexto return (this. htmlText);
- }
- setHtmlText ( texto: String ) : void { setHtmlText public function (text: String): void {
- =procesaTexto ( texto ) ; Diese htmlText = procesaTexto (Text).;
- }
Nicht viel mehr zu erklären. Ein Detail, wir werden sehen, wie procesaríamos <IMG> beim Laden einen neuen Text in der Komponente. Die Idee, im Grunde ist die Verbindung, die wir es ändern können hinzufügen, aber diese Verbindung benötigt, um die Details des Bildes (src, width, height ..) kennen.
- Alltags = Temp. .. IMG;
- item in allTags ) { für jede (Artikel in Alltags) {
- XMLListCollection ( item. parent ( ) . children ( ) ) ; var xlcParent: XMLListCollection = new XMLListCollection (. item. parent () children ());
- = xlcParent. getItemIndex ( item ) ; idlink= Math . round ( ( Math . random ( ) * 100000 ) * ( Math . random ( ) * 100000 ) ) ; var iIndex:.. int = xlcParent getItemIndex (item); IDlink = Math round ((Math. random () * 100000) * (Math. random () * 100000));
- +item.@SRC+ "##||##" +item.@ WIDTH + aNewNode = "<a href = \" event: ". + item @ SRC +". IMAGE # # | | | # # ". + item @ ID +" # # | # # # # | | # # "+ item @ WIDTH +
- + "##||##" +item.@VSPACE+ "##||##" +item.@HSPACE+ "##||##" +item.@ ALIGN + "# # | | # #". + Artikel @ HÖHE + "# # | | # #". + Item @ VSPACE + "# # | | # #". + Item @ HSPACE + "# # | | # #" + Artikel . @ ALIGN +
- ( ) + " \" ID= \" " +idlink. toString ( ) + " \" >" +xlcParent. toXMLString ( ) + "</A>" ; "# # | | # #" + IDlink ToString () + "\" ID = \ "" + IDlink ToString () +. "\"> "+ XlcParent ToXMLString () +" </ A> "..
- XML ( nuevoNodo ) , iIndex ) ; . xlcParent setItemAt (XML (aNewNode) iIndex);
- }
Einzel.
Der Datei-Browser
Der Dateibrowser ist eine Komponente eher resultón, dass, wenn man ein bisschen arbeiten, können Sie viele Aufgaben zu lösen. Gleich wie Windows File Explorer, linken Seite einen Verzeichnisbaum und rechts Dateien im ausgewählten Ordner und dessen Details. Im Obergeschoss haben wir neue Schaltflächen, um Dateien hochzuladen und neue Ordner erstellen (die Logik dieser Tasten ist bis zu Ihnen), und vor allem, eine Combo, die, wie Sie Dateien anzeigen, so dass Sie die Liste von der gleichen oder Thumbnails sehen ändern. Ja, sehen Sie eine Miniaturansicht listet davon, perfekt für unser Redakteur. Ich werde nicht mehr hook up mit dem Betrieb, weil der Quellcode ist alles was Sie brauchen. Die interessante Veranstaltung Doppelklick auf eine Datei klicken, gibt er die Kontrolle in neuem Fenster, wo Sie die Parameter des Bildes einfügen konfigurieren können. Mit dem Beispiel werden Sie verstehen.
In Ihrem Editor erstellen müssen die entsprechenden Methoden auf dem Server auf Ordner und Dateien in Ihrem Verzeichnis Uploads Liste, wenn Sie alles dynamisch sein und der Benutzer kann Dateien auf dem eigenen organisieren wollen.
Als er gesagt hatte, war ich nicht so explizit wie in der Vergangenheit. Wenn Sie irgendwelche Probleme haben, zögern Sie nicht, einen Kommentar hinterlassen und ich werde versuchen, es so bald wie möglich zu beheben.
Hier ist das Beispiel und die Quellcode des gesamten Projekts.










