Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
This examples shows how to add custom buttons and actions with the built-in toolbar class.
37 | 38 |
39 | document.on("dom:loaded", function() {
40 | var editor = WysiHat.Editor.attach('content');
41 | var toolbar = new WysiHat.Toolbar(editor);
42 |
43 | // The name will be used for the div class and the command to execute
44 | // The label is the text you see for the button.
45 | toolbar.addButton({ name: 'bold', label: "Strong" });
46 |
47 | // The label is the only required option. If no name is given,
48 | // the label will be downcased and set to the name.
49 | toolbar.addButton({ label: "Underline" });
50 |
51 | // You can override all the conventions by passing in your own
52 | // name, label, handler, and query options.
53 | toolbar.addButton({
54 | name: 'em',
55 | label: "Emphasis",
56 | handler: function(editor) { editor.italicSelection(); },
57 | query: function(editor) { return editor.italicSelected(); }
58 | });
59 | });
60 | Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
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.
61 | 62 |
63 | document.on("dom:loaded", function() {
64 | var editor = WysiHat.Editor.attach('content');
65 |
66 | var boldButton = $$('.toolbar .bold').first();
67 | boldButton.on('click', function(event) {
68 | editor.boldSelection();
69 | Event.stop(event);
70 | });
71 | editor.on('wysihat:cursormove', function(event) {
72 | if (editor.boldSelected())
73 | boldButton.addClassName('selected')
74 | else
75 | boldButton.removeClassName('selected');
76 | });
77 |
78 | var underlineButton = $$('.toolbar .underline').first();
79 | underlineButton.on('click', function(event) {
80 | editor.underlineSelection();
81 | Event.stop(event);
82 | });
83 | editor.on('wysihat:cursormove', function(event) {
84 | if (editor.underlineSelected())
85 | underlineButton.addClassName('selected')
86 | else
87 | underlineButton.removeClassName('selected');
88 | });
89 |
90 | var italicButton = $$('.toolbar .italic').first();
91 | italicButton.on('click', function(event) {
92 | editor.italicSelection();
93 | Event.stop(event);
94 | });
95 | editor.on('wysihat:cursormove', function(event) {
96 | if (editor.italicSelected())
97 | italicButton.addClassName('selected')
98 | else
99 | italicButton.removeClassName('selected');
100 | });
101 | });
102 | Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
This example shows you how to create a simple UI for linking and unlinking selections
42 | 43 |
44 | WysiHat.Commands.promptLinkSelection = function() {
45 | if (this.linkSelected()) {
46 | if (confirm("Remove link?"))
47 | this.unlinkSelection();
48 | } else {
49 | var value = prompt("Enter a URL", "http://www.google.com/");
50 | if (value)
51 | this.linkSelection(value);
52 | }
53 | }
54 |
55 | document.on("dom:loaded", function() {
56 | var editor = WysiHat.Editor.attach('content');
57 | var toolbar = new WysiHat.Toolbar(editor);
58 |
59 | toolbar.addButton({
60 | label: "Link",
61 | handler: function(editor) { return editor.promptLinkSelection(); }
62 | });
63 | });
64 | Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
This example shows you how to create a simple UI for inserting (un)ordered Lists
36 | 37 |
38 | document.on("dom:loaded", function() {
39 | var editor = WysiHat.Editor.attach('content');
40 | var toolbar = new WysiHat.Toolbar(editor);
41 |
42 | toolbar.addButton({
43 | label: "Ordered List",
44 | handler: function(editor) { return editor.toggleOrderedList(); }
45 | });
46 |
47 | toolbar.addButton({
48 | label: "Unordered List",
49 | handler: function(editor) { return editor.toggleUnorderedList(); }
50 | });
51 | });
52 | Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
This is a simple example of how easy it is to get up and running with WysiHat.
27 | 28 |
29 | document.on("dom:loaded", function() {
30 | // Replaces the textarea 'content' with the wysiwyg editor on load
31 | var editor = WysiHat.Editor.attach('content');
32 |
33 | // Create a simple toolbar bar
34 | // View the source of this page to see the generated HTML
35 | var toolbar = new WysiHat.Toolbar(editor);
36 |
37 | // Add the basic set of buttons, bold, underline and italic
38 | toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
39 | });
40 | Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.
This demonstrates how you can subclass the built in toolbar class and add your own behavior to it.
51 | 52 |
53 | Toolbar = Class.create(WysiHat.Toolbar, {
54 | createToolbarElement: function() {
55 | var toolbar = new Element('div', { 'class': 'toolbar' });
56 | this.editor.insert({before: toolbar});
57 | return toolbar;
58 | },
59 |
60 | createButtonElement: function(toolbar, options) {
61 | var button = Element('a', { 'href': '#' });
62 | button.update(options.get('label'));
63 | button.addClassName('button_' + options.get('name'));
64 | toolbar.appendChild(button);
65 |
66 | return button;
67 | },
68 |
69 | updateButtonState: function(element, name, state) {
70 | if (state)
71 | element.addClassName('highlight');
72 | else
73 | element.removeClassName('highlight');
74 | }
75 | });
76 |
77 | document.on("dom:loaded", function() {
78 | var editor = WysiHat.Editor.attach('content');
79 | var toolbar = new Toolbar(editor);
80 | toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
81 | });
82 | " + element.innerHTML + "
"); 33 | }); 34 | } 35 | 36 | if (Prototype.Browser.WebKit || Prototype.Browser.Gecko) { 37 | convertStrongsToSpans(); 38 | convertEmsToSpans(); 39 | } else if (Prototype.Browser.IE || Prototype.Browser.Opera) { 40 | convertDivsToParagraphs(); 41 | } 42 | 43 | return container.innerHTML; 44 | }, 45 | 46 | getApplicationMarkupFrom: function(element) { 47 | var mode = ACCUMULATING_LINE, result, container, line, lineContainer, previousAccumulation; 48 | 49 | function walk(nodes) { 50 | var length = nodes.length, node, tagName, i; 51 | 52 | for (i = 0; i < length; i++) { 53 | node = nodes[i]; 54 | 55 | if (node.nodeType == Node.ELEMENT_NODE) { 56 | tagName = node.tagName.toLowerCase(); 57 | open(tagName, node); 58 | walk(node.childNodes); 59 | close(tagName); 60 | 61 | } else if (node.nodeType == Node.TEXT_NODE) { 62 | read(node.nodeValue); 63 | } 64 | } 65 | } 66 | 67 | function open(tagName, node) { 68 | if (mode == ACCUMULATING_LINE) { 69 | // if it's a block-level element and the line buffer is full, flush it 70 | if (isBlockElement(tagName)) { 71 | if (isEmptyParagraph(node)) { 72 | accumulate(new Element("br")); 73 | } 74 | 75 | flush(); 76 | 77 | // if it's a ul or ol, switch to expecting-list-item mode 78 | if (isListElement(tagName)) { 79 | container = insertList(tagName); 80 | mode = EXPECTING_LIST_ITEM; 81 | } 82 | 83 | } else if (isLineBreak(tagName)) { 84 | // if it's a br, and the previous accumulation was a br, 85 | // remove the previous accumulation and flush 86 | if (isLineBreak(getPreviouslyAccumulatedTagName())) { 87 | previousAccumulation.parentNode.removeChild(previousAccumulation); 88 | flush(); 89 | } 90 | 91 | // accumulate the br 92 | accumulate(node.cloneNode(false)); 93 | 94 | // if it's the first br in a line, flush 95 | if (!previousAccumulation.previousNode) flush(); 96 | 97 | } else { 98 | accumulateInlineElement(tagName, node); 99 | } 100 | 101 | } else if (mode == EXPECTING_LIST_ITEM) { 102 | if (isListItemElement(tagName)) { 103 | mode = ACCUMULATING_LIST_ITEM; 104 | } 105 | 106 | } else if (mode == ACCUMULATING_LIST_ITEM) { 107 | if (isLineBreak(tagName)) { 108 | accumulate(node.cloneNode(false)); 109 | 110 | } else if (!isBlockElement(tagName)) { 111 | accumulateInlineElement(tagName, node); 112 | } 113 | } 114 | } 115 | 116 | function close(tagName) { 117 | if (mode == ACCUMULATING_LINE) { 118 | if (isLineElement(tagName)) { 119 | flush(); 120 | } 121 | 122 | if (line != lineContainer) { 123 | lineContainer = lineContainer.parentNode; 124 | } 125 | 126 | } else if (mode == EXPECTING_LIST_ITEM) { 127 | if (isListElement(tagName)) { 128 | container = result; 129 | mode = ACCUMULATING_LINE; 130 | } 131 | 132 | } else if (mode == ACCUMULATING_LIST_ITEM) { 133 | if (isListItemElement(tagName)) { 134 | flush(); 135 | mode = EXPECTING_LIST_ITEM; 136 | } 137 | 138 | if (line != lineContainer) { 139 | lineContainer = lineContainer.parentNode; 140 | } 141 | } 142 | } 143 | 144 | function isBlockElement(tagName) { 145 | return isLineElement(tagName) || isListElement(tagName); 146 | } 147 | 148 | function isLineElement(tagName) { 149 | return tagName == "p" || tagName == "div"; 150 | } 151 | 152 | function isListElement(tagName) { 153 | return tagName == "ol" || tagName == "ul"; 154 | } 155 | 156 | function isListItemElement(tagName) { 157 | return tagName == "li"; 158 | } 159 | 160 | function isLineBreak(tagName) { 161 | return tagName == "br"; 162 | } 163 | 164 | function isEmptyParagraph(node) { 165 | return node.tagName.toLowerCase() == "p" && node.childNodes.length == 0; 166 | } 167 | 168 | function read(value) { 169 | accumulate(document.createTextNode(value)); 170 | } 171 | 172 | function accumulateInlineElement(tagName, node) { 173 | var element = node.cloneNode(false); 174 | 175 | if (tagName == "span") { 176 | if ($(node).getStyle("fontWeight") == "bold") { 177 | element = new Element("strong"); 178 | 179 | } else if ($(node).getStyle("fontStyle") == "italic") { 180 | element = new Element("em"); 181 | } 182 | } 183 | 184 | accumulate(element); 185 | lineContainer = element; 186 | } 187 | 188 | function accumulate(node) { 189 | if (mode != EXPECTING_LIST_ITEM) { 190 | if (!line) line = lineContainer = createLine(); 191 | previousAccumulation = node; 192 | lineContainer.appendChild(node); 193 | } 194 | } 195 | 196 | function getPreviouslyAccumulatedTagName() { 197 | if (previousAccumulation && previousAccumulation.nodeType == Node.ELEMENT_NODE) { 198 | return previousAccumulation.tagName.toLowerCase(); 199 | } 200 | } 201 | 202 | function flush() { 203 | if (line && line.childNodes.length) { 204 | container.appendChild(line); 205 | line = lineContainer = null; 206 | } 207 | } 208 | 209 | function createLine() { 210 | if (mode == ACCUMULATING_LINE) { 211 | return new Element("div"); 212 | } else if (mode == ACCUMULATING_LIST_ITEM) { 213 | return new Element("li"); 214 | } 215 | } 216 | 217 | function insertList(tagName) { 218 | var list = new Element(tagName); 219 | result.appendChild(list); 220 | return list; 221 | } 222 | 223 | result = container = new Element("div"); 224 | walk(element.childNodes); 225 | flush(); 226 | return result.innerHTML; 227 | } 228 | }; 229 | })(); 230 | -------------------------------------------------------------------------------- /src/wysihat/header.js: -------------------------------------------------------------------------------- 1 | /* WysiHat - WYSIWYG JavaScript framework, version 0.2.1 2 | * (c) 2008-2010 Joshua Peek 3 | * 4 | * WysiHat is freely distributable under the terms of an MIT-style license. 5 | *--------------------------------------------------------------------------*/ 6 | 7 | /** 8 | * == wysihat == 9 | **/ 10 | 11 | /** section: wysihat 12 | * WysiHat 13 | **/ 14 | var WysiHat = {}; 15 | -------------------------------------------------------------------------------- /src/wysihat/toolbar.js: -------------------------------------------------------------------------------- 1 | //= require "./events/selection_change" 2 | 3 | /** section: wysihat 4 | * class WysiHat.Toolbar 5 | **/ 6 | WysiHat.Toolbar = Class.create((function() { 7 | /** 8 | * new WysiHat.Toolbar(editor) 9 | * - editor (WysiHat.Editor): the editor object that you want to attach to 10 | * 11 | * Creates a toolbar element above the editor. The WysiHat.Toolbar object 12 | * has many helper methods to easily add buttons to the toolbar. 13 | * 14 | * This toolbar class is not required for the Editor object to function. 15 | * It is merely a set of helper methods to get you started and to build 16 | * on top of. If you are going to use this class in your application, 17 | * it is highly recommended that you subclass it and override methods 18 | * to add custom functionality. 19 | **/ 20 | function initialize(editor) { 21 | this.editor = editor; 22 | this.element = this.createToolbarElement(); 23 | } 24 | 25 | /** 26 | * WysiHat.Toolbar#createToolbarElement() -> Element 27 | * 28 | * Creates a toolbar container element and inserts it right above the 29 | * original textarea element. The element is a div with the class 30 | * 'editor_toolbar'. 31 | * 32 | * You can override this method to customize the element attributes and 33 | * insert position. Be sure to return the element after it has been 34 | * inserted. 35 | **/ 36 | function createToolbarElement() { 37 | var toolbar = new Element('div', { 'class': 'editor_toolbar' }); 38 | this.editor.insert({before: toolbar}); 39 | return toolbar; 40 | } 41 | 42 | /** 43 | * WysiHat.Toolbar#addButtonSet(set) -> undefined 44 | * - set (Array): The set array contains nested arrays that hold the 45 | * button options, and handler. 46 | * 47 | * Adds a button set to the toolbar. 48 | **/ 49 | function addButtonSet(set) { 50 | $A(set).each(function(button){ 51 | this.addButton(button); 52 | }.bind(this)); 53 | } 54 | 55 | /** 56 | * WysiHat.Toolbar#addButton(options[, handler]) -> undefined 57 | * - options (Hash): Required options hash 58 | * - handler (Function): Function to bind to the button 59 | * 60 | * The options hash accepts two required keys, name and label. The label 61 | * value is used as the link's inner text. The name value is set to the 62 | * link's class and is used to check the button state. However the name 63 | * may be omitted if the name and label are the same. In that case, the 64 | * label will be down cased to make the name value. So a "Bold" label 65 | * will default to "bold" name. 66 | * 67 | * The second optional handler argument will be used if no handler 68 | * function is supplied in the options hash. 69 | * 70 | * toolbar.addButton({ 71 | * name: 'bold', label: "Bold" }, function(editor) { 72 | * editor.boldSelection(); 73 | * }); 74 | * 75 | * Would create a link, 76 | * "Bold" 77 | **/ 78 | function addButton(options, handler) { 79 | options = $H(options); 80 | 81 | if (!options.get('name')) 82 | options.set('name', options.get('label').toLowerCase()); 83 | var name = options.get('name'); 84 | 85 | var button = this.createButtonElement(this.element, options); 86 | 87 | var handler = this.buttonHandler(name, options); 88 | this.observeButtonClick(button, handler); 89 | 90 | var handler = this.buttonStateHandler(name, options); 91 | this.observeStateChanges(button, name, handler); 92 | } 93 | 94 | /** 95 | * WysiHat.Toolbar#createButtonElement(toolbar, options) -> Element 96 | * - toolbar (Element): Toolbar element created by createToolbarElement 97 | * - options (Hash): Options hash that pass from addButton 98 | * 99 | * Creates individual button elements and inserts them into the toolbar 100 | * container. The default elements are 'a' tags with a 'button' class. 101 | * 102 | * You can override this method to customize the element attributes and 103 | * insert positions. Be sure to return the element after it has been 104 | * inserted. 105 | **/ 106 | function createButtonElement(toolbar, options) { 107 | var button = new Element('a', { 108 | 'class': 'button', 'href': '#' 109 | }); 110 | button.update('' + options.get('label') + ''); 111 | button.addClassName(options.get('name')); 112 | 113 | toolbar.appendChild(button); 114 | 115 | return button; 116 | } 117 | 118 | /** 119 | * WysiHat.Toolbar#buttonHandler(name, options) -> Function 120 | * - name (String): Name of button command: 'bold', 'italic' 121 | * - options (Hash): Options hash that pass from addButton 122 | * 123 | * Returns the button handler function to bind to the buttons onclick 124 | * event. It checks the options for a 'handler' attribute otherwise it 125 | * defaults to a function that calls execCommand with the button name. 126 | **/ 127 | function buttonHandler(name, options) { 128 | if (options.handler) 129 | return options.handler; 130 | else if (options.get('handler')) 131 | return options.get('handler'); 132 | else 133 | return function(editor) { editor.execCommand(name); }; 134 | } 135 | 136 | /** 137 | * WysiHat.Toolbar#observeButtonClick(element, handler) -> undefined 138 | * - element (Element): Button element 139 | * - handler (Function): Handler function to bind to element 140 | * 141 | * Bind handler to elements onclick event. 142 | **/ 143 | function observeButtonClick(element, handler) { 144 | element.on('click', function(event) { 145 | handler(this.editor); 146 | event.stop(); 147 | }.bind(this)); 148 | } 149 | 150 | /** 151 | * WysiHat.Toolbar#buttonStateHandler(name, options) -> Function 152 | * - name (String): Name of button command: 'bold', 'italic' 153 | * - options (Hash): Options hash that pass from addButton 154 | * 155 | * Returns the button handler function that checks whether the button 156 | * state is on (true) or off (false). It checks the options for a 157 | * 'query' attribute otherwise it defaults to a function that calls 158 | * queryCommandState with the button name. 159 | **/ 160 | function buttonStateHandler(name, options) { 161 | if (options.query) 162 | return options.query; 163 | else if (options.get('query')) 164 | return options.get('query'); 165 | else 166 | return function(editor) { return editor.queryCommandState(name); }; 167 | } 168 | 169 | /** 170 | * WysiHat.Toolbar#observeStateChanges(element, name, handler) -> undefined 171 | * - element (Element): Button element 172 | * - name (String): Button name 173 | * - handler (Function): State query function 174 | * 175 | * Determines buttons state by calling the query handler function then 176 | * calls updateButtonState. 177 | **/ 178 | function observeStateChanges(element, name, handler) { 179 | var previousState; 180 | this.editor.on("selection:change", function(event) { 181 | var state = handler(this.editor); 182 | if (state != previousState) { 183 | previousState = state; 184 | this.updateButtonState(element, name, state); 185 | } 186 | }.bind(this)); 187 | } 188 | 189 | /** 190 | * WysiHat.Toolbar#updateButtonState(element, name, state) -> undefined 191 | * - element (Element): Button element 192 | * - name (String): Button name 193 | * - state (Boolean): Whether button state is on/off 194 | * 195 | * If the state is on, it adds a 'selected' class to the button element. 196 | * Otherwise it removes the 'selected' class. 197 | * 198 | * You can override this method to change the class name or styles 199 | * applied to buttons when their state changes. 200 | **/ 201 | function updateButtonState(element, name, state) { 202 | if (state) 203 | element.addClassName('selected'); 204 | else 205 | element.removeClassName('selected'); 206 | } 207 | 208 | return { 209 | initialize: initialize, 210 | createToolbarElement: createToolbarElement, 211 | addButtonSet: addButtonSet, 212 | addButton: addButton, 213 | createButtonElement: createButtonElement, 214 | buttonHandler: buttonHandler, 215 | observeButtonClick: observeButtonClick, 216 | buttonStateHandler: buttonStateHandler, 217 | observeStateChanges: observeStateChanges, 218 | updateButtonState: updateButtonState 219 | }; 220 | })()); 221 | 222 | /** 223 | * WysiHat.Toolbar.ButtonSets 224 | * 225 | * A namespace for various sets of Toolbar buttons. These sets should be 226 | * compatible with WysiHat.Toolbar, and can be added to the toolbar with: 227 | * toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); 228 | **/ 229 | WysiHat.Toolbar.ButtonSets = {}; 230 | 231 | /** 232 | * WysiHat.Toolbar.ButtonSets.Basic 233 | * 234 | * A basic set of buttons: bold, underline, and italic. This set is 235 | * compatible with WysiHat.Toolbar, and can be added to the toolbar with: 236 | * toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); 237 | **/ 238 | WysiHat.Toolbar.ButtonSets.Basic = $A([ 239 | { label: "Bold" }, 240 | { label: "Underline" }, 241 | { label: "Italic" } 242 | ]); 243 | -------------------------------------------------------------------------------- /test/editor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |Hello.
"); 17 | runner.assertEqual("Hello.
", this.editor.innerHTML); 18 | }, 19 | 20 | testBoldSelection: function() { 21 | var runner = this; 22 | 23 | // this.editor.insertHTML("Hello.
"); 24 | this.editor.innerHTML = 'Hello.
'.formatHTMLInput(); 25 | 26 | window.getSelection().selectNode(this.editor.down('#hello')); 27 | this.editor.boldSelection(); 28 | 29 | runner.assert(this.editor.boldSelected()); 30 | runner.assertEqual('Hello.
', this.editor.innerHTML); 31 | } 32 | }); 33 | -------------------------------------------------------------------------------- /test/unit/features_test.js: -------------------------------------------------------------------------------- 1 | new Test.Unit.Runner({ 2 | setup: function() { 3 | WysiHat.BrowserFeatures.run(); 4 | }, 5 | 6 | testDetectParagraphType: function() { 7 | var runner = this; 8 | 9 | runner.wait(1000, function() { 10 | if (Prototype.Browser.WebKit) 11 | runner.assertEqual("div", WysiHat.BrowserFeatures.paragraphType); 12 | else if (Prototype.Browser.Gecko) 13 | runner.assertEqual("br", WysiHat.BrowserFeatures.paragraphType); 14 | else if (Prototype.Browser.IE) 15 | runner.assertEqual("p", WysiHat.BrowserFeatures.paragraphType); 16 | }); 17 | }, 18 | 19 | testDetectIndentType: function() { 20 | var runner = this; 21 | 22 | runner.wait(1000, function() { 23 | if (Prototype.Browser.WebKit || Prototype.Browser.IE) 24 | runner.assertEqual(true, WysiHat.BrowserFeatures.indentInsertsBlockquote); 25 | else if (Prototype.Browser.Gecko) 26 | runner.assertEqual(false, WysiHat.BrowserFeatures.indentInsertsBlockquote); 27 | }); 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /test/unit/fixtures/editor.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /test/unit/fixtures/range.html: -------------------------------------------------------------------------------- 1 |Here is some basic text
\r\nwith a line break.
\r\nAnd maybe another paragraph
', 35 | getBrowserMarkupFrom('Some bold text
"', 39 | getBrowserMarkupFrom('Hello
World!
')
115 | );
116 | runner.assertEqual(
117 | '')
172 | );
173 | runner.assertEqual(
174 | '\n
\n') 193 | ); 194 | runner.assertEqual( 195 | '
\n') 197 | ); 198 | runner.assertEqual( 199 | '
\n
One
Two
\n\n\n
Break
\n') 201 | ); 202 | runner.assertEqual( 203 | '\n
Here is some basic text
with a line break.
And maybe another paragraph
\n') 205 | ); 206 | runner.assertEqual( 207 | '\n
Hello
World!
\n') 209 | ); 210 | runner.assertEqual( 211 | '\n
Hello
World!
Goodbye!
\n') 213 | ); 214 | runner.assertEqual( 215 | '\n
Hello
World!
Goodbye!
\n') 217 | ); 218 | runner.assertEqual( 219 | 'not
') 233 | ); 234 | runner.assertEqual( 235 | 'not
') 237 | ); 238 | } 239 | } 240 | }); 241 | -------------------------------------------------------------------------------- /test/unit/frame_loaded_test.js: -------------------------------------------------------------------------------- 1 | new Test.Unit.Runner({ 2 | testFrameLoaded: function() { 3 | var runner = this; 4 | 5 | frame = new Element('iframe'); 6 | 7 | var frameLoaded = false; 8 | frame.onFrameLoaded(function() { frameLoaded = true; }); 9 | 10 | $(document.body).insert(frame); 11 | 12 | runner.wait(1000, function() { 13 | runner.assert(frameLoaded); 14 | }); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /test/unit/range_test.js: -------------------------------------------------------------------------------- 1 | new Test.Unit.Runner({ 2 | setup: function() { 3 | $('content').update( 4 | "Lorem ipsum dolor sit amet, " + 5 | "consectetuer adipiscing elit." 6 | ); 7 | 8 | $('wrapper').cleanWhitespace(); 9 | 10 | this.range = document.createRange(); 11 | this.range.selectNode($('content')); 12 | }, 13 | 14 | testSetStart: function() { 15 | var runner = this; 16 | 17 | this.range.setStart($('content'), 2); 18 | this.range.setEnd($('content'), 2); 19 | 20 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 21 | runner.assertEqual(2, this.range.startOffset, "startOffset"); 22 | runner.assertEqual($('content'), this.range.endContainer, "endContainer"); 23 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 24 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 25 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 26 | runner.assertEqual("", this.range.toString(), "toString"); 27 | 28 | this.range.setStart($('lorem'), 0); 29 | this.range.setEnd($('lorem'), 1); 30 | 31 | runner.assertEqual($('lorem'), this.range.startContainer, "startContainer"); 32 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 33 | runner.assertEqual($('lorem'), this.range.endContainer, "endContainer"); 34 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 35 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 36 | runner.assertEqual($('lorem'), this.range.commonAncestorContainer, "commonAncestorContainer"); 37 | runner.assertEqual("Lorem ipsum", this.range.toString(), "toString"); 38 | }, 39 | 40 | testSetEnd: function() { 41 | var runner = this; 42 | 43 | this.range.setStart($('content'), 1); 44 | this.range.setEnd($('content'), 2); 45 | 46 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 47 | runner.assertEqual(1, this.range.startOffset, "startOffset"); 48 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 49 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 50 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 51 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 52 | runner.assertEqual(" dolor sit amet, ", this.range.toString(), "toString"); 53 | 54 | this.range.setStart($('consectetuer'), 0); 55 | this.range.setEnd($('consectetuer'), 1); 56 | 57 | runner.assertEqual($('consectetuer'), this.range.startContainer, "startContainer"); 58 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 59 | runner.assertEqual($('consectetuer'), this.range.endContainer, "startContainer"); 60 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 61 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 62 | runner.assertEqual($('consectetuer'), this.range.commonAncestorContainer, "commonAncestorContainer"); 63 | runner.assertEqual("consectetuer", this.range.toString(), "toString"); 64 | }, 65 | 66 | testSetStartBefore: function() { 67 | var runner = this; 68 | 69 | this.range.setStartBefore($('lorem')); 70 | this.range.setEnd($('content'), 2); 71 | 72 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 73 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 74 | runner.assertEqual($('content'), this.range.endContainer, "endContainer"); 75 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 76 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 77 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 78 | runner.assertEqual("Lorem ipsum dolor sit amet, ", this.range.toString(), "toString"); 79 | 80 | this.range.setStartBefore($('content')); 81 | this.range.setEnd($('content'), 2); 82 | 83 | runner.assertEqual($('wrapper'), this.range.startContainer, "startContainer"); 84 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 85 | runner.assertEqual($('content'), this.range.endContainer, "endContainer"); 86 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 87 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 88 | runner.assertEqual($('wrapper'), this.range.commonAncestorContainer, "commonAncestorContainer"); 89 | runner.assertEqual("Lorem ipsum dolor sit amet, ", this.range.toString(), "toString"); 90 | }, 91 | 92 | testSetStartAfter: function() { 93 | var runner = this; 94 | 95 | this.range.setStartAfter($('lorem')); 96 | this.range.setEnd($('content'), 2); 97 | 98 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 99 | runner.assertEqual(1, this.range.startOffset, "startOffset"); 100 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 101 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 102 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 103 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 104 | runner.assertEqual(" dolor sit amet, ", this.range.toString(), "toString"); 105 | 106 | this.range.setStartAfter($('content')); 107 | this.range.setEnd($('wrapper'), 1); 108 | 109 | runner.assertEqual($('wrapper'), this.range.startContainer, "startContainer"); 110 | runner.assertEqual(1, this.range.startOffset, "startOffset"); 111 | runner.assertEqual($('wrapper'), this.range.endContainer, "startContainer"); 112 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 113 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 114 | runner.assertEqual($('wrapper'), this.range.commonAncestorContainer, "commonAncestorContainer"); 115 | runner.assertEqual("", this.range.toString(), "toString"); 116 | }, 117 | 118 | testSetEndBefore: function() { 119 | var runner = this; 120 | 121 | this.range.setStart($('content'), 0); 122 | this.range.setEndBefore($('lorem')); 123 | 124 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 125 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 126 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 127 | runner.assertEqual(0, this.range.endOffset, "endOffset"); 128 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 129 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 130 | runner.assertEqual("", this.range.toString(), "toString"); 131 | 132 | this.range.setStart($('wrapper'), 0); 133 | this.range.setEndBefore($('content')); 134 | 135 | runner.assertEqual($('wrapper'), this.range.startContainer, "startContainer"); 136 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 137 | runner.assertEqual($('wrapper'), this.range.endContainer, "startContainer"); 138 | runner.assertEqual(0, this.range.endOffset, "endOffset"); 139 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 140 | runner.assertEqual($('wrapper'), this.range.commonAncestorContainer, "commonAncestorContainer"); 141 | runner.assertEqual("", this.range.toString(), "toString"); 142 | }, 143 | 144 | testSetEndAfter: function() { 145 | var runner = this; 146 | 147 | this.range.setStart($('content'), 0); 148 | this.range.setEndAfter($('lorem')); 149 | 150 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 151 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 152 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 153 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 154 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 155 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 156 | runner.assertEqual("Lorem ipsum", this.range.toString(), "toString"); 157 | 158 | this.range.setStart($('content'), 0); 159 | this.range.setEndAfter($('content')); 160 | 161 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 162 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 163 | runner.assertEqual($('wrapper'), this.range.endContainer, "startContainer"); 164 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 165 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 166 | runner.assertEqual($('wrapper'), this.range.commonAncestorContainer, "commonAncestorContainer"); 167 | runner.assertEqual("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", this.range.toString(), "toString"); 168 | }, 169 | 170 | testCollapse: function() { 171 | var runner = this; 172 | 173 | this.range.setStart($('content'), 1); 174 | this.range.setEnd($('content'), 2); 175 | this.range.collapse(true); 176 | 177 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 178 | runner.assertEqual(1, this.range.startOffset, "startOffset"); 179 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 180 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 181 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 182 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 183 | runner.assertEqual("", this.range.toString(), "toString"); 184 | 185 | this.range.setStart($('content'), 1); 186 | this.range.setEnd($('content'), 2); 187 | this.range.collapse(false); 188 | 189 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 190 | runner.assertEqual(2, this.range.startOffset, "startOffset"); 191 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 192 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 193 | runner.assertEqual(true, this.range.collapsed, "collapsed"); 194 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 195 | runner.assertEqual("", this.range.toString(), "toString"); 196 | }, 197 | 198 | testSelectNode: function() { 199 | var runner = this; 200 | 201 | this.range.selectNode($('content')); 202 | 203 | runner.assertEqual($('wrapper'), this.range.startContainer, "startContainer"); 204 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 205 | runner.assertEqual($('wrapper'), this.range.endContainer, "startContainer"); 206 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 207 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 208 | runner.assertEqual($('wrapper'), this.range.commonAncestorContainer, "commonAncestorContainer"); 209 | runner.assertEqual("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", this.range.toString(), "toString"); 210 | 211 | this.range.selectNode($('lorem')); 212 | 213 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 214 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 215 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 216 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 217 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 218 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 219 | runner.assertEqual("Lorem ipsum", this.range.toString(), "toString"); 220 | }, 221 | 222 | testSelectNodeContents: function() { 223 | var runner = this; 224 | 225 | this.range.selectNodeContents($('content')); 226 | 227 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 228 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 229 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 230 | runner.assertEqual(4, this.range.endOffset, "endOffset"); 231 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 232 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 233 | runner.assertEqual("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", this.range.toString(), "toString"); 234 | 235 | this.range.selectNodeContents($('lorem')); 236 | 237 | runner.assertEqual($('lorem'), this.range.startContainer, "startContainer"); 238 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 239 | runner.assertEqual($('lorem'), this.range.endContainer, "startContainer"); 240 | runner.assertEqual(1, this.range.endOffset, "endOffset"); 241 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 242 | runner.assertEqual($('lorem'), this.range.commonAncestorContainer, "commonAncestorContainer"); 243 | runner.assertEqual("Lorem ipsum", this.range.toString(), "toString"); 244 | }, 245 | 246 | testDeleteContents: function() { 247 | var runner = this; 248 | 249 | this.range.selectNodeContents($('lorem')); 250 | this.range.deleteContents(); 251 | 252 | runner.assertEqual("", $('lorem').innerHTML, "innerHTML"); 253 | }, 254 | 255 | testExtractContents: function() { 256 | var runner = this; 257 | 258 | this.range.selectNodeContents($('lorem')); 259 | var contents = this.range.extractContents(); 260 | 261 | runner.assertEqual("", $('lorem').innerHTML, "innerHTML"); 262 | 263 | //IE document does not have any useful methods. Everyone else can just 264 | // read textContent, IE needs to append the fragment to another element 265 | // and read its innerHTML 266 | if (contents.textContent) { 267 | runner.assertEqual("Lorem ipsum", contents.textContent, "textContent"); 268 | } else { 269 | var e = new Element('div'); 270 | e.appendChild(contents); 271 | runner.assertEqual("Lorem ipsum", e.innerHTML, "textContent"); 272 | } 273 | }, 274 | 275 | testCloneContents: function() { 276 | var runner = this; 277 | 278 | this.range.selectNodeContents($('lorem')); 279 | var contents = this.range.cloneContents(); 280 | 281 | runner.assertEqual("Lorem ipsum", $('lorem').innerHTML, "innerHTML"); 282 | 283 | // IE document does not have any useful methods. Everyone else can just 284 | // read textContent, IE needs to append the fragment to another element 285 | // and read its innerHTML 286 | if (contents.textContent) { 287 | runner.assertEqual("Lorem ipsum", contents.textContent, "textContent"); 288 | } else { 289 | var e = new Element('div'); 290 | e.appendChild(contents); 291 | runner.assertEqual("Lorem ipsum", e.innerHTML, "textContent"); 292 | } 293 | }, 294 | 295 | testInsertNode: function() { 296 | var runner = this; 297 | 298 | var node = new Element('span', {id: 'inserted'}).update("inserted!"); 299 | 300 | this.range.selectNode($('lorem')); 301 | this.range.insertNode(node); 302 | 303 | runner.assertEqual("inserted!", $('inserted').innerHTML, "innerHTML"); 304 | 305 | runner.assertEqual($('content'), this.range.startContainer, "startContainer"); 306 | runner.assertEqual(0, this.range.startOffset, "startOffset"); 307 | runner.assertEqual($('content'), this.range.endContainer, "startContainer"); 308 | runner.assertEqual(2, this.range.endOffset, "endOffset"); 309 | runner.assertEqual(false, this.range.collapsed, "collapsed"); 310 | runner.assertEqual($('content'), this.range.commonAncestorContainer, "commonAncestorContainer"); 311 | }, 312 | 313 | testSurrondContents: function() { 314 | var runner = this; 315 | 316 | var node; 317 | 318 | node = new Element('span', {id: 'wrapper'}); 319 | 320 | this.range.selectNodeContents($('lorem')); 321 | this.range.surroundContents(node); 322 | 323 | expected = new Element('div'); 324 | expected.appendChild(new Element('span', {id: 'wrapper'}).update("Lorem ipsum")); 325 | 326 | runner.assertEqual(expected.innerHTML, $('lorem').innerHTML, "innerHTML"); 327 | }, 328 | 329 | testEqualRange: function() { 330 | var runner = this; 331 | 332 | if (!this.range.equalRange) { 333 | runner.flunk("equalRange is not implemented"); 334 | return false; 335 | } 336 | 337 | var r1 = document.createRange(); 338 | r1.selectNodeContents($('lorem')); 339 | 340 | var r2 = document.createRange(); 341 | r2.selectNodeContents($('lorem')); 342 | 343 | var r3 = document.createRange(); 344 | r3.selectNodeContents($('consectetuer')); 345 | 346 | runner.assert(r1.equalRange(r1), "r1.equalRange(r1)"); 347 | runner.assert(r2.equalRange(r2), "r2.equalRange(r2)"); 348 | runner.assert(r3.equalRange(r3), "r3.equalRange(r3)"); 349 | 350 | runner.assert(r1.equalRange(r2), "r1.equalRange(r2)"); 351 | runner.assert(r2.equalRange(r1), "r2.equalRange(r1)"); 352 | runner.assert(!r1.equalRange(r3), "r1.equalRange(r3)"); 353 | runner.assert(!r3.equalRange(r1), "r3.equalRange(r1)"); 354 | 355 | runner.assert(!r1.equalRange(null), "r1.equalRange(null)"); 356 | runner.assert(!r2.equalRange(null), "r2.equalRange(null)"); 357 | runner.assert(!r3.equalRange(null), "r3.equalRange(null)"); 358 | }, 359 | 360 | testGetNode: function() { 361 | var runner = this; 362 | 363 | if (!this.range.getNode) { 364 | runner.flunk("getNode is not implemented"); 365 | return false; 366 | } 367 | 368 | this.range.selectNodeContents($('lorem')); 369 | runner.assertEqual($('lorem'), this.range.getNode(), "getNode"); 370 | 371 | this.range.selectNode($('lorem')); 372 | runner.assertEqual($('lorem'), this.range.getNode(), "getNode"); 373 | 374 | this.range.setStart($('lorem'), 0); 375 | this.range.setEnd($('lorem'), 1); 376 | runner.assertEqual($('lorem'), this.range.getNode(), "getNode"); 377 | } 378 | }); 379 | -------------------------------------------------------------------------------- /test/unit/sanitize_contents_test.js: -------------------------------------------------------------------------------- 1 | function sanitize(html, options) { 2 | return new Element("div").update(html).sanitizeContents(options).innerHTML.toLowerCase(); 3 | } 4 | 5 | new Test.Unit.Runner({ 6 | testSanitize: function() { 7 | var runner = this; 8 | 9 | runner.assertEqual( 10 | "hello", 11 | sanitize("hello", {}) 12 | ); 13 | 14 | runner.assertEqual( 15 | "hello", 16 | sanitize("hello", {}) 17 | ); 18 | 19 | runner.assertEqual( 20 | "hello", 21 | sanitize("hello", {}) 22 | ); 23 | 24 | runner.assertEqual( 25 | "hello", 26 | sanitize("hello", {allow: "strong"}) 27 | ); 28 | 29 | runner.assertEqual( 30 | "hello", 31 | sanitize("hello", {allow: "strong"}) 32 | ); 33 | 34 | runner.assertEqual( 35 | "hello", 36 | sanitize("hello", {allow: "strong"}) 37 | ); 38 | 39 | runner.assertEqual( 40 | "hello world!", 41 | sanitize("hello world!
", {allow: "strong"}) 42 | ); 43 | 44 | runner.assertEqual( 45 | "hello", 46 | sanitize("hello", {allow: "em, strong"}) 47 | ); 48 | 49 | runner.assertEqual( 50 | "google", 51 | sanitize("google", {allow: "a"}) 52 | ); 53 | 54 | runner.assertEqual( 55 | "google", 56 | sanitize("google", {allow: "a[href]"}) 57 | ); 58 | 59 | if (Prototype.Browser.IE) { 60 | runner.assertEqual( 61 | "hello ", 62 | sanitize("hello ", {allow: "span[id]"}) 63 | ); 64 | } else { 65 | runner.assertEqual( 66 | "hello ", 67 | sanitize("hello ", {allow: "span[id]"}) 68 | ); 69 | } 70 | 71 | runner.assertEqual( 72 | "![](\"http://www.google.com/intl/en_all/images/logo.gif\"){kind=logo}
",
73 | sanitize("", {allow: "img[src], a[href]"})
74 | );
75 |
76 | if (Prototype.Browser.Gecko) {
77 | var element;
78 |
79 | element = new Element("div").update('dirty formatting.