I always house my editarea and related controls (bold button, etc.) within
a span that has this: unselectable="On"
And, here's my function, activated by the following event-trigger:
onKeyDown = "KeyDoer(this);"
function KeyDoer(elem)
{
var intCode = event.keyCode;
switch (intCode)
{
case 8: //backpace
elem.caretPos =
document.selection.createRange();
var marc = '~';
var caretPos = elem.caretPos;
caretPos.text = marc;
var orig = elem.innerHTML;
var i = orig.indexOf(marc);
var lng = orig.length;
strStart = orig.slice(0,(i-1));
strEnd = orig.slice((i+1),(lng));
elem.innerHTML = strStart + strEnd;
break;
case 9: //tab
var tab
= ' ';
document.all.formMComment.insertAdjacentHTML('beforeEnd', tab);
document.all.formMComment.focus();
event.returnValue = false;
break;
case 46: //delete
document.all.formMComment.replaceAdjacentHTML('beforeBegin', '');
document.all.formMComment.focus();
event.returnValue = false;
break;
case 118: //f7
SpellCheck();
break;
}
}
.rob
> This a good solution. There is one problem though, that I have not
found
a> solution for. When you have other controls on the page, the
T> extEditArea loses focus. If you then click your button, it will give
b> ack focus to the TextEditArea, but the TextRange now defaults to the
f> irst position of the control and nothing happens. You can't even warn
t> he user when the focus moves before they click the button, that they
need
t> o have the focus on the TextEditArea before hitting the button. Any
s> olution for this problem???
> TIA,
M> ark
> > Also, regarding "The solution seems to be find the exact location of
the
>> selected text.... but how??"
>>
>> You create a TextRange of the selected text:
>> var oRng = document.selection.createRange();
>>
>>
>> /Robert
>>
>>
>> -----Original Message-----
>> From: Albetski, Allan [mailto:aalbetski@t...]
>> Sent: den 15 oktober 2001 17:42
>> To: javascript
>> Subject: [javascript] RE: creating a text editor
>>
>>
>> Try using MSHTML editing. i.e.,
>>
>> <body>
>> <div id="TextEditArea" contentEditable="true" style="border=1 solid">
>> This is the area where the use can edit text
>> </div>
>> <p>
>> <button onClick="toggleBold()">Bold</button>
>> </body>
>> <script>
>> function toggleBold()
>> {
>> TextEditArea.focus()
>> document.focus()
>> var oSelection = document.selection.createRange()
>> document.execCommand("Bold")
>> }
>> </script>
>>
>> You can add additional buttons for other operations, Italic, Underline,
>> etc...
>> http://msdn.microsoft.com/library/default.asp?
u> rl=/workshop/author/dhtml/ref
>> erence/methods/execCommand.asp
>>
>> will get you started. Look for the command identifiers. You may want
to
p> ost
>> this to the MSHTML editing forums.
>>
>> -----Original Message-----
>> From: vylarus@h... [mailto:vylarus@h...]
>> Sent: Monday, October 15, 2001 12:26 PM
>> To: javascript
>> Subject: [javascript] creating a text editor
>>
>>
>> I want to a create a simple text editor for my newsletter so that the
>> other people involved in my website can bold and under line things
when
>> they enter their articles.
>> the newsletter works with asp where someone enters info in a text
b> ox
>> and then that text is saved in a database. then when we go to mail
the
>> info is put into a HTML/TEXT format email so all <b></b> appear as
b> old.
>> what I want to do is let people select some text, click a bold button,
a> nd
>> presto the high lighted word becomes <b>highlighted word</b>. At the
>> moment this works only if the selected word is unique. I take the
>> selected word with the var text = document.selection.createRange
(> ).text ,
>> find it in the textarea.value and replace it. But if the word(s)
appear
>> any where before the selected word(s) it will replace the first one it
>> finds.
>> The solution seems to be find the exact location of the selected
>> text.... but how??
>>
>> You've probable spent many frustrating hours like me... but have
you
>> found any solutions?I can't seem to get my head arounf microsoft's
MSDN
>> help files....
>>
>> I greatly appreciate your help.
>> ---
View Cart
