WYSIWYG flash editor - Released V1.1

WYSIWYG flash editor - Released V1.1

History (* fixed, + added, - removed)
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.

--------------------------------------------------------------------------------------------
Hi all,
At last, version 1 is here. I think the editor is stable enought to make it debut as 1.0
With this version, i´m also including a file browser (mostly because it took no time to build) that lets you browse for files on the server (like the input type file, but for serverside files).
This version WILL NOT WORK on the current version of Opera 9 (TP1) because a bug in opera (already reported). You can send data to the editor, but you can´t retrieve data from it, so it´s almost useless.

How to use:
Read the readme inside the ZIP.

I also included the necessary javascript to make it works, in two forms: compressed and uncompressed. If you don´t want to change anything on the javascript (fix a bug, for example) you can safely delete it.

Requeriments:

• Javascript enabled
• Flash plugin v8

Enjoy it, and if you find any bugs, please report them here.

PD1: I will not add features like font size, color, etc. because that features don´t have any semantical significance.

FlashTA.zip

Demo on-line would be nice...

Sorry... yes...
http://www.extremefx.com.ar/temp
I don´t know why the php part is not working... maybe some server configuration has changed, because it WAS working... (and in my server it works)... but anyways, you can see the editor and what you can do with it.

There seem not to be any icons and so forth. The implementation also seems a bit buggy. Perhaps this is something to do with my version of Flash.

Screen capture

Yes, you need flash 8...

Any chance of backporting it to Flash 7? By the time Macromedia ports Flash 8 to Linux, there'll probably be a Flash 11 for Windows..

and Flash8 is quite unstable on my system, so I'm sticking to Flash7 for some time.

Unstable? In which way? Do you have some example that works in 7 and not in 8?
I can´t back-port it to 7 because i´m using some features only 8 have. And now that i´m almost finished the image insertion, i can say it´s almost impossible to do in 7. (Of course you can insert images in 7, but the player is very buggy at showing embedded images).

Unstable in a way unstable software is - I've installed Flash 8 and it crashes quite often on some pages, where Flash 7 works.

Strange, i never had a problem with 8. I had 8beta installed, and at least all the errors i´ve reported have been fixed in the latest release. Could you please post some links that crashed your browser?
System specs?

Fine work Marcelo!
I have been waiting for this for years !!!

I would like to take this into action immediately in our faculty intranet,
but there seems to be some problems yet:

1) it does not to handle correctly scandinavian characters (äöåÄÖÅ)

2) seems that some of the last formatting are not saved. They are visible as formatting, but when you submit the form there not those tags in the text.

These are worst at first sight.
Then some minor wishes:

1) <hr> (horisontal rule) could be a fine formatting in simple html / rich text

2) Image icon could be now unvisible and later when it works there could be an option to hide it.

3) Link icon could be more clear and contain the traditional chain image

4) ctrl-c ,-v, -x keys work, but windows eqvivalents ctrl-ins, shift-ins, shift-del do not.

It is very good that it does not destroy the existing tags (like <hr> etc.)

No I do not want to criticize but encourage and thank you!!!

eetu

And yet one more:
When I first tried it, I had not Flash 8 and was wandering what this is really...
Is it possible that the (JS?) could test if Flash 8 is installed and if not, it would offer a link to Macromedia download center?
(Most of our users do not have it, I think!)

eetu

epikkara:

1) I know nothing about scandinavian characters, but the editor works in UTF-8, so all available glyphs on that code-page should work (and i think almost all world languages are enclosed - at least the actives one). I´m spanish and i use similar characters (áéíóúñÑü) and it works perfectly. If you could post a list of non-working characters, it will be great.

2) If you are using Opera (and i suppose you are) you have to wait for the "updating" indicator to disappear to get the correct content. It´s an Opera problem and i could not do anything (but wait for the next version).

---

1) The problem with some tags is that flash doesn´t recognize them, and it deletes that tags from the code. To implement unknown tags (like HR - DT - DL - DD, etc) i need to, with the available tags, make something that looks like the unknown tag and then the parser should convert that to the correct one. It´s a hard thing to do (i´m currently doing something similar with the H1-6 and BLOCKQUOTE).

2) I have the image functionality almost working. I have to fix some presentation issues.

3) Changed in my internal build.

4) That keys are handled by the player, not by me. I don´t have control over the clipboard.

As i´ve said, flash automatically deletes unknown tags. I can´t do anything about that.
The JS SHOULD (and i´m saying should because it should ) detect the player version. I will check it again...

Thanks for your comments!

Some reconsiderations

Originally posted by epikkara:

1) it does not to handle correctly scandinavian characters (äöåÄÖÅ)

I can handle this in server side, so it is not a big problem.

Originally posted by epikkara:

2) seems that some of the last formatting are not saved. They are visible as formatting, but when you submit the form there not those tags in the text.

When you write characters the program says "Updating..."
So user must write some character after the formatting command to make formatting stable!

eetu

Marcelo, thanks for reply
I made a simple demo page at: http://wwwedu.oulu.fi/iforum/rte/
Maybe I will make it an unofficial fan page ;-)

I use iHTML as a server side program.
The problem with special characters can be caused by it.
I made the page character set UTF-8:
[meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /]
When I send a character: "ä" (a-umlaut) with normal textarea it goes to server as "%C3%A4"
(You can check this in the bottom of the demo page.)
It is shown correctly in both normal textarea and in flash editor.
But when flash editor Updates the text and then I send it to server it goes there as: "%C3%83%C2%A4"
and after that it is not shown correctly either in normal or flash textarea (it is shown as two special characters).

There is a little similar problem with quotes. If I write normal double quotes in teaxtarea they become HTML entity QUOT and are sent as %26Quot%3B but when Flash editor manipulates them then they become something which is sent as %C3%A2%C2%80%C2%9C and is shown incorrectly as a-circumflex and two boxes.
(My opinion is that html-entities like Quot should not be changed at all.)

Harm that you cannot manipulate the clipboard, because now it copies and pastes text only as plain text without any formatting.

Oh, now I saw that unknown tags are really destroyed (last time I did not wait updating...)
I think it would be a useful option if those unknown tags could stay there.
I tried to encode them by changin the tag opening angle to html entity LT, but it does not work.
In addition I found out that if user wants to write that 1 is smaller that 2: "1 < 2" that will delete all text after lesser than sign when it is reopened in flash editor.
So you should maybe find a way to code LT sign (asc(60)) some way??

One possibility might be to use asc(139) which seems to be some kind of lesser than sign. If I replace all asc(60) characters (in the back end) from the text before it is sent to flash editor, they all stay visible and editable.
(Of course it causes here again that special character / UTF-8 problem!)

(sorry I sent accidentally twice)

Some kind of bugs:

1) editor seems to concatenate paragraphs followin each others (replaces </p><p> with br line break

2) Write a text, say "ii", and format it as italics (<em>ii</em>).
Then add x (two or more) enter-hits between the two i characters and submit.
It creates there correctly a paragraph break but also x - 1 <em /> tags.
(This is not very serious, those strange tags are removed when opened again.)

Some kind of bugs:

1) editor seems to concatenate paragraphs followin each others (replaces </p><p> with


2) Write a text, say "ii", and format it as italics (<em>ii</em>).
Then add x (two or more) enter-hits between the two i characters and submit.
It creates there correctly a paragraph break but also x - 1 <em /> tags.
(This is not very serious, those strange tags are removed when opened again.)

Your problem with the UFT-8 encoding seems to be that the server is not recognizing the encoding, so it´s encoding the text twice.
About the other errors, i will check them and try to correct. Thanks for your feedback!!

epikkara:
I can confirm the < & p to br bugs, but i can´t confirm the problem with the em tag. If i do what you said, i get

<p><em>i</em></p><p><em>i</em></p>

that is correct.
Could you explain it a bit more?

Fine, after all forums are up again.

Marcelo,
Thank you for the new version.
Seems that correction to para break problem made my second problem disappear.

I tried picture upload, and Flash opens a window "Uploading files..." which says "Connecting..." and nothing more happens except in right side of editor screen appeared a text: 88915:"Security error"
Whats still worse - it does not stop! (must ctrl-alt-del...)

[No I could kill it with a kill button from http://nontroppo.org/wiki/PowerButtons ]

[Oh, if this function depends on fileManager.php then it of course cannot work here.]

I very strongly hope that this image function and especially th file upload function would be possible to turn OFF.

eetu

Now it seems to be leave all unknown tags as they are. It is good, BUT:
it would be also usefull if one could force a user to use only
these safe formatting that the editor knows. Now user can add there
opening tags which can distroy the layout of the page where the users'
msg or other text will be shown.

So I hope for these kind of server side settable options:

- any formatting function (especially IMG): ON/OFF

- remove unknown tags: YES/NO
(Perhaps a list of safe tags that are not removed)

- change HTML entities to characters: YES/NO

(Maybe some more...)

thx
eetu

Bug in encoding:
If you write this kind of a text in normal text area:
---------
para1
para2
para3
---------

And then send it to flash text area it will be shown there as:
---------
<<<<<<<<<<<<<para1 para2 para3
---------

And back in normal text area
---------
<p><<<<<<<<<<<<<para1 para2 para3 </p>
---------

The amount of <'s does not seem to depend on amount of linebreaks in original.

I think that it should change one line break in original to a (br /)
and two or more to a paragraph break.

eetu

Marcelo,
When I try to opne my new FTE test page (http://wwwedu.oulu.fi/iforum/fte/)
in IE I get almost similar result as in:
http://my.opera.com/fx910/homes/files/wysiwyg%20editor%20screen%20capture.gif

Although I have once downloaded Flash 8 and it works in Opera.

In FireFox it works OK.

I found out where to update Flash Plugin in IE. Had to stop and start IE after update.

I just want to tell that JS is not yet reporting the Flash version.

eetu

More problems with IE:
If you write in Flash text area:
----------
para
----------

and send it (to normal or flash text area) it will be shown as:
----------
%3Cp%3Epara%3C%2Fp%3E
----------

The above behaviour is same also with FireFox.
Seems that they somehow double code the tag characters?
Is this also UTF problem??
They send < character to the server as: %253C
(Opera send it as %3C)


BUT still WORSE in IE:
Once you have written something in Flash area and then load the page again
the Flash editor will go somehow passive mode. It will not let you write anything,
it only lets you select text with mouse and copy it but not delete or paste.
(or Maybe I should boot the whole computer after plugin installation??)

eetu

The text area is only added so you can see the result of the editor. Is not intended to be in there.
The editor MUST be feeded with well formated xhtml, because it uses a XML parser to render the text. If the text is not well formated, the parser breaks (and that´s the error you see with <<<<).

The change of HTML entities to characters is done by the browser. I have no control over that, and that was the problem with the < character. The browser, instead of sending <p>text <text</p> to flash, was sending <p>text <text</p>. Because that´s a wrong formatted XML (the parser gets crazy about <text because that could be perfectly an open tag) i have to string parse the xml and try to fix that errors.

I will check the explorer problem. Seems that it´s encoding the entities (i don´t know why, because nor Opera nor FF do that). I think that should be fixed server side (url_decode maybe)...

For the image function to works the file fileManagement.php is needed. I will document what information that file should return, so anyone could do the same in ASP, JSP, etc.

1)

Originally posted by Marcelo Volmaro:

The text area is only added so you can see the result of the editor. Is not intended to be in there.
The editor MUST be feeded with well formated xhtml, because it uses a XML parser to render the text. If the text is not well formated, the parser breaks (and that´s the error you see with <<<<).

I understand. I was thinking of a scenario, that editor is implemented in a CMS like system where users have previously added texts with normal textarea or via external HTML editor. And now they want to edit their already existing texts with this new Flash editor. Perhaps one must make a server side parser which cleans the worst problems from the text in these occasions?

2)
IE problem: you cannot use Flash editor twice in same window!!!!
This problem did not disappear with machine boot.
If you open a new IE window and load Flash editor there then you can edit with it, but if you load it again in the same window then it will not let you edit the text?
Do you know about this?

eetu

1)

Originally posted by epikkara:

IE problem: you cannot use Flash editor twice in same window!!!!

I found here a funny workaround: Click link button and then just click Cancel - and then you can edit again!

2) Quote button does not do anything in the new version.

eetu

I tried this piece of software, and it's truly impressive, but I'm encountering a bug: whenever I try and enter a button configuration that is something other than everything, the wrong buttons show up. The first three work consistently, but it's all a mess from there. Even the combination mentioned in the readme doesn't work.

mmm.. i will check it. The last time i´ve checked it, worked...

Additionally, I'm also encountering the same problem others are when it comes to UTF-8 octet-streams. Opera appears to assume the data it gets from Flash is Windows-1252 instead of UTF-8, so it re-encodes each octet in the UTF-8 stream as if it was a Windows-1252 character. How are you sending the data back to Opera? I find it hard to believe it would exhibit a problem like this when IE doesn't.

I´m sending the data as UTF-8.

How, though?

Originally posted by Marcelo Volmaro:

Hi all,
At last, version 1 is here. I think the editor is stable enought to make it debut as 1.0
With this version, i´m also including a file browser (mostly because it took no time to build) that lets you browse for files on the server (like the input type file, but for serverside files).
This version WILL NOT WORK on the current version of Opera 9 (TP1) because a bug in opera (already reported). You can send data to the editor, but you can´t retrieve data from it, so it´s almost useless.

How to use:
Read the readme inside the ZIP.

I also included the necessary javascript to make it works, in two forms: compressed and uncompressed. If you don´t want to change anything on the javascript (fix a bug, for example) you can safely delete it.

Requeriments:

• Javascript enabled
• Flash plugin v8

Enjoy it, and if you find any bugs, please report them here.

PD1: I will not add features like font size, color, etc. because that features don´t have any semantical significance.

FlashTA.zip

What is A to Z for use of this editor?
Who needs this editor?

Flash has two methods (well, three, but the third one only works in IE) to communicate with JS:
The old (which i´m using on all browsers that don´t support the new one) "javascript:execute_js_action(params)" and the new one through the NPR api (found in Opera 9, Firefox and Safari 1.2+).

So, in Opera 8.5 i´m just doing a simple js call, in the same way as you can do on an "a href='javascript:....'". Flash works internally in UTF-8, and all string operations are transparent handled in UTF-8. The line that sets the text reads:

javascript:document.getElementById('" + fn + "').value='" + escape($editor._content) + "'; return false;

Where "fn" is the text field ID, and $editor._content holds the html text. That code is used for both IE and Opera 8.5 and lower (in Opera 9 the editor doesn´t work because a bug in Opera - already reported)

Will this Flash WYSIWYG plugin be fixed anytime soon?

I updated it

This is an old version. Up to date version always available at My web page