View Full Version : DOM compliant rich text editor?

06-09-2004, 03:14 AM
is it possible?

I've pretty much resigned myself to the fact that without designmode you can't do much...
Unless you can add rich text styles to text areas... but is it possible?

06-09-2004, 03:43 AM
Oh it's very possible. Many years ago I wrote an RTE that functioned in NS4. That certainly didn't have RTE-features builtin, you had to capture each keypress and document.write() it in. It wouldn't be too difficult to do this with pure DOM... but one must ask why when we already have designmode and contenteditable?

06-09-2004, 07:12 AM
You made a rich text editor for NN4.. :thumbsup:
I'm glad you're on these forums :D

About designMode and contentEditable...
They are browser specifc, and won't work in opera. I am trying for a truly x-browser editor. Something that Will also write valid XHTML and CSS. I expected it to be tough but hit some dead ends along the way. Up until just now I'd thought it was impossible.

Yet you say it's doable, I'm inclined to believe you, and my hopes are up again :)

This is my thought process on this whole thing.
I can't use designMode, opera doesn't support it. So using an iframe or such is not an option. Because of this I'm thinking I have to use a textarea. Ok, now, I know you can add a CSS declaration to the textarea and style the text, but to my knowledge you can't do this dynamically and you can't do this to only user selected text. Like for example bolding the third word in the textarea will produce runtime errors.

So, how would I go about starting this.
I am well enough versed in Javascript to understand the concepts of functions, arrays, var, objects, event handlers etc.. I'm not new to javascript, but I'm also not an expert in it.
Would you lend me a hand and help me get started in the right direction.
I've been reading on using the range object, it seems up to the challenge, but if it turns out I can't add styles to a text area then it's all over before I've even started.
Unless of course you think I could use some other type of editor interface...?

I'm open to all ideas and theories, this is something I want to build...

Thanks :)

06-09-2004, 08:18 AM
Well, the basic premise is simple. Take a <div>, attach some keyboard handlers. If the key is a letter, div.innerHTML += thekey (or div.childNodes[sometextnodeoffset].nodeValue += thekey to be completely DOM-correct). Otherwise, if it is enter, insert a <br> (or <p>), or an arrow, remove <img src="caret.gif"/> and place it whereever. It's not considerably complicated, but it's lots of code... I wish I could just post my old NS4 code and say go at it, but you know how computers and Win95 got along...

Anyhoo, a better workaround I think would actually be just to tie a <textarea> to a <div>. In the textarea, allow BBCode or something, and write a BBCode2HTML() parser. Then you can just be like <textarea onkeypress="thediv.innerHTML = BBCode2HTML(this.value)">. This has the advantages of not relying upon Javascript to be functional (still having the textarea), being very simple to implement, and less cross-browser discrepancies.

06-09-2004, 08:56 AM
Hmm..yes, I guess I could use a div and do what you've proposed.. but like you said it's a lot of work. I had thought of using a text area and bbcode, but I decided againts it because I want any amature to be able to use this editor without having to learn how to use bbcode. I want to make this as easy as using MS word, the catch is I also want this editor to write valid code and work across multiple browsers.

Your idea of using a div sounds like the best approach right now :) thanks.

I can only imagine how difficult this is going to be though.. already I see in my mind tens of functions with more on the way.

hmm..then again I already have a bbcode2html php parser built.. maybe I should just use a simple text area with bbcode.....at least this way I can pretty much concentrate on the editor and not so much on x-browser javascript code.

Well, thank you kjd :)
I'm leaning towards a bbcode editor now rather than a rich text editor..
It would have been nice to build a rich text editor, but the work involved is more than I can handle. I just don't have that much free time... but I think I'll keep this in the vault for a project later on... :D

Thanks again, your help and advice is greatly appreciated :)

06-09-2004, 05:13 PM

I have an editable document and I need to have the cursor placed inside of a specific div node in the document after doing a replaceChild.

For example:

Html view:

Here we have some content.
I want to place the cursor at the beginning of this node.
This is the last line.

Code View:

<div>Here we have some content.<br>I want to place the cursor at the beginning of this node.</div>
<div>This is the last line.</div>

I want to change the above content to this:

Html view:
Here we have some content.
I want to place the cursor at the beginning of this node.
This is the last line.

Code view:

<div>Here we have some content.</div>
<div>I want to place the cursor at the beginning of this node.</div>
<div>This is the last line.</div>

No problem I can get mozilla to do that. However once it is finished it puts the cursor right here:

Code view:

<div>Here we have some content.</div>
[curosr is here!]<div>I want to place the cursor at the beginning of this node.</div>
<div>This is the last line.</div>

I need the cursor to be here:

Code view:

<div>Here we have some content.</div>
<div>[cursor needs to be here!]I want to place the cursor at the beginning of this node.</div>
<div>This is the last line.</div>

The user can fix this by moving the cursor up or down one line and then moving back to the line that was replaced and then mozilla places the cursor inside the div. I need mozilla to put it in there right after the replace.

I have this working with IE but I can't find a way to get it to work with mozilla.

Anyone know? Or have some ideas?

06-09-2004, 07:48 PM
Ok I am very upset at myself for this one, heh. It is done pretty much the same way in IE.

This is for mozilla.

The problem in the post above is the caret was being placed outside the div tag after I did a replaceChild. Here is how I get it back into the div.

Here I am breaking up one div into two divs. Simulates a return or <br>.
newDiv1 and newDiv2 are obviously the new divs. tmpNode is the single div I am replacing.

newNode = pNode.insertBefore(newDiv1,tmpNode);

I had to grab the next sibling because newNode is the node just before the one I want the caret in.

newNode = newNode.nextSibling;

Then I make my range. And select the node I want to be inside.

range = document.createRange();

Finally I create a selection add it to the range and collapse it on the node
I want to be inside. This places the caret inside that node.

sel = document.getSelection();

Someone have a better way of doing this? Hah, it feels like a duct tape/paperclip work around.

06-10-2004, 04:52 AM
Thanks for mentioning it, I might find this useful in the future if I go through with jkd's div editor idea.