Create we first create a simple toolbar with three buttons: a bold button, a Italic button, and a connection button. The toolbar is a great way to add functionality to an existing text field, allowing users to simply control the text you enter without having to know HTML. Any Web site that allows users to participate or make feedback can be enhanced with this toolbar.
Our toolbars can be functionally divided into the following 4 sections:
• JavaScript functions that encapsulate HTML markup for selected text attachments
• Style sheet for customizing the appearance and style of toolbars, buttons
• JavaScript functions that respond to mouse events
• HTML that contains toolbar code, images, and table elements
Let's first look at two functions that handle inserting HTML code into <textarea>:
Using JavaScript to work with text sets
function Format_sel (v) {
var str = Document.selection.createRange (). text;
Document.my_form.my_textarea.focus ();
var sel = Document.selection.createRange ();
Sel.text = "<" + V + ">" + str + "<" + V + ">";
Return
}
Format_sel () accepts only one argument, a string that represents the HTML tag that is acting on the selected text. In this toolbar, we use this function to control the text between <b> and <i>. Of course, if you prefer, we can use <strong> and <em> replace <b> and <i>, or use this function to control the selected text, or to qualify the specified text in the selected tag.
We can use the Createrange () method of the Selection object to easily create the TextRange object for the current text. By accessing its Text property, we can get the text selected in <textarea>. The Text property is assigned to a local variable. In the next line, we call focus () on <textarea>, which is very important, otherwise our changes to the text may be written to other parts of the page. Finally, we create another reference to the specified text and assign it a new value: The address of the original selection located in the appropriate HTML tag.
