Source of textEditing.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="xLibrary.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function makeBold(t,e) {
  t.value += "<strong></strong>"
}
 
function makeItalic(t,e) {
  t.value += "<em></em>"
}
 
function startPreview(t,e) {
  var p = xGetElementById("preview"); 
  p.innerHTML = t.value;
  xAddClass(p,"active");
}
 
var textDispatch = {
  B : makeBold,
  S : startPreview,
  I : makeItalic
}
 
function textShortcuts(evt) {
  var xe = new xEvent(evt);
  if (! xe.ctrlKey) return;
  
  var charCode = String.fromCharCode(xe.keyCode);
  if (textDispatch[charCode]) {
    textDispatch[charCode](xe.target,xe);
    xStopPropagation(evt);
    xPreventDefault(evt);
  }
}
 
function startEditing() {
  var txt = xGetElementById("txt"); if (!txt) return;
  txt.focus(); xAddEventListener(txt,"keydown",textShortcuts);
}
 
xAddEventListener(window,"load",startEditing);
</script>
</head>
<body>
<h3>Text editing example</h3>
<p>When entering the text in the field below, you can use the following 
shortcuts: <b>Ctrl-B</b> to insert the <i>strong</i> markup, <b>Ctrl-I</b> to insert the 
<i>emphasized</i> 
markup and <b>Ctrl-S</b> to preview the HTML code you&#39;ve entered</p>
<textarea cols="80" rows="8" id="txt">... enter your HTML code ...</textarea>
<div id="preview"></div>
</body>
</html>