views:

2935

answers:

8

Or are there?

From a desktop software developer point of view (as opposed, perhaps, to that of a web developer), rich web application platforms, such as Flash or Silverlight, look like better tools for doing WYSIWYG text editors for the web. They are capable of more sophisticated input/output, data representation etc., and they are consistent through the browsers and platforms (well, maybe not Silverlight and Moonlight yet, but at least Flash seems to be).

Still, the developers prefer to go with Javascript/DOM/HTML/CSS with all their incompatibilities, differences, toiling diligently to work around every particular quirk and using numerous hacks to make these technologies do what they were, perhaps, never originally supposed to be able to do.

There are some generally accepted arguments why you should not use Flash for a website, as well as a generally accepted exception: the embedded video players. How is a rich text editor different? "A flash control lives in it's isolated sandbox" - so, universally, does a WYSIWYG editor; "the text of a flash control can't be indexed by the search engines" - who cares about indexing the ever changing unsaved content of an editor, anyway; "not all users may have Flash installed" - so not all of them may have Javascript enabled, either.

So, here the question goes: what are the advantages of choosing Javascript over Flash for implementing a WYSIWYG editor? What would be the disadvantages of choosing otherwise?

+3  A: 

The main advantages of a JavaScript-implemented RTE editor over Flash ones are:

  • You don't need Flash player to use
  • Most people do not have JavaScript turned off
  • They are generally richer and have better capability
  • Additional features like embedded tables, images and video can be offered
  • They produce HTML output ready to use as web content

Are you looking to build this editor yourself ? Because generally speaking, the choices available for wysiwyg editors in javascript today are pretty darn good. Check for example: fckeditor and tinymce. they are all pretty impressive and improving with each release and can be applied in a wide range of scenarios

There is fairly good support via designmode/contenteditable divs and iframes in most modern browsers for building these things. Flex 3 comes with a merely okay RichTextEditor that'll do the job but isn't all that great.

Scott Evernden
As for HTML they produce - is it really ready? Would an HTML output of an RTE written in, say, IE always be compatible with FF or Opera?
Headcrab
it has thusfar been my experience, using primarily FCKeditor, that its output HTML renders correctly on all current browsers. FCKeditor purports to work even on IE5.5, tho I don't do anything earlier than IE6
Scott Evernden
Headcrab
+1  A: 

For Silverlight take a look at this

http://www.vectorlight.net/controls/rich_textblock.aspx

AnthonyWJones
A: 

The main reason you find most of them on the web in Javascript is mostly economic, most sites that require user textual input (like blogs, forums, or stackoverflow) are built in HTML/Javascript. So when you have capable JS programmers building 99% of the site, why bring in a Flash programmer to build the other 1%.

But that doesn't mean they don't exist! A quick search on one of the more popular stock flash sites revealed 3:

RTE1 | RTE2 | RTE3

And that was just on FlashDen. Search FlashComponents.net or UltraShock.com, or even just google it and I guarantee you that there are many more for sale or for free download.

Bryan Grezeszak
+3  A: 

The main reason (I think) is that there's a ready basis for doing rich HTML editing in the browsers using JavaScript (designMode). This was started by Microsoft in IE 5.5 (as far as I remember) and then picked up by Mozilla/Firefox, then Opera and then Safari. The browser would take care of holding the HTML DOM tree, allowing you to navigate and modify it, etc. You can create a basic (and totally retarded but still) HTML wysiwyg in browser with almost no javascript code. And then you can build features on to of that (what most of the modern javascript wysiwygs have done).

In Flash/Silverlight developer would have to start from scratch and implement all this stuff. And it's difficult to compete in this area with teams at Microsoft/Mozilla/Opera/etc.

Alan Mendelevich
+1  A: 

Technically speaking there is nothing stating you can't perform this task as majority of the basic RTF capabilities - visual that is - are in place. There are limitations however, example being automatic image / text reflow (ie if you assign an image and want text to wrap around it, it's somewhat a case of math + string + regex manipulation. Not easy.

You could also use Silverlight for everything except the Rendered window itself (toolbars etc, which will help with missing icons and provide more finite control over exception handling than JS offers today). As this will enable you to do make use of the WYSIWYG window (which is tapping into really the browser rendering engine itself) and Silverlight for all other needs.

We're looking into how we can enable this functionality in future versions so it's not falling on deaf ears.

Scott Barnes / Rich Platforms Product Manager / Microsoft.

Scott Barnes
A: 

For AS3 here's a pretty good free one.

http://simplistika.com/as3-wysiwyg-rich-text-editor/

Jared
A: 

JavaScript RTE's will become a web standard because contentEditable is in the HTML 5 W3 Specification. The current method for JavaScript RTE's is to set designMode to "on" in the document's attributes. The problem with this, is that the whole document becomes editable, therefor you will find most JavaScript RTE's load the editor through an iFrame, thus allowing the iFrame's document have designMode set to "on" and not the parent document.

A drawback to currently available JavaScript RTE's is how complex it is to modify the user interface for inserting images (if this is important to you). I personally don't care for a lot of the built in intefaces, but supposedly if you spent enough time reading the documentation you could modify it however you want. For an example, look at TinyMCE's insert image feature on their demo, and then fire up WordPress and see how they've modified it. (WordPress uses TinyMCE).

I haven't run any tests, but it just "feels" like typing in an actionscript textarea seems slower. Another problem I'm running into is the ability to add images and move them around in the article. Even in Adobe AIR, supposedly it uses the WebKit rendering engine, so I tried making a RTE using JavaScript, which works fine on the Safari browser (also uses WebKit), but when loading it through AIR it behaves different.

Overall, there are not a lot of really good solutions, this has a lot to do with contentEditable not being an implemented standard in most browsers (yet), and overly complex scripts for the currently available RTE's.

For JavaScript RTE's see:

TinyMCE, FCKEditor (CKEditor), YUI 2's Editor, and there are few others, if you want to roll your own, look for tutorials on execCommand() which basically is the JavaScript method that modifies selected elements or inserts elements into a contentEditable region.

For Flash... I don't know, there aren't a lot of good implementations, even the Flex Text Editor is kinda basic and limited. The main drawback and this is for both platforms, is how easy is it to modify and insert images, because doing basic things like bolding text or italicizing is simple.

SomeFunkyDude
A: 

Mindscape make a WYSIWYG rich text editor for Silverlight here:

http://www.mindscape.co.nz/products/SilverlightElements/controls/HtmlEditor.aspx

traskjd