added examples/insert_list.html

Signed-off-by: Joshua Peek <josh@joshpeek.com>
MarkNijhof · Sep 16, 2009 · 96380e4 · 96380e4
1 parent f3ec989
commit 96380e4
Showing 1 changed file with 82 additions and 0 deletions.
diff --git a/examples/insert_list.html b/examples/insert_list.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>WYSIWYG</title>
+
+  <style type="text/css" media="screen">
+    iframe {
+      width: 100%;
+      height: 150px;
+      border: 1px solid #999;
+    }
+
+    .editor_toolbar .button {
+      float: left;
+      margin: 2px 5px;
+    }
+
+    .editor_toolbar .selected {
+      color: red !important;
+    }
+
+    #error {
+      font: 18px helvetica, arial, sans-serif;
+      color: red;
+    }
+  </style>
+
+  <script type="text/javascript" src="../dist/prototype.js"></script>
+  <script type="text/javascript" src="../dist/wysihat.js"></script>
+
+  <script type="text/javascript" charset="utf-8">
+    Event.observe(window, 'load', function() {
+      var editor = WysiHat.Editor.attach('content');
+      var toolbar = new WysiHat.Toolbar(editor);
+
+      toolbar.addButton({
+        label: "InsertOrderedList"
+      });
+
+      toolbar.addButton({
+        label: "InsertUnorderedList"
+      });
+
+      // Hide our error message if the editor loads fine
+      $('error').hide();
+    });
+  </script>
+</head>
+
+<body>
+  <p id="error">Oops, you need to build the package before running this example. It's easy: just run <code>rake</code> in the project's directory.</p>
+
+  <p>This example shows you how to create a simple UI for using Undo & Redo functionality</p>
+
+<code><pre>
+  Event.observe(window, 'load', function() {
+    var editor = WysiHat.Editor.attach('content');
+    var toolbar = new WysiHat.Toolbar(editor);
+
+    toolbar.addButton({
+      label: "Undo"
+    });
+
+    toolbar.addButton({
+      label: "Redo"
+    });
+
+  });
+</pre></code>
+
+  <form action="#" method="post" style="width: 500px;">
+    <!-- This HTML will be automatically generated for you by the toolbar class
+    <div class="editor_toolbar">
+      <a class="button undo" href="#"><span>Undo</span></a>
+      <a class="button redo" href="#"><span>Redo</span></a>
+    </div>
+    <iframe id="content_editor" style="display: none;"> -->
+    <textarea id="content"></textarea>
+  </form>
+</body>
+</html>