This week, following a message on the mailing list of Made in Flex , I remembered one of the first applications in Flex did two years ago which I set out to retrieve that code, clean of superfluous things and publish it. I leave also a link to a post of mine on the list Flexcoders which explained how to do it, has actually been a lot of people who, from that post, I wrote asking details.
For purists, be warned in advance that there may be things that do not work well, strange code and a thousand stories, is a code that is two years, if ye accounts these days you will see that just two years old Flex2. Yes, I started with the first beta of that version. All I did was create in Flex3 and leave the application to make it look clean operation. If you going to leave me a comment saying that this or that does not work well, you can ahorrárosla.
As a picture is worth a thousand words, here's the example and the source code of the whole project.
All those who at some point it occurred to us to use Flex to create a content management system we've come up with a serious problem in the front: the ideal component to write and update content, RichTextEditor, NO can, by default, insert images, with which practically loses its usefulness. Digging in the help, however, you realize that between the HTML tags supported by the Textarea component is <IMG>, which, a priori, nothing would prevent insert an image. Indeed so, and that this whole article is based / project. An important detail is that the use of images is not well achieved in the Flash Player itself, which if we begin to add and remove images will come a time when all will be unstable and will Textarea strange things.
The project is based on two components, in your text editor and a file browser. From the editor will have an Insert button image that will open a browser to the desktop-style operating system which will show the files you have on the server and can upload and delete. The logic of the browser with the server I deleted the most, leaving only a static XML list the folders and images available. To do well you would do with out a script similar to this but that lists what actually had on a route from your server.
Our text editor
I try to explain how the whole process, but it was quite some time so it's possible I forget some detail.
The idea was to make an advanced editor, with missing features to the original RichTextEditor:
- Insert images.
- Ability to add tabular data (tables not like that).
- Change the background color of the editor, for example, create text in white.
- Delete all text (and images).
- Advanced Editor links.
- Button save text (insert it into your database)
We start to do a RichTextEditor that we take predefined button Add link and add our new buttons. Following the code understand what they do, so we focus on the image that is the subject of the article. First I explain what the button tabular data. It's very simple. If we wanted, in the RichTextEditor, create a table of values with the tab, we could, and that pressing tab would Textarea focus of writing and would, by default, the source selector. To add a button to fix all it does is add a tab character (\ t) in the text, so you will find that as tabular data perfectly. Very useful trick.
Let us go to insert images button. The button, as explained above, open the file browser popup, so that this part we will see in the next section. When in the browser select the image to insert it returns control to the editor and it is this that adds the image. To add the image inserted into the cursor position <IMG> tag with the required parameters. Apparently no more trick, but when you start trying things we realize that yes it has.
For starters, if we keep this RichTextEditor htmltext in the database and then try to recover receive a nasty XML validation error. I want to clarify first of all, that this error happened to me back then, maybe, hopefully, the latest version of Flex you have solved, you save a lot of trouble. The cause of the validation failure was that internally, but your añadieses one tag <img… /> (or <img…> </ img>) valid, the editor will always return <img .. >, Ie the XML without closing, which jumped to reload validation error. To solve this problem we created a method desProcesaTexto that it does is convert all tags <img..> invalid to valid tag, which we have solved the first problem. Using regular expressions is extremely simple.
- ^> ] * ) >/gi; var pattern: RegExp = / <IMG ([^>] *)> / gi;
- pattern, "<IMG $1 ></IMG>" ) ; text = text. replace (pattern, "<IMG $1> </ IMG>");
Second problem. Once you insert an image, how can we remove it or modify it? Here comes the tricky part. The idea, basically, is to add a link to each image so that when you click on it we open a popup that allows us to remove the picture or change its attributes. This creates another drawback. When we want to recover the contents of the textarea to save the database must eliminate these false links added to the user interface, but we do not want to leave when displaying the text. In contrast, when loading the text from the database attributes must process images to add this link and we can operate with them.
- = XML ( "<texto>" +texto+ "</texto>" ) ; var temp: XML = XML ("<text>" + text + "</ text>");
- var Alltags: XMLList;
- ; var item: XML;
- ;allTags= temp.. IMG ; var tempitem: XML; Alltags = temp .. IMG;
- item in allTags ) { for each (item 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 (item, 0);
- }
As seen in the code, bucamos all tags <IMG> and, assuming all previous <A> have a tag, replace the full <A> node by <IMG> and all sorted, easier than it sounds Once you understand the procedure.
To see these features every time we assign the text to the component or every time I recover, we have the following methods:
- getHtmlText ( ) : String { getHtmlText public function (): String {
- this . htmlText ) ; desProcesaTexto return (this. htmlText);
- }
- setHtmlText ( texto: String ) : void { setHtmlText public function (text: String): void {
- =procesaTexto ( texto ) ; This. htmlText = procesaTexto (text);
- }
Not much more to explain. One detail we will see how procesaríamos <IMG> tags when loading a new text in the component. The idea, basically, is to add the link that allows us to change it, but this link needs to know the details of the image (src, width, height ..).
- Alltags = temp .. IMG;
- item in allTags ) { for each (item 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: IMAGE # # | | # # "+ item. @ ID +" # # | | # # "+ item. @ SRC +" # # | | # # "+ item. @ WIDTH +
- + "##||##" +item.@VSPACE+ "##||##" +item.@HSPACE+ "##||##" +item.@ ALIGN + "# # | | # #" + Item. @ HEIGHT + "# # | | # #" + item. @ VSPACE + "# # | | # #" + item. @ HSPACE + "# # | | # #" + item . @ ALIGN +
- ( ) + " \" ID= \" " +idlink. toString ( ) + " \" >" +xlcParent. toXMLString ( ) + "</A>" ; "# # | | # #" + IDlink. ToString () + "\" ID = \ "" + IDlink. ToString () + "\"> "+ xlcParent. ToXMLString () +" </ A> ";
- XML ( nuevoNodo ) , iIndex ) ; xlcParent. setItemAt (XML (aNewNode) iIndex);
- }
Single.
The File Browser
The File Browser is a component rather resultón that if you work a bit, you can solve many tasks. Same as Windows File Explorer, you left a directory tree and right files in the selected folder and its details. Upstairs we have new buttons to upload files and create new folders (the logic of these buttons is up to you) and, above all, a combo to change the way you view files so you can see the list of the same or thumbnails. Yes, you will see a thumbnail image lists thereof, perfect for our editor. I will not hook up more with the operation because the source code is all you need. The interesting event is double click on a file, it returns control to a new window where you can configure the parameters of the image to insert. With the example you'll understand.
In your editor must create the appropriate methods on the server to list folders and files in your uploads directory if you want everything to be dynamic and the user can organize files on your own.
As he had said, I was not as explicit as in the past. If you have any problems do not hesitate to leave a comment and I will try to fix it as soon as possible.
Here's the example and the source code of the whole project.










