Fidget with editor.html a bit
authorAryeh Gregor <AryehGregor+gitcommit@gmail.com>
Thu, 11 Aug 2011 15:39:19 -0600
changeset 520 da6f8f48e839
parent 519 2dea04282819
child 521 4666c01ce06e
Fidget with editor.html a bit
editor.html
--- a/editor.html	Thu Aug 11 15:19:29 2011 -0600
+++ b/editor.html	Thu Aug 11 15:39:19 2011 -0600
@@ -5,6 +5,7 @@
 	margin-top: 0;
 	margin-bottom: 0;
 }
+[contenteditable] { white-space: pre-wrap }
 </style>
 <title>Specification-based rich text editor</title>
 
@@ -19,16 +20,38 @@
 <div
 contenteditable
 style="border: inset 2px #ccc;min-height:20em"
-onkeypress="handleKeyPress(event); return false"
 >Hello</div>
 
 <script>
-function handleKeyPress(e) {
-	var code = String.fromCharCode(e.charCode);
-	if (e.keyCode == 13) {
-		// Gecko has charCode == 0 in this case
-		code = "\n";
+document.querySelector("[contenteditable]").onkeypress = function(e) {
+	if (e.altKey || e.ctrlKey) {
+		return true;
 	}
-	myExecCommand("insertText", false, code);
+	if (e.keyCode == 13 && !e.shiftKey) {
+		myExecCommand("insertparagraph");
+	} else if (e.keyCode == 13) {
+		myExecCommand("insertlinebreak");
+	} else {
+		myExecCommand("inserttext", false, String.fromCharCode(e.charCode));
+	}
+	return false;
+}
+document.onkeydown = function(e) {
+	// FIXME: Does not work in Gecko, why not?
+	if (e.ctrlKey
+	&& ["b", "u", "i"].indexOf(String.fromCharCode(e.keyCode)) != -1) {
+		return false;
+	}
+}
+document.onkeyup = function(e) {
+	if (e.ctrlKey && String.fromCharCode(e.keyCode) == "b") {
+		myExecCommand("bold");
+	}
+	if (e.ctrlKey && String.fromCharCode(e.keyCode) == "i") {
+		myExecCommand("italic");
+	}
+	if (e.ctrlKey && String.fromCharCode(e.keyCode) == "u") {
+		myExecCommand("underline");
+	}
 }
 </script>