Reading surrounding UBB tags in textarea selection

[dennis.sprengers]

Ik ben bezig met een eigen UBB editor. Als iemand aan het typen is,
zorgt CTRL-B voor een \-tag en nogmaals CTRL-B voor een \ tag.
Als je eerst een selectie maakt en dan CTRL-B drukt, wordt de selectie
ingesloten door \ en \, 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
tag is inserted into the textarea. CTRL-B again inserts . If CTRL-
B is pressed while text is selected, the selection is captured between
and tags.

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

+---+ +---+ +---+
| B*| | U | | I |
+---+ +---+ +---+
+-----------------------------------------------+
| This is bo|ld and this is |
| bold and underlined |
| |
| |
+-----------------------------------------------+

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)

theSelection =
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?

Your help would be greatly appreciated!

 

[dennis.sprengers]

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
tag is inserted into the textarea. CTRL-B again inserts . If CTRL-
B is pressed while text is selected, the selection is captured between
and tags.


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

+---+ +---+ +---+
| B*| | U | | I |
+---+ +---+ +---+
+-----------------------------------------------+
| This is bo|ld and this is |
| bold and underlined |
| |
| |
+-----------------------------------------------+

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!

 

[Elegie]

(e-mail address removed) wrote:

Hi Dennis,

What I'm trying now, is to enlighten the "B" button in the toolbar,
whenever the cursor is captured between tags. If the cursor is
captured between and 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>

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>