JAVASCRIPT :: Markup Tool Example
2000
The 2000 version of this JavaScript Markup Tool enabled any end-user (using Internet Explorer 5 or above) to mark up selected text in form fields with HTML tags - such as in a web-based administration tool.
Available HTML markup includes bold, italic, fixed-width text, superscript, subscript, font sizing, links and lists. The tool also includes functions for selecting all, clearing all tags, testing the display of the text and a full instructions file.
A sample of the JavaScript code is shown below.
// JAVASCRIPT HTML MARKUP TOOLS Copyright 2000, Brenda C. Mondragon
//global variable currIndex holds the (index) value of the currently selected field
var currIndex;
//////////////////////////////////////////////
function setIndex(what, which) {
//used in onFocus event to store/change the currIndex variable value
//( e.g. onFocus="setIndex(this.form,this.name);" )
for (var i = 0; i < what.elements.length; i++)
{
if (what.elements[i].name == which)
{
currIndex = i;
}
}
}
//////////////////////////////////////////////
function canDo() {
if (document.all || document.layers) { return 1; } else { return 0; }
}
//////////////////////////////////////////////
//set global variables, they are set in the function below when it is called
var selectRange, str, thisArea, areaRange
function validSelect(what) {
//sets the selection ranges, selected string and form field
//checks that what is selected is inside a form field (not some other text on page)
//and that something IS selected
selectRange = document.selection.createRange();
str = selectRange.text;
thisArea = (what.elements[currIndex] || getTextArea(what));
areaRange = thisArea.createTextRange();
if (canDo())
{
if (str != '')
{
if (areaRange.text.indexOf(str) != -1) { return 1; }
else { alert('Please select some text.'); getTextArea(what).focus(); return 0; }
}
else
{
alert('Please select some text.'); getTextArea(what).focus(); return 0;
}
}
else
{
return 0;
}
}
...
//////////////////////////////////////////////
function makeList(what) {
if (validSelect(what)) {
str = replace(str,'\n','\n<li>');
str = "<ul>\n<li>" + str + "\n</ul>";
selectRange.text = str;
}
}
//////////////////////////////////////////////
function makeItalic(what) {
if (validSelect(what)) {
str = "<i>" + str + "</i>";
selectRange.text = str;
}
}
