Reading surrounding UBB tags in textarea selection

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

dennis.sprengers@gmail.com - 27 Feb 2007 21:16 GMT

Ik ben bezig met een eigen UBB editor. Als iemand aan het typen is,
zorgt CTRL-B voor een \[b]-tag en nogmaals CTRL-B voor een \[/b] tag.
Als je eerst een selectie maakt en dan CTRL-B drukt, wordt de selectie
ingesloten door \[b] en \[/b], net als hier op GoT.

Wat ik nu probeer is, om de B-knop uit de toolbar te laten oplichten
als de cursor op een woord staat dat omgeven is door B-tags:

I'm trying to write my own UBB editor. If a user types CTRL-B, a [b]
tag is inserted into the textarea. CTRL-B again inserts [/b]. If CTRL-
B is pressed while text is selected, the selection is captured between
[b] and [/b] tags.

What I'm trying now, is to enlighten the "B" button in the toolbar,
whenever the cursor is captured between [b] tags. If the cursor is
captured between [b] and [u] tags, both these buttons should lighten
up. In the example the cursor is stading over the word "bold":

+---+ +---+ +---+

| B*| | U | | I |

+---+ +---+ +---+
+-----------------------------------------------+

+-----------------------------------------------+

In short, it's the same toolbar behaviour as we all know it from, i.e.
Microsoft Word.

If the editor were an iframe, I could do something like (taken from
widgEditor source)
[code=js]
theSelection =
theWidgEditor.theIframe.contentWindow.document.selection;
theRange = theSelection.createRange();
theParentNode = theRange.parentElement();

switch (theParentNode.nodeName.toLowerCase()) {
case "a":
theWidgEditor.theToolbar.setState("Link", "on");
break;
}
[/code]
But alas, it's a textarea we're dealing with and the tags are not HTML
but UBB, and can therefore not be found in the DOM. I have once
created a function which would remove the html bold tags from a
selection, if the selection was already bold and another "bold"
command would be given:

function selection_replace(type, text) {
switch (type) {
case 'bold':
var re = new RegExp('^<b[^>]*>(.*?)</b>$');
text = (!re.test(text)) ? '<b>'+ text +'</b>' : text.replace(re,
'$1');
break;
}
}

Perhaps part of the solution is here, although I don't think so
because I foresee problems when multiple tags are surrounding a
selection or cursor. Who could help me write a funcion that detects
which UBB tags the cursor in a textarea is captured between?

Your help would be greatly appreciated!

Reply to this Message

dennis.sprengers@gmail.com - 28 Feb 2007 12:28 GMT

My previous post was partially in Dutch, so here it goes again:

I'm trying to write my own UBB editor. If a user types CTRL-B, a [b]
tag is inserted into the textarea. CTRL-B again inserts [/b]. If CTRL-
B is pressed while text is selected, the selection is captured between
[b] and [/b] tags.

What I'm trying now, is to enlighten the "B" button in the toolbar,
whenever the cursor is captured between [b] tags. If the cursor is
captured between [b] and [u] tags, both these buttons should lighten
up. In the example the cursor is stading over the word "bold":

+---+ +---+ +---+

| B*| | U | | I |

+---+ +---+ +---+
+-----------------------------------------------+

+-----------------------------------------------+

In short, it's the same toolbar behaviour as we all know it from,
i.e.
Microsoft Word. If the editor were an iframe, I could do something
like (taken from widgEditor source)

theWidgEditor.theIframe.contentWindow.document.selection;
theRange = theSelection.createRange();
theParentNode = theRange.parentElement();

switch (theParentNode.nodeName.toLowerCase()) {
case "a":
theWidgEditor.theToolbar.setState("Link", "on");
break;
}

But alas, it's a textarea we're dealing with and the tags are not HTML
but UBB, and can therefore not be found in the DOM. I have once
created a function which would remove the html bold tags from a
selection, if the selection was already bold and another "bold"
command would be given:

function selection_replace(type, text) {
switch (type) {
case 'bold':
var re = new RegExp('^<b[^>]*>(.*?)</b>$');
text = (!re.test(text)) ? '<b>'+ text +'</b>' : text.replace(re,
'$1');
break;
}
}

Perhaps part of the solution is here, although I don't think so
because I foresee problems when multiple tags are surrounding a
selection or cursor. Who could help me write a funcion that detects
which UBB tags the cursor in a textarea is captured between?

Any help would be greatly appreciated!

Reply to this Message

Elegie - 28 Feb 2007 16:27 GMT

Hi Dennis,

> What I'm trying now, is to enlighten the "B" button in the toolbar,
> whenever the cursor is captured between [b] tags. If the cursor is
> captured between [b] and [u] tags, both these buttons should lighten
> up.

To get information about cursor/caret position in a textarea you need to
manipulate "ranges", i.e. objects which represent text ranges. Not
surprisingly, there are two scriptable models available, the IE one and
the W3C one (sometimes augmented with custom methods).

IE's model has been supported by Internet Explorer since version 4 I
think, however W3C's ranges may not be supported everywhere - check
accordingly.

<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html>
<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp>

<snip>

> Who could help me write a funcion that detects
> which UBB tags the cursor in a textarea is captured between?

See below for some quick example; tested in IE7, Firefox 2 and Opera 9.
IE has problems though, as it does not seem to properly fire left/right
arrow key events in the textarea (or I may be missing something, I
haven't time to investigate now).

---
<style type="text/css"> .depressed { border:1px inset; } </style>

<form action="#">
<input type="button" value="B" name="B">
<input type="button" value="U" name="U">
<input type="button" value="I" name="I">
<textarea onkeyup="foo(this)" onclick="foo(this)"></textarea>
</form>

<script type="text/javascript">
function foo(textarea){
for(var tags=["B", "U", "I"], ii=0, a; ii<tags.length; ii++) {
a=textarea.
value.
substr(0, getCaretPos(textarea)).
split("[\/"+tags[ii]+"]");

textarea.form.elements[tags[ii]].className=(
a[a.length-1].indexOf("["+tags[ii]+"]")!=-1
) ? "depressed" : "";
}

function getCaretPos(el) {
var rng, ii=-1;
if(typeof el.selectionStart=="number") {
ii=el.selectionStart;
} else if (document.selection && el.createTextRange){
rng=document.selection.createRange();
rng.collapse(true);
rng.moveStart("character", -el.value.length);
ii=rng.text.length;
}
return ii;
}
}
</script>
---

Regards,
Elegie.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2007

Reading surrounding UBB tags in textarea selection