Flash TextArea

Standards compliant XHTML flash editor.
Introduction

FlashTA is a WYSIWYG replacement text area for HTML forms. While there are various implementations done in javascript, most of them don´t work in this/that browser/OS combo, and every time a browser vendor makes a change, they need to update the editor so it doesn´t break on every possible combination of browsers.

FlashTA tries to overcome that problem by using flash. It also tries to adhere stricty to the XHTML specification. No presentation code is generated (so say bye bye to your idea of selecting text color, font face, etc).

FlashTA features an easy integration and multiple browser support (Mozilla, MSIE, FireFox, Opera & Safari).

Demo

Show me the demo!
Please note that the upload feature is disabled in the demo.

Download

Download the latest version FlashTA.zip

How to use

FlashTA comes with 4 files:

Copy that files where your HTML files resides (or any other folder, it doesn´t matter). You must call the fTAR.js script on any page that will be replacing text areas. The following line in the <head> should do the trick:

<script type="text/javascript" src="fTAR.js"></script>

To tell the script what textareas you want to be replaced, add to them the class “efx_flashtextarea”:

<textarea name="nameOfThisField" class="efx_flashtextarea"></textarea>
Configuration

The editor configuration is handled on the javascript file. For this, you should modify the lines that read:

fTAR.FlashTextArea.setFilemanager('fileManager.php');
fTAR.FlashTextArea.setServerURL('http://localhost');
fTAR.FlashTextArea.useFileBrowser(true);
fTAR.FlashTextArea.setBasePath('');
fTAR.FlashTextArea.setLngFile('lang/en.xml');
fTAR.FlashTextArea.setup('FlashTA.swf', 'FlashFB.swf');

Explanation:

fTAR.setup(editor, filebrowser);

It lets you configure an input field to browse the server for a file. It´s like the normal browse button, but for server side files.

You should add the class “efx_browser” to the input field to enable it to browse all files, or with the class “efx_browser_images” to enable the field to browse for images only. Of course, for this you need a working fileManager.php already configured.

fTAR.FlashTextArea.setFilemanager(path to the fileManager.php file);
This file is used by the file browser and the image browser. Please note that this file is used for file browsing and file uploading.

fTAR.FlashTextArea.setServerURL(serverURL);
URL of the server used to retrieve the images. Directories are allowed here.

fTAR.FlashTextArea.setBasePath(relativePath);
Used to prefix links & images. The final URL of an image/link will be “relativePath/User selected Path/User selected file”.

“serverURL/relativePath/imagename” should point to a valid image. The editor will use that information to retrieve the image from the server.

You will also need to setup the fileManager.php script as following:

fTAR.FlashTextArea.useFileBrowser(true | false);
If you don´t want the filebrowser to be accesible from withing the editor, simply pass false to this function.

fTAR.FlashTextArea.setLngFile(path to language file);
Both the fileBrowser and the editor are localizables through an XML file. If you want to use the editor/browser in your language, take a look at the files in the “lang” folder.

The buttons in the editor can be configured as following:

Also, there are some methods that can be usefull:

fTAR.FlashTextArea.updateContent();
Forces an update of all text areas. Usually, the content of the “browser” textareas is not updated until the user press the submit button.

If you placed the FlashTextArea inside a tabbed UI, you must call this method prior to change the text area visibility. Browsers remove the flash object from the DOM when changing visibility and you will lost all the changes made.

fTAR.FlashTextArea.getChangedAreas();
Returns “false” if no textareas were changed, or an array of the changed textareas.

fTAR.FlashTextArea.hasChanged(areaName);
Returns true if the area named “areaName” was changed, false if not.

There are also a bunch of CSS styles that you can play with. Take a look at the source code.

Known bugs and limitations:
History (* fixed/changed, + added, – removed)

See the complete project at OSFlash/FlashTextArea

  1. HI Marcelo,

    at first i would like to appreciate your great editor, it is amazing. Than i like to
    ask you if it is possible to use it in my flash application without using javascript.
    What i mean .. I develope flash-based CMS and i necessarily need text editor into it
    without browser/javascript integration. So i wondering it‘s some way how to do
    it.

    Great thanx for reply


    — Daniel    Apr 17, 04:42 PM   

  2. Daniel:
    Yes, it´s indeed possible. You can download the full source code at OSFlash. It should be fairy easy to integrate into any flash application.


    — Marcelo Volmaro    Apr 25, 09:14 AM   

Commenting is closed for this article.