I need you to build a Flex Component in Flash Builder 4 that will allow basic HTML Editing capabilities to be added to an AIR application.
The component should allow me to programmatically load in HTML Text, and then allow the user to edit it in a WYSIWYG editor. I should then be able to get the HTML markup text from the component.
Editing capabilities should include:
Bold, Italic, Underline, Strikethrough
Font Color
Left, Center, Right, Justify
Paragraph Format (Heading 1, Heading 2, Heading 3, etc. The standard HTML format options)
Font Selection. (Just a fixed pulldown of the standard fonts that can be expected on most machines)
Font Size
Bullet List
Numbered List
Quote
Link
Image
The formatting stuff hopefully makes sense and is straightforward.
The Link button should let me set/clear a URL for the selected text, including setting the target. So, probably a popup dialog with a URL field and a pulldown for Target and an Apply button. Should also be a Clear and a Cancel button in the popup.
The Image button is the one that’s a bit more complex.
HTML wise, it just need to insert the image tag/url inline at the current cursor position and let the text flow around it. I do not want/need div’s created.
The user should be able to set the height and width of the inserted image.
The user should be able to select an image previously inserted and delete it.
Here’s the basic flow of how the code will need to work:
I’ll load your component into my application (I’m using Flash Builder 4, so please use Spark components)
I’ll need a set function to be able to set the HTML text of the component
I’ll need a get function to be able to get the HTML text of the component
When the user clicks the Insert Image button, you would need to post an event that I can be listening for.
When I get the event, I’ll take care of letting the user browse the hard drive for an image, and I’ll take care of uploading it to a server.
Once the upload is complete, I’ll have a URL of where the image is on the server
I’ll need a public function in your component to pass in the URL of the image on the server into your component
When you get an image URL passed in, you would then go add in the image tag at the current caret location in the HTML which would then of course display the image within the HTML text in your component.
A user should also be able to select a previous inserted image and delete it. No need for an Edit Image URL capability. If they want to change the image, they can delete it, and then add another one.
There shouldn’t be any limit to the number of images a user could insert into the HTML.
The initial HTML I set after loading the component could have image URL’s already embedded, and they should of course be shown and be deletable.
All source code that will compile without erros or warnings in Flash Builder 4 is required to be delivered at the end of the project.
All code must be Flex. I do not want an embedded javascript solution.
Please let me know if you have any questions.
This should be a straightforward task for someone familier with Flash Builder skills. I.E. I’m not expecting very large bids.