I was wondering if anybody could help me with a (for me at least)
rather difficult problem?
I have been building a online text editor (editable Div) that is
connected to different styles and as such CSS's. When a user selects
a different style to edit in they get a different select box with the
style elements (like H1, H2, etc.), as dictated by the CSS. All this
is not a problem.
However when I try and insert code for the different elements based
on what the user selected I am running into a bit of a problem with
the textRange of the selected section. What I am trying to do is that
you select a piece of text and then say this should be "H1" text and
then it writes the HTML for H1 (like turn "hello"
into "<h1>hello</h1>" or "hello" into "span
The problem I'm having is that when something already has a tag
around it I can't always seem to clear it. Lets say I
have "<h1>hello</h1>" and want to turn it into <h2> tags. Half of the
time I end up with "<h1><h2>hello</h2></h1>". The problem is even
worse when I want to remove all formating so I get plain text again.
I've build a function that checks any parent elements and tries to
remove those as well and I am using a regular expression to strip the
textRange of any and all HTML but it only works half of the time
(can't figure out when it does and when it doens't almost seems
random!). I also actually clear the selected section before pasting
the newly stripped one back (just to be sure).
I've figured out that sometimes it continues to remember the htmlText
of the TextRange. This seems to be the core of my problem. Sometimes
after a clear of the selection it empties the entire htmlText and
sometimes it only empties the actual text but NOT the HTML tags.
Is there anyway to make sure the htmlText gets fully cleared? I'm
going a bit crazy with it being readonly. Is there anybody who could
offer any help?
ps. this editor only needs to work under IE 5.5 and higher.
Thanks in advance,