Mozilla editable document. delete/backspace

iceboxqs · 06-08-2004, 04:57 PM

Hello,

I'm not quite sure where to post this on these forms but here we go . . . .

I'm using Mozilla 1.7 and have an editable document in a frame for a web page of mine. The best way to explain this, I think, is with an example.

In my editable document (document.body). I have some content that a user can edit:

Code:

Html view:

This is a formatting test.
Oh such formatting we can do!

Code view:

<div>This is a formatting test.</div>
<div>Oh such formatting we can do!</div>

If the user puts the cursor at the end of the first line like so:

Code:

Html View:

This is a formatting test.|<-----[cursor]
Oh such formatting we can do!

And they press backspace this is what the editor does:

Code:

Code view:

<>This is a formatting test. Oh such formatting we can do!</>

Needless to say this is not what I was hoping for. It does this for both div and p tags.

The current way I deal with this is search the document for <> when the delete or backspace key is hit. Obviously that is a bad work around. Is there a better way of dealing with this?

Thanks for your time.

iceboxqs · 06-08-2004, 06:10 PM

I'm guessing what the mozilla editor is doing is a bug.

Here is what I am doing to fix the problem.

On a delete or backspace keyup event I get the currently focused node and check it and its parent to see if they are blank nodes. Like so . . . .

Code:

tmpNode = this.edit.selection.focusNode;
if(tmpNode.nodeName = "")
{
  //fix tmpNode
}

if(tmpNode.parentNode.nodeName = "")
{
  //fix tmpNode parent
}

If I the node or parent node is a blank node I then create a new div node

Code:

newNode = document.createElement('div');

Toss the blank node contents into the new div node

Code:

newNode.innerHTML = theNode.innerHTML;

And finally I replace the blank node with the new node.

Code:

pNode = theNode.parentNode;
pNode.replaceChild(newNode, theNode);

This works pretty well. Though, if this is a bug I hope they fix mozillas editor soon.