Making a MS jscript ECMA/DOM compliant

[Next Generation Technologies Inc.]

Now what I have is a function that only works in WinIE4+ because it's
uses Microsoft proprietary properties and methods:

 
function gmshortcutkeys() {
if ((parseInt(navigator.appVersion) >= 4) && (navigator.appName ==
"Microsoft Internet Explorer")) {
if (event.ctrlKey != true) return;
gmselection = document.selection.createRange().text;
if (window.event.keyCode == 1) {
gminsertlink = prompt("What do you want to link to?",
"http://")
if (gminsertlink == null) return;
document.selection.createRange().text = '<a href="' +
gminsertlink + '">' + gmselection + '</a>';
return;
}
if (window.event.keyCode == 2) {
document.selection.createRange().text = '<strong>' +
gmselection + '</strong>';
return;
}
if (window.event.keyCode == 3) {
gminsertacrotitle = prompt("How is this acronym spelled out?",
"Start here")
if (gminsertacrotitle == null) return;
document.selection.createRange().text = '<acronym title="' +
gminsertacrotitle + '">' + gmselection + '</acronym>';
return;
}
if (window.event.keyCode == 4) {
gminsertdfntitle = prompt("How is this jargon or technical
term defined?", "Start here")
if (gminsertdfntitle == null) return;
document.selection.createRange().text = '<dfn title="' +
gminsertdfntitle + '">' + gmselection + '</dfn>';
return;
}
if (window.event.keyCode == 5) {
gminsertdelcite = prompt("Point to the page responsible for
this deletion.", "http://")
if (gminsertdelcite == null) return;
document.selection.createRange().text = '<del datetime="' +
document.lastModified + '" cite="' + gminsertdelcite + '">' +
gmselection + '</del>';
return;
}
}
}
 
 

This function HTML tags around selected text in a textarea for a CMS.
It does this in response to keyboard events thus making a simplistic,
through-the-web markup editor for textareas. For example, you select
some text in the textarea, hit a key combo and bang, your select text
is bounded by <strong> tags. Occasionally it may hit the user with a
prompt to fill in a value for the tag attribute.

Kinda quick and nifty huh?

The problem is it only works in Internet Explorer. What I'd like is
some suggestions on how to change this script so that it works in
Mozilla1, Firefox and heck maybe even Opera 7.5 or Safari. I am
completely willing to sacrifice backward compatibility with anything
less than IE6.

I'd like suggestions that bring this function into close compliance
with the W3C's DOM/ECMA rec but if I must use a little proprietary
stuff for it work in the above browsers, I'm okay with that.

Any suggestions?

[Martin Honnen]

Next Generation Technologies Inc. wrote:

This function HTML tags around selected text in a textarea for a CMS.
It does this in response to keyboard events thus making a simplistic,
through-the-web markup editor for textareas. For example, you select
some text in the textarea, hit a key combo and bang, your select text
is bounded by <strong> tags. Occasionally it may hit the user with a
prompt to fill in a value for the tag attribute. The problem is it only works in Internet Explorer. What I'd like is
some suggestions on how to change this script so that it works in
Mozilla1, Firefox and heck maybe even Opera 7.5 or Safari.

Mozilla (since 1.3) has its own API to manipulate the selection in a
HTML textarea control, see
<http://www.faqts.com/knowledge_base/view.phtml/aid/13562/fid/130>
I think Opera has nothing for that so far. Don't know about Safari.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Paul R]

I don't know about Opera but Mozilla provides:

- 1. the selectionStart and selectionEnd properties on a textarea, plus
the setSelectionRange() method;

- 2. most of the Range portion of W3C's "Document Object Model (DOM)
Level 2 Traversal and Range Specification"
(http://www.w3.org/TR/DOM-Level-2-Traversal-Range), in which, for example,

document.selection.createRange().text
becomes:
window.getSelection().getRangeAt(0).toString()

Don't overlook any simple answers, though: I still find the best way to
add stuff in the middle of a textarea is

var obj = document.forms[0].textarea1;
var str = obj.value;
obj.value = str.substring(0, 5) + "<newtag/>" + str.substring(6);

For events, Mozilla uses the W3C standard
(http://www.w3.org/TR/DOM-Level-2-Events), in which you starting
intercepting events with addEventListener([type], [function], [begin]).

[NGT Inc.]

Martin,

Well I'd rather avoid Mozilla's API if it is proprietory. What I want
is a cross-platform, DOM-compliant way to do what the script above
does.

But if I can't have that, I guess I could do a sniff and route the
client to the method that works for their browser.

[NGT Inc.]

Paul,

var obj = document.forms[0].textarea1;
var str = obj.value;
obj.value = str.substring(0, 5) + "<newtag/>" + str.substring(6);

I don't quite understand this here. Doesn't this code seem to require
that I already explicitly know the length of the string I want to
bound?

What I want is:

1) To dynamically select a string with my mouse or with the keyboard
2) Hit a key combo and have JavaScript bound the selected string with
the HTML tags associated with that key combo.

Basically the code I cited at that start of this thread is a
simple-minded, non-WYSIWYG, keyboard driven markup editor of sorts that
I use with my blogging tool. I've moved to Firefox and the above code
no longer works.