You are here: Open Source Flash » Flash TextArea

 

Flash TextArea

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 (x)html 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).

How to use

FlashTA comes with 4 files:

  • FlashTA.swf (the editor itself)
  • FlashFB.swf (the external file browser)
  • fTAR.js (the javascript used to replace text areas with the flash editor)
  • fileManager.php (script used for image & link management)

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>

also, you need to “mark” by adding the “textareaReplace” attribute with a value of “true” each textarea you want to be replaced:

<textarea name="nameOfThisField" textareaReplace="true" ></textarea>

Configuration

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

fTAR.setFilemanager("fileManager.php");
fTAR.setBaseURL("http://localhost");
fTAR.setButtons(0x1ffff);
fTAR.setBackColor("#E9EBEE");
fTAR.setup("FlashTA.swf", "FlashFB.swf", true);
Explanation

fTAR.setFilemanager(filemanager); fTAR.setBaseURL(baseImagePath); fTAR.setButtons(buttons); fTAR.setBackColor(backgroundColor); fTAR.setup( editor, filebrowser, autoUpdate);

Parameters:

  • editor: path/name of the editor flash file. If you stored the editor on a folder called “flashEditor”, and the page that will use it is on the same level as the folder, the first parameter should be changed like: “flashEditor/FlashTA.swf”
  • filebrowser: path/name of the editor flash file. If you stored the editor on a folder called “flashEditor”, and the page that will use it is on the same level as the folder, the first parameter should be changed like: “flashEditor/FlashFB.swf” 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 attribute “browse” with the value “all” to enable that field to browse all files, or with the value “images” to enable the field to browse for images only. Of course, for this you need a working fileManager.php already configured.
  • autoUpdate: Used to issue an auto update of the flash player. Flash player from version 6.0.65 can update itself automatically, so if you set this value to “true” (the default one), the editor will check for the correct flash version and update it as needed.
  • filemanager: path/name of the php file. This file is used by the file browser and the image browser. If you don´t want the user to insert images and/or make links that points to files on your server (more on this later) or if you don´t have PHP enabled in your server, you should empty this parameter (”“).
  • baseImagePath: Used to prefix links & images (for example, if you want your links or images be absolute instead of relative to the current document)

If you want to also use the filemanager, you should also configure the file “fileManager.php”. You should change the $startPath ($startPath = ‘c:/AppServ/www/’;) to the folder on your site that will hold the images/files accesibles by the editor. This is a disk path, not an URL.

  • buttons: a number that indicates what buttons should be enabled in the editor. Each bit of the number correspond to one button. For example, to the bold button corresponds the first bit, to the underline button the third bit, and so on.

Here you have a table of correspondences:

BOLD:1		ITALIC:2	UNDERLINE:4	ALIGNLEFT:8
ALIGNCENTER:16	ALIGNRIGHT:32	ALIGNJUSTIFY:64
HEADER1:128	HEADER2:256	HEADER3:512	HEADER4:1024
HEADER5:2048	HEADER6:4096	BULLETS:8192	QUOTES:16384
LINKS:32768	IMAGES:65536

If you don´t want to remember each bit, you can just use as following as a parameter:

fTAR.BOLD || fTAR.ITALIC || fTAR.UNDERLINE || fTAR.LINKS

to enable only the bold, italic, underline and links buttons.

  • backgroundColor: the background color used in the editor/filebrowser.

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

For programmers

If you don´t have PHP, but have enought knowledge of other language (ASP, JSP), here you have a little description of what the file “fileManager.php” do:

  1. While browsing the disk, flash calls the file sending the follwing variables via POST:
    • action = getFileList
    • path = path from where start listing
    • images = true|false

action is used to recognize other commands (uploadFile, createDir, deleteFile) images is a boolean value used to list only images (true) or all files (false).

The file returns via POST a list of items in the following format: name#=name of the file&kind#=filetype[&size#=size of the file]&[next file]

Where # is a number that goes from 0 to the number of items listed-1 filetype could be: folder|sound|image|video|generic

  • files that falls under the sound category: wav,mp3,ogg,mid,aif,aiff
  • files that falls under the image category: jpg,jpeg,png,gif
  • files that falls under the video category: avi,mpg,qt
  • any other file: generic

for example, a valid return could be:

name0=HtmlEditor&kind0=folder&name1=javascript_cheat_sheet.png&kind1=image&size1=94582&name2=Test&kind2=folder&name3=mysql_cheat_sheet.png&kind3=image&size3=107543&name4=no_image.jpg&kind4=image&size4=5998
  1. To upload files, flash calls the file sending the following variables via GET (url query):
    • action = uploadFile
    • path = path_where_the_file_will_be_uploaded

Then the file is sent using the encoding type “multipart/form-data”

  1. Currently not supported but planned are the following commands:
    • createDir (action=createDir, path=path_where_the_dir_will_be_created, name=name_of_the_dir)
    • deleteFile (action=deleteFile, file=file_to_be_deleted - full path to the file). Recursive deleting will not be allowed.

All paths are relative to the one configured in the file.

Known bugs and limitations

  • You can´t overlay the editor with the filebrowser (this is a browser issue).
  • Sometimes in the editor, after you insert an image, the cursor changes to a small caret, and all text inserted at that place will look like a bunch of dots. This is a known issue of the player (at least it´s known by my... bug already reported to Macromedia). The text is in there and if you submit the data, the text will be in their place.

Links

Files

Misc

Roadmap

Current version : 1.11

Version 1.2

  • Add more features
    • big, small, cite, code, hr
    • sup and sub?
    • ???

History

(* fixed, + added, - removed)

1.11 * Fixed some small bugs. * Ported to use MM components. Now you can compile it without missing any library.

1.1 + Added a “delete” button in the insert image window. * Buttons config now works as expected. * Fixed some problems with unicode chars under Opera 8.5+ - Removed the scrollbar - Now the editor resizes itself as needed.

1.0 - First launch

Licence

FlashTA is released under the GNU GPL Licence

flashtextarea.txt · Last modified: 2006/07/22 19:51 by juananorga