update examples

basecamp · May 26, 2010 · 20cd76f · 20cd76f
1 parent 125cf65
commit 20cd76f
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 389 deletions.
diff --git a/examples/custom_buttons.html b/examples/custom_buttons.html
@@ -1,36 +1,15 @@
-<!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">
+<!DOCTYPE html>
+<html>
 <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>
+  <link rel="stylesheet" href="editor.css" type="text/css" />
 
   <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() {
+    document.on("dom:loaded", function() {
       var editor = WysiHat.Editor.attach('content');
       var toolbar = new WysiHat.Toolbar(editor);
 
@@ -57,7 +36,7 @@
   <p>This examples shows how to add custom buttons and actions with the built-in toolbar class.</p>
 
 <code><pre>
-  Event.observe(window, 'load', function() {
+  document.on("dom:loaded", function() {
     var editor = WysiHat.Editor.attach('content');
     var toolbar = new WysiHat.Toolbar(editor);
 
@@ -87,7 +66,7 @@
       <a class="button underline" href="#"><span>Underline</span></a>
       <a class="button em" href="#"><span>Emphasis</span></a>
     </div>
-    <iframe id="content_editor" style="display: none;"> -->
+    <div id="content_editor" class="editor" contenteditable="true"></div> -->
     <textarea id="content"></textarea>
   </form>
 </body>

diff --git a/examples/custom_toolbar.html b/examples/custom_toolbar.html
@@ -1,68 +1,47 @@
-<!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">
+<!DOCTYPE html>
+<html>
 <head>
   <title>WYSIWYG</title>
 
-  <style type="text/css" media="screen">
-    iframe {
-      width: 100%;
-      height: 150px;
-      border: 1px solid #999;
-    }
-
-    .toolbar .button {
-      float: left;
-      margin: 2px 5px;
-    }
-
-    .toolbar .selected {
-      color: red !important;
-    }
-
-    #error {
-      font: 18px helvetica, arial, sans-serif;
-      color: red;
-    }
-  </style>
+  <link rel="stylesheet" href="editor.css" type="text/css" />
 
   <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() {
+    document.on("dom:loaded", function() {
       var editor = WysiHat.Editor.attach('content');
 
       var boldButton = $$('.toolbar .bold').first();
-      boldButton.observe('click', function(event) {
+      boldButton.on('click', function(event) {
         editor.boldSelection();
         Event.stop(event);
       });
-      editor.observe('wysihat:cursormove', function(event) {
+      editor.on('wysihat:cursormove', function(event) {
         if (editor.boldSelected())
           boldButton.addClassName('selected')
         else
           boldButton.removeClassName('selected');
       });
 
       var underlineButton = $$('.toolbar .underline').first();
-      underlineButton.observe('click', function(event) {
+      underlineButton.on('click', function(event) {
         editor.underlineSelection();
         Event.stop(event);
       });
-      editor.observe('wysihat:cursormove', function(event) {
+      editor.on('wysihat:cursormove', function(event) {
         if (editor.underlineSelected())
           underlineButton.addClassName('selected')
         else
           underlineButton.removeClassName('selected');
       });
 
       var italicButton = $$('.toolbar .italic').first();
-      italicButton.observe('click', function(event) {
+      italicButton.on('click', function(event) {
         editor.italicSelection();
         Event.stop(event);
       });
-      editor.observe('wysihat:cursormove', function(event) {
+      editor.on('wysihat:cursormove', function(event) {
         if (editor.italicSelected())
           italicButton.addClassName('selected')
         else
@@ -81,39 +60,39 @@
   <p>This is a more advanced example that extends the built-in toolbar class. The code is a bit more verbose, however you have full control of the html.</p>
 
 <code><pre>
-  Event.observe(window, 'load', function() {
+  document.on("dom:loaded", function() {
     var editor = WysiHat.Editor.attach('content');
 
     var boldButton = $$('.toolbar .bold').first();
-    boldButton.observe('click', function(event) {
+    boldButton.on('click', function(event) {
       editor.boldSelection();
       Event.stop(event);
     });
-    editor.observe('wysihat:cursormove', function(event) {
+    editor.on('wysihat:cursormove', function(event) {
       if (editor.boldSelected())
         boldButton.addClassName('selected')
       else
         boldButton.removeClassName('selected');
     });
 
     var underlineButton = $$('.toolbar .underline').first();
-    underlineButton.observe('click', function(event) {
+    underlineButton.on('click', function(event) {
       editor.underlineSelection();
       Event.stop(event);
     });
-    editor.observe('wysihat:cursormove', function(event) {
+    editor.on('wysihat:cursormove', function(event) {
       if (editor.underlineSelected())
         underlineButton.addClassName('selected')
       else
         underlineButton.removeClassName('selected');
     });
 
     var italicButton = $$('.toolbar .italic').first();
-    italicButton.observe('click', function(event) {
+    italicButton.on('click', function(event) {
       editor.italicSelection();
       Event.stop(event);
     });
-    editor.observe('wysihat:cursormove', function(event) {
+    editor.on('wysihat:cursormove', function(event) {
       if (editor.italicSelected())
         italicButton.addClassName('selected')
       else
@@ -128,7 +107,7 @@
       <a class="button underline" href="#"><span>Underline</span></a>
       <a class="button italic" href="#"><span>Italic</span></a>
     </div>
-    <!-- <iframe id="content_editor" style="display: none;"> -->
+    <!-- <div id="content_editor" class="editor" contenteditable="true"></div> -->
     <textarea id="content"></textarea>
   </form>
 </body>

diff --git a/examples/editor.css b/examples/editor.css
@@ -0,0 +1,28 @@
+.editor {
+  clear: both;
+  min-height: 100px;
+  margin: 5px 0;
+  padding: 5px;
+  border: 1px solid #acacac;
+  outline: none;
+  font-family: 'Lucida Grande', verdana, arial, sans-serif;
+  font-size: 12px;
+}
+
+.editor p {
+  margin: 0;
+}
+
+.editor_toolbar .button {
+  float: left;
+  margin: 2px 5px;
+}
+
+.editor_toolbar .selected {
+  color: red !important;
+}
+
+#error {
+  font: 18px helvetica, arial, sans-serif;
+  color: red;
+}
diff --git a/examples/html.html b/examples/html.html