S
Spike
Hi everyone, like a fool, I'm trying to make my own take on an in-
browser HTML editor. I thought I'd try and avoid using the build in
features of the browser for this as they aren't very uniform in terms
of code output, and so forth (I'm sure it's been ranted about before).
This is also my first serious foray into JavaScript so it's been a
slow going process for me. After a lot of stuff around I came to the
following solution which will wrap a tag around a selection in the
document:
if(range.contentEditable){
var element = document.createElement(tag);
range.surroundContents(element);
this.element.focus();
}
tag is the tag we want to wrap around the range (e.g. <em>). and
contentEditable is an extension that I added to range to ensure that
it is within an editable area of the page.
Anyway, it's all nice and easy to add this em tag, but what happens
when someone select a piece of text that's already em'd and clicks my
button? It just adds another em tag! I wasn't surprised by this, but I
was surprised that there wasn't an easy way to detect if the entire
range (or selection) was already under the influence of the tag I was
trying to apply. That's why I'm here. Does anyone know a good way to
do this? I'll also need this function to determine whether a selection
should show whether the EM button (for example) should look like it's
already applied to the selection or not (like in word and any other
rich text editor).
So far I've come up with this idea: Grab all the elements from the
editable area that are the same as the tag we're trying to apply. Turn
each in to a range. Work out if each range is adjacent to each other,
if so, join them together, then compare the ranges with my text
selection range to see if the selection is within one of these greater
joined up ranges. If so, that means the whole selection already has
the tag applied, and we should just remove all traces of the EM tags
from this selection (not quite sure how to do this either!).
I have some attempted code for this method above but I'll spare myself
the embarrassment as I'm sure it's way off track
I'd be really appreciative of anyones help
Cheers,
Brendon Muir
browser HTML editor. I thought I'd try and avoid using the build in
features of the browser for this as they aren't very uniform in terms
of code output, and so forth (I'm sure it's been ranted about before).
This is also my first serious foray into JavaScript so it's been a
slow going process for me. After a lot of stuff around I came to the
following solution which will wrap a tag around a selection in the
document:
if(range.contentEditable){
var element = document.createElement(tag);
range.surroundContents(element);
this.element.focus();
}
tag is the tag we want to wrap around the range (e.g. <em>). and
contentEditable is an extension that I added to range to ensure that
it is within an editable area of the page.
Anyway, it's all nice and easy to add this em tag, but what happens
when someone select a piece of text that's already em'd and clicks my
button? It just adds another em tag! I wasn't surprised by this, but I
was surprised that there wasn't an easy way to detect if the entire
range (or selection) was already under the influence of the tag I was
trying to apply. That's why I'm here. Does anyone know a good way to
do this? I'll also need this function to determine whether a selection
should show whether the EM button (for example) should look like it's
already applied to the selection or not (like in word and any other
rich text editor).
So far I've come up with this idea: Grab all the elements from the
editable area that are the same as the tag we're trying to apply. Turn
each in to a range. Work out if each range is adjacent to each other,
if so, join them together, then compare the ranges with my text
selection range to see if the selection is within one of these greater
joined up ranges. If so, that means the whole selection already has
the tag applied, and we should just remove all traces of the EM tags
from this selection (not quite sure how to do this either!).
I have some attempted code for this method above but I'll spare myself
the embarrassment as I'm sure it's way off track
I'd be really appreciative of anyones help
Cheers,
Brendon Muir