Wysiwyg Html Editors

[iamnotwhoisayiam]

Hi there...

I'm looking for some info on WYSIWYG html editors. Not where i can get one or anything but how they work ie How they create a html document from what we see on screen to the html code.

If anyone knows of any good linkis (or source code for that matter) please get back to me.

Thanks

--WeeJames :fun:

[Quboid]

The source code for that would be looooong... This is a seriously huge question, which belongs in the programming section.

[Tim Dorr Veteran]

and moved it is!

building a WYSIWYG editor is quite a task, because of the layout issues and rendering stuff like that in the GDI context (although you could be 1337 and use a DirectX-based interface :p ). I'd look into lots of stuff from www.w3c.org about layouts and the standards. Try to build your editor around the standards and i think you'll have a shot at it being VERY popular!

Good luck! :D

[E3L]

lol @ 1337 DirectX-based interface ;)

[iamnotwhoisayiam]

Heh heh.. unfortunately due to Supervisor requirements my program is going to be programmed in Java. Its going to be part of my final year project at Glagow University, my supervisor is intent on getting my to program a WYSIWYG web designer for incorporating CSS and XHTML into documents.

Should be a barrel of fun, but thats why i was looking for information on how WYSYWIG editors do their thing.

--WeeJames :x

[Gumboot]

OK, this is a big question, but I'll give it a shot.

Basic definitions

An XHTML document is based on XML, so it has the same basic structure: a tree of nodes, where each node is either an element or a piece of text (ie. a string). An element has a name, a list of attributes (name/value pairs) and a list of child nodes.

Parsing

Parsing an XHTML document is pretty straight forward; it's the same as parsing an XML document. So either read the spec and implement your own parser or use an existing XML parser. One thing to note is that it makes things easier if you split text nodes into words (so each text node is non-breakable).

Rendering

Once you've parsed a document, you need to be able to render it. The way I would recommend would be:

documentRootNode.Render(styles);

The styles variable contains state that must be carried over from one node to the next and inherited by child nodes. That means: current position, font, font size, background colour, text alignment, etc. In short, all the CSS properties.

The default implementation of the Render() method would simply render all the child nodes.

Text nodes are more complicated:

1. Calculate the rectangle that surrounds the text.

2. Check if the text will overflow the boundaries of the parent node, if it does, force a new line (move the current position to the next line).

3. Draw the text, using the current font styles, background colour, etc.

4. Update the current position.

Formatting elements are really easy:

class BoldElement : Element
{
  public void Render(StyleSet styles) {
    styles.fontWeight = BOLD;
    super.Render(styles);
  }
}

Text alignment makes things harder, since you have to lay out a line at a time. I'll leave this as an exercise for you... :D

Editing

OK, if you've done all the above, you should have a basic XHTML viewer. So what about editing? Well, it's not much different. You'll need a current selection, which consists of a start and end position (an XML position is a node and a character offset). If the start and end positions are the same, you have a caret. If the user enters text, you delete the current selection and replace it with the entered text. The arrow keys move the selection, etc, etc.

But, you say, every time the user presses a key, I'll have to redraw the whole document! Well, yes. But there's a way around that. For each node, store a reference to another node that this node depends on. Now to draw the document, do the following:

1. Draw the modified node.

2. Determine the node (or nodes) that depends on the modified node.

3. Draw the dependant node.

4. Check if the dependant node actually changed, if it did, then go to step 2.

Interesting topic! :happy: Hope all this rambling helped you in some way... :)

[iamnotwhoisayiam]

Thanks for the info.. its given me a good idea about where to go with my project.

Your rambling has definately been a lot of use :D

Keep an eye out for the final thing around march/april time ;)

--WeeJames :laugh: