enclose selection with html?

[Thomas -Balu- Walter]

Hello everyone,

first my question in short - I am looking for a working replacement
of the following function for Mozilla (this was written for IE):

// encloses the selected area into starting and closing tag
// if no closing tag is given the starting tag will replace the selection
function encloseSelection(startingTag, closingTag)
{
editRange = editArea.document.selection.createRange();

if (closingTag) {
editRange.pasteHTML(startingTag+editRange.htmlText +closingTag);
return;
}

//editRange.collapse(false); // move insertion point to end of text range (append tag)
editRange.pasteHTML(startingTag); // replace selection with startingTag
}

Longer version:
I am working on making an older "WYSIWYMG"-editor (written for IE)
Mozilla-compatible. Everything works fine so far, but I am not able
to figure out a solution to the above problem.

I'd like to enclose a selected text in one of the famous
"designMode=on" iframes with HTML-strings. I've tried numerous
ways - by now without luck.

Perhaps anyone here has a solution or hint that can help me?

Balu

[Paul R]

See the answers to the thread "Making a MS jscript ECMA/DOM compliant" a
little earlier and http://www.mozilla.org/editor/ie2midas.html

[Thomas -Balu- Walter]

Hello Paul,

* Paul R <no*********@email.address>:

See the answers to the thread "Making a MS jscript ECMA/DOM compliant" a
little earlier and http://www.mozilla.org/editor/ie2midas.html

None of those helped :-(. Migrating most of the editor functionality
was not too difficult - especially with the help from the ie2midas
document, but I am not able to figure out how to solve the problem I
described in my last post.

The thread you mention is describing how to do things in a textarea
(which has a .value, etc.). I've seen other examples like that, but
was not able to modify them so that it'll work with an editable
iframe. I guess the textarea is a lot easier, because you don't have to
watch for nodetypes, etc. - everything in there is text?

The midasdemo itself has a function to replace the selection with a
different node (or insert it, if nothing is selected) -
"insertNodeAtSelection()", but I am stuck there too as my task to
enclose it and not replace it. I also need to be able to simply put
html around it - I don't have a "node", but only HTML (I know there
is createContextualFragment() - but that did not help me either by
now).

Perhaps I am just not seeing the light anymore since I am working
too long on this.

Balu

[Paul R]

A little to my surprise, the following appears to work:

function encloseSelectionMoz(startingTag, closingTag)
{
var r;
var editorWin = document.getElementById("editarea").contentWindow;
var editorDoc = editorWin.document;

try{ r = editorWin.getSelection().getRangeAt(0);}
catch(e)
{
alert("no selection!");
return 0;
}

// can't use r.surroundContents(); mozilla bug #135928

var frag = r.extractContents();
// rough and ready extraction of tag name! :
var newnode = editorDoc.createElement(startingTag.substring(1,
startingTag.length - 1));
r.insertNode(newnode);
newnode.appendChild(frag);
}

The Gecko DOM Reference at
http://www.mozilla.org/docs/dom/domr..._shortTOC.html has some more
information on ranges.

[Thomas -Balu- Walter]

Thanks Paul,

* Paul R <no*********@email.address>:

A little to my surprise, the following appears to work:

function encloseSelectionMoz(startingTag, closingTag)
{ .... }
Looks great, but you are not using closingTag anywhere :-). Also my
problem is not to add a HTML tag around the selection, but a HTML
"phrase" - e.g.

<span style="color: #f00;">&lt;!-- if --&gt;</span>
SELECTION
<span style="color: #f00;">&lt;!-- /if --&gt;</span>

This <!-- if --> is some kind of marker or makro for the parser of
the edited text. And those markers are marked red, so the user
can see them more easily...
The Gecko DOM Reference at
http://www.mozilla.org/docs/dom/domr..._shortTOC.html has some more
information on ranges.

This is my browsers homepage for the last 3-4 days, but I'll
probably don't get it anymore. After this time my brain just is
overloaded with ranges, selections, nodes, etc. :-]

I hope that this discussion will help me get my knowledge sorted
again...

Balu

[Paul R]

You don't want to make life easy for yourself do you? :-)

No, I didn't polish this example; besides if you're using the DOM to add
nodes to a document, one would hope the end tag is the same as the start
tag!

But then you have a slightly different meaning for "enclosing the
selection". What you want to do in DOM terms is insert a node (SPAN
containing text) before and insert a node (another SPAN containing text)
after some content.

That means something like:
n = doc.createElement("span");
n.setAttribute("color", "#f00");
n.appendChild(doc.createTextNode("<!-- if -->"));
rng.insertNode(n);
rng.collapse(false);
n = doc.createElement("span");
n.setAttribute("color", "#f00");
n.appendChild(doc.createTextNode("<!-- /if -->"));
rng.insertNode(n);

I haven't tested this, but it's what I'd expect it to look like. Try not
to think about adding "text". If Mozilla were a text editor, it would
say so on the box ;-)

[Thomas -Balu- Walter]

* Paul R <no*********@email.address>:

You don't want to make life easy for yourself do you? :-)
Probably a little, but it's really more that I simply "don't get it
anymore" after 4 days of puzzling around and trying all kinds of
methods.
No, I didn't polish this example; besides if you're using the DOM to add
nodes to a document, one would hope the end tag is the same as the start
tag!
Of course, but as I said the problem is not to enclose the selection
in a new tag, but with HTML texts.
But then you have a slightly different meaning for "enclosing the
selection". What you want to do in DOM terms is insert a node (SPAN
containing text) before and insert a node (another SPAN containing text)
after some content.
Yep - and that was exactly something I'd like to avoid. The
span-if-stuff was the easier example and some of the elements need
to be dynamically created, so it's hard to create the nodes when
everything you have is a HTML string. Because of this I probably
need to use createContextualFragment() which is a Gecko extension to
the ranges interface, but that keeps erroring on me...
That means something like:
n = doc.createElement("span");
n.setAttribute("color", "#f00");
n.appendChild(doc.createTextNode("<!-- if -->"));
rng.insertNode(n);
rng.collapse(false);
n = doc.createElement("span");
n.setAttribute("color", "#f00");
n.appendChild(doc.createTextNode("<!-- /if -->"));
rng.insertNode(n);

I haven't tested this, but it's what I'd expect it to look like. Try not
to think about adding "text". If Mozilla were a text editor, it would
say so on the box ;-)

If I'd knew the elements I need to create, I would have done this
in a similar way. I'd probably have used insertNode() wrong, because
my brain just told me that it adds the new element to the end... But
as I said in my first paragraph - the javascript section of my brain
is just shuffled at the moment :-].

Thanks for your help sorting that stuff again.

Balu