<html>
<head>
<title>Rich Text Editing Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<form method="post" action="javascript:alert('Form submitted!')">
<div id="divSimple">
<input type="button" value="Bold" />
<input type="button" value="Italic" />
<input type="button" value="Underline" />
<input type="button" value="Indent" />
<input type="button" value="Outdent" />
<input type="button" value="Copy" />
<input type="button" value="Cut" />
<input type="button" value="Paste" />
</div>
<div id="divComplex">
<input type="button" value="Create Link" id="btnCreateLink" />
<input type="button" value="Change Font Size" id="btnChangeFontSize" />
<input type="button" value="Highlight Text" id="btnHighlight" />
<input type="button" value="Get HTML" id="btnGetHtml" />
<input type="button" value="Get Selected Text" id="btnGetSelected" />
</div>
<div id="divQuery">Is the current selection:
<input type="button" value="Bold" />
<input type="button" value="Italic" />
<input type="button" value="Underline" />
</div>
<iframe name="richedit" style="height: 100px; width: 300px" src="blank.htm"></iframe>
<input type="hidden" name="comments" value="" />
<input type="submit" value="Submit Form" />
</form>
<script type="text/javascript">
(function(){
EventUtil.addHandler(window, "load", function(){
frames["richedit"].document.designMode = "on";
});
var simple = document.getElementById("divSimple");
var complex = document.getElementById("divComplex");
var queryDiv = document.getElementById("divQuery");
EventUtil.addHandler(document.forms[0], "submit", function(){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
});
EventUtil.addHandler(simple, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.type == "button"){
frames["richedit"].document.execCommand(target.value.toLowerCase(), false, null);
}
});
EventUtil.addHandler(complex, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "btnGetHtml":
alert(frames["richedit"].document.body.innerHTML);
break;
case "btnCreateLink":
var link = prompt("What link?", "http://www.wrox.com");
if (link){
frames["richedit"].document.execCommand("createlink", false, link);
}
break;
case "btnChangeFontSize":
var size = prompt("What size? (1-7)", "7");
if (size){
frames["richedit"].document.execCommand("fontsize", false, parseInt(size,10));
}
break;
case "btnGetSelected":
if (frames["richedit"].getSelection){
alert(frames["richedit"].getSelection().toString());
} else if (frames["richedit"].document.selection){
alert(frames["richedit"].document.selection.createRange().text);
}
break;
case "btnHighlight":
if (frames["richedit"].getSelection){
var selection = frames["richedit"].getSelection();
//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);
} else if (frames["richedit"].document.selection){
var range = frames["richedit"].document.selection.createRange();
range.pasteHTML("<span style=\"background-color:yellow\">" + range.htmlText + "</span>");
}
break;
}
});
EventUtil.addHandler(queryDiv, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.type == "button"){
alert(frames["richedit"].document.queryCommandState(target.value.toLowerCase(), false, null));
}
});
})();
</script>
</body>
</html>