Skip to content
Browse files

Update textearea demo to use contentedtiable, add keyboard undo/redo

support and a bold command.
  • Loading branch information...
1 parent c5a11fa commit 501775dfbd7d8a4f8eca986dda52f52b37aeaaff @jzaefferer committed
Showing with 29 additions and 9 deletions.
  1. +2 −1 README
  2. +26 −7 demos/{textarea.html → contenteditable.html}
  3. +1 −1 demos/index.html
View
3 README
@@ -12,8 +12,9 @@ Roadmap for demos to add:
- add undo/redo to Backbone TODO demo
- contenteditable with bold command
-Demo:
+Demos:
http://jzaefferer.github.com/undo/demos/
+http://jzaefferer.github.com/undo/demos/contenteditable.html
To suggest a feature, report a bug, or general discussion:
http://github.com/jzaefferer/undo/issues/
View
33 demos/textarea.html → demos/contenteditable.html
@@ -7,6 +7,7 @@
<title>Undo.js demo</title>
<style>
body { font:62.5% Verdana,Arial,sans-serif; }
+ #text { border: 1px dotted green; }
</style>
<script>
$(function() {
@@ -20,11 +21,11 @@
execute: function() {
},
undo: function() {
- this.textarea.val(this.oldValue);
+ this.textarea.html(this.oldValue);
},
redo: function() {
- this.textarea.val(this.newValue);
+ this.textarea.html(this.newValue);
}
});
stack.changed = function() {
@@ -48,13 +49,13 @@
});
var text = $("#text"),
- startValue = text.val(),
+ startValue = text.html(),
timer;
$("#text").bind("keyup", function() {
// a way too simple algorithm in place of single-character undo
clearTimeout(timer);
timer = setTimeout(function() {
- var newValue = text.val();
+ var newValue = text.html();
// ignore meta key presses
if (newValue != startValue) {
// this could try and make a diff instead of storing snapshots
@@ -63,6 +64,25 @@
}
}, 250);
});
+
+ $(".bold").click(function() {
+ document.execCommand("bold", false);
+ var newValue = text.html();
+ stack.execute(new EditCommand(text, startValue, newValue));
+ startValue = newValue;
+ });
+
+ $(document).keydown(function(event) {
+ if (!event.metaKey || event.keyCode != 90) {
+ return;
+ }
+ event.preventDefault();
+ if (event.shiftKey) {
+ stack.canRedo() && stack.redo()
+ } else {
+ stack.canUndo() && stack.undo();
+ }
+ });
});
</script>
</head>
@@ -70,8 +90,7 @@
<button class="undo" href="#">Undo</button>
<button class="redo" href="#">Redo</button>
<button class="save" href="#">Save<span class="dirty">*</span></button>
- <form>
- <textarea id="text"></textarea>
- </form>
+ <button class="bold">Bold!</button>
+ <div id="text" contenteditable="true">Some content, edit me!</div>
</body>
</html>
View
2 demos/index.html
@@ -96,6 +96,6 @@
</li>
</ul>
- <a href="textarea.html">Demo with undo support on a textarea</a>
+ <a href="contenteditable.html">Contenteditable Demo</a>
</body>
</html>

0 comments on commit 501775d

Please sign in to comment.
Something went wrong with that request. Please try again.