Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update examples

  • Loading branch information...
commit 20cd76fede138d9e27f76f5465ab94e5eb7730a9 1 parent 125cf65
@josh josh authored
View
33 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>
View
57 examples/custom_toolbar.html
@@ -1,44 +1,23 @@
-<!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
@@ -46,11 +25,11 @@
});
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
@@ -58,11 +37,11 @@
});
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,15 +60,15 @@
<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
@@ -97,11 +76,11 @@
});
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
@@ -109,11 +88,11 @@
});
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
28 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;
+}
View
89 examples/html.html
@@ -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>
View
89 examples/image.html
@@ -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 ImageHelper = {
- promptImage: function() {
- var value = prompt("Enter a URL", "http://www.google.com/intl/en_ALL/images/logo.gif")
- if(value)
- this.insertImage(value);
- }
- }
-
- WysiHat.Editor.include(ImageHelper);
-
- Event.observe(window, 'load', function() {
- var editor = WysiHat.Editor.attach('content');
- var toolbar = new WysiHat.Toolbar(editor);
-
- toolbar.addButton({
- label: "Image",
- handler: function(editor) { return editor.promptImage(); }
- });
-
- // 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 images</p>
-
-<code><pre>
- var ImageHelper = {
- promptImage: function() {
- var value = prompt("Enter a URL", "http://www.google.com/intl/en_ALL/images/logo.gif")
- if(value)
- this.insertImage(value);
- }
- }
-
- WysiHat.Editor.include(ImageHelper);
-
- Event.observe(window, 'load', function() {
- var editor = WysiHat.Editor.attach('content');
- var toolbar = new WysiHat.Toolbar(editor);
-
- toolbar.addButton({
- label: "Image",
- handler: function(editor) { return editor.promptImage(); }
- });
- });
-</pre></code>
-
- <form action="#" method="post" style="width: 500px;">
- <textarea id="content"></textarea>
- </form>
-</body>
-</html>
View
71 examples/link_selection.html
@@ -1,51 +1,26 @@
-<!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">
- var LinkSelectionHelper = {
- promptLinkSelection: function() {
- if (this.linkSelected()) {
- if (confirm("Remove link?"))
- this.unlinkSelection();
- } else {
- var value = prompt("Enter a URL", "http://www.google.com/");
- if (value)
- this.linkSelection(value);
- }
+ WysiHat.Commands.promptLinkSelection = function() {
+ if (this.linkSelected()) {
+ if (confirm("Remove link?"))
+ this.unlinkSelection();
+ } else {
+ var value = prompt("Enter a URL", "http://www.google.com/");
+ if (value)
+ this.linkSelection(value);
}
}
- WysiHat.Editor.include(LinkSelectionHelper);
-
- Event.observe(window, 'load', function() {
+ document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('content');
var toolbar = new WysiHat.Toolbar(editor);
@@ -66,22 +41,18 @@
<p>This example shows you how to create a simple UI for linking and unlinking selections</p>
<code><pre>
- var LinkSelectionHelper = {
- promptLinkSelection: function() {
- if (this.linkSelected()) {
- if (confirm("Remove link?"))
- this.unlinkSelection();
- } else {
- var value = prompt("Enter a URL", "http://www.google.com/");
- if (value)
- this.linkSelection(value);
- }
+ WysiHat.Commands.promptLinkSelection = function() {
+ if (this.linkSelected()) {
+ if (confirm("Remove link?"))
+ this.unlinkSelection();
+ } else {
+ var value = prompt("Enter a URL", "http://www.google.com/");
+ if (value)
+ this.linkSelection(value);
}
}
- WysiHat.Editor.include(LinkSelectionHelper);
-
- Event.observe(window, 'load', function() {
+ document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('content');
var toolbar = new WysiHat.Toolbar(editor);
View
59 examples/list.html
@@ -1,47 +1,28 @@
-<!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);
-
+
toolbar.addButton({
- label: "InsertOrderedList"
+ label: "Ordered List",
+ handler: function(editor) { return editor.toggleOrderedList(); }
});
-
+
toolbar.addButton({
- label: "InsertUnorderedList"
+ label: "Unordered List",
+ handler: function(editor) { return editor.toggleUnorderedList(); }
});
-
+
// Hide our error message if the editor loads fine
$('error').hide();
});
@@ -54,27 +35,23 @@
<p>This example shows you how to create a simple UI for inserting (un)ordered Lists</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);
-
+
toolbar.addButton({
- label: "InsertOrderedList"
+ label: "Ordered List",
+ handler: function(editor) { return editor.toggleOrderedList(); }
});
-
+
toolbar.addButton({
- label: "InsertUnorderedList"
+ label: "Unordered List",
+ handler: function(editor) { return editor.toggleUnorderedList(); }
});
});
</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>
View
33 examples/simple.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);
toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
@@ -47,7 +26,7 @@
<p>This is a simple example of how easy it is to get up and running with WysiHat.</p>
<code><pre>
- Event.observe(window, 'load', function() {
+ document.on("dom:loaded", function() {
// Replaces the textarea 'content' with the wysiwyg editor on load
var editor = WysiHat.Editor.attach('content');
@@ -67,7 +46,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
33 examples/toolbar_subclass.html
@@ -1,30 +1,9 @@
-<!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 a {
- float: left;
- margin: 2px 5px;
- }
-
- .toolbar .highlight {
- 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>
@@ -54,7 +33,7 @@
}
});
- Event.observe(window, 'load', function() {
+ document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('content');
var toolbar = new Toolbar(editor);
toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
@@ -95,7 +74,7 @@
}
});
- Event.observe(window, 'load', function() {
+ document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('content');
var toolbar = new Toolbar(editor);
toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
@@ -109,7 +88,7 @@
<a class="button_underline" href="#">Underline</a>
<a class="button_italic" href="#">Italic</a>
</div>
- <iframe id="content_editor" style="display: none;"> -->
+ <div id="content_editor" class="editor" contenteditable="true"></div> -->
<textarea id="content"></textarea>
</form>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.