VML/SVG Editor in an HTML Page

Question

I have integrated various WYSIWYG HTML editors over the past few years, but I think I have hit a brick wall on this one.

We need a way for people to edit text that turns into VML/SVG when rendered, but remains editable, with minimal styling such as bold, italic, font face and size, and if possible, ability to create a text region anywhere on the canvas. Google Docs has what appears to be one in their presentation editor. Something like that would work ~ its very close to what we are looking for.

Does anyone know of a commercial or free editor that does this (must be browser based), and if not, has anyone approached doing this, and if so, what were your results. Any other info, links, suggestions etc are welcome - I seem to have hit a brick wall on this one.

Thanks.

Answer 1

One important question first: Why specifically should the output of the WYSIWYG editor be in VML/SVG?

===

I am not aware of any existing editor that fits your description. You may have to write one yourself. If you are going to roll your own, I have two suggestions; one of which I am less confident about in terms of capability and one where I am not entirely sure about the performance ramifications because of the sheer amount of libraries involved. Either way, these are the two best bets in my opinion:

1) If you're intent upon VML/SVG, one library I know that can bring the two together is RaphaelJS, which has some degree of text support, but I'm really not sure how sophisticated the degree of manipulation of the text is:

• Raphael JS lib: http://raphaeljs.com/index.html

2) Can you instead use VML/Canvas? I would recommend using VML/Canvas via the exCanvas library (which allows you to write code using the HTML5 canvas element, which is automagically translated to VML in IE/Trident browsers), in addition to the new canvas-text library.

• Generic canvas information (generic drawing api): https://developer.mozilla.org/en/Canvas_tutorial
• exCanvas (IE compatability layer for canvas element) http://excanvas.sourceforge.net/
• canvas-text (text-specific extension to browsers with poor canvas text support): http://ajaxian.com/archives/canvas-text-add-text-functions-to-subpar-canvas-implementations

Answer 2

You might try http://svg-edit.googlecode.com/ though we do not translate to VML (we require IE users to install the Google Chrome Frame plugin).