Permalink
Browse files

update examples

  • Loading branch information...
1 parent 125cf65 commit 20cd76fede138d9e27f76f5465ab94e5eb7730a9 @josh josh committed May 26, 2010
@@ -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>
@@ -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>
View
@@ -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;
+}
View
@@ -1,89 +0,0 @@
-<!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">
- var HTMLHelper = {
- promptHTML: function() {
- var value = prompt("Enter some HTML", "<h1>:)</h1>")
- if(value)
- this.insertHTML(value);
- }
- }
-
- WysiHat.Editor.include(HTMLHelper);
-
- Event.observe(window, 'load', function() {
- var editor = WysiHat.Editor.attach('content');
- var toolbar = new WysiHat.Toolbar(editor);
-
- toolbar.addButton({
- label: "HTML",
- handler: function(editor) { return editor.promptHTML(); }
- });
-
- // 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 adding HTML</p>
-
-<code><pre>
- var HTMLHelper = {
- promptHTML: function() {
- var value = prompt("Enter some HTML", '&lt;h1&gt;:)&lt;/h1&gt;')
- if(value)
- this.insertHTML(value);
- }
- }
-
- WysiHat.Editor.include(HTMLHelper);
-
- Event.observe(window, 'load', function() {
- var editor = WysiHat.Editor.attach('content');
- var toolbar = new WysiHat.Toolbar(editor);
-
- toolbar.addButton({
- label: "HTML",
- handler: function(editor) { return editor.promptHTML(); }
- });
- });
-</pre></code>
-
- <form action="#" method="post" style="width: 500px;">
- <textarea id="content"></textarea>
- </form>
-</body>
-</html>
Oops, something went wrong.

0 comments on commit 20cd76f

Please sign in to comment.