javascript

Chapter 13: Scripting Forms
var selection = frames[“richedit”].getSelection();
//get selected text
var selectedText = selection.toString();
//get the range representing the selection
var range = selection.getRangeAt(0);
//highlight the selected text
var span = frames[“richedit”].document.createElement(“span”);
span.style.backgroundColor = “yellow”;
range.surroundContents(span);
This code places a yellow highlight around the selected text in a rich text editor. Using the DOM range in
the default selection, the surroundContents() method surrounds the selection with a < span > element
whose background color is yellow.
IE doesn ’ t support DOM ranges, but it does allow interaction with the selected text via its own
selection object. The selection object is a property of document , as discussed earlier in this chapter.
To get the selected text in a rich text editor, you must first create a text range (discussed in Chapter 11 )
and then use the text property as follows:
var range = frames[“richedit”].document.selection.createRange();
var selectedText = range.text;
Performing HTML manipulations using IE text ranges is not as safe as using DOM ranges, but it is
possible. To achieve the same highlighting effect as described using DOM ranges, you can use a
combination of the htmlText property and the pasteHTML() method:
var range = frames[“richedit”].document.selection.createRange();
range.pasteHTML(“ < span style=\”background-color:yellow\” > ” + range.htmlText +
“ < /span > ”);
This code retrieves the HTML of the current selection using htmlText , and then surrounds it with a
< span > and inserts it back into the selection using pasteHTML() .
Rich Text in Forms
Since rich text editing is implemented using an iframe instead of a form control, a rich text editor is
technically not part of a form. That means the HTML will not be submitted to the server unless you
extract the HTML manually and submit it yourself. This is typically done by having a hidden form field
that is updated with the HTML from the iframe . Just before the form is submitted, the HTML is
extracted from the iframe and inserted into the hidden field. For example, the following may be done in
the form ’ s onsubmit event handler:
EventUtil.addHandler(form, “submit”, function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.elements[“comments”].value = frames[“richedit”].document.body.innerHTML;
});
463