enclose selection with html?

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

re: enclose selection with html?

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

re: enclose selection with html?

Hello Paul,

* Paul R <not.a.valid@email.address>:[color=blue]
> See the answers to the thread "Making a MS jscript ECMA/DOM compliant" a
> little earlier and http://www.mozilla.org/editor/ie2midas.html[/color]

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

re: enclose selection with html?

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.

re: enclose selection with html?

Thanks Paul,

* Paul R <not.a.valid@email.address>:[color=blue]
> A little to my surprise, the following appears to work:
>
> function encloseSelectionMoz(startingTag, closingTag)
> {[/color]
....[color=blue]
> }[/color]

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...
[color=blue]
> The Gecko DOM Reference at
> http://www.mozilla.org/docs/dom/domr..._shortTOC.html has some more
> information on ranges.[/color]

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

re: enclose selection with html?

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 ;-)

re: enclose selection with html?

* Paul R <not.a.valid@email.address>:[color=blue]
> You don't want to make life easy for yourself do you? :-)[/color]

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.
[color=blue]
> 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![/color]

Of course, but as I said the problem is not to enclose the selection
in a new tag, but with HTML texts.
[color=blue]
> 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.[/color]

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...
[color=blue]
> 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 ;-)[/color]

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