diff options
Diffstat (limited to 'node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js')
-rw-r--r-- | node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js | 223 |
1 files changed, 146 insertions, 77 deletions
diff --git a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js index 89af8eb3..a132b0ab 100644 --- a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js +++ b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js | |||
@@ -4,8 +4,11 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /** | 6 | /** |
7 | @module "montage/ui/rich-text-editor.reel" | 7 | @module "montage/ui/rich-text-editor/rich-text-editor.reel" |
8 | @requires montage/core/core | 8 | @requires montage/core/core |
9 | @requires montage/core/event/mutable-event | ||
10 | @requires montage/core/event/event-manager | ||
11 | @requires rich-text-sanitizer | ||
9 | */ | 12 | */ |
10 | var Montage = require("montage").Montage, | 13 | var Montage = require("montage").Montage, |
11 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, | 14 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, |
@@ -14,15 +17,38 @@ var Montage = require("montage").Montage, | |||
14 | defaultEventManager = require("core/event/event-manager").defaultEventManager; | 17 | defaultEventManager = require("core/event/event-manager").defaultEventManager; |
15 | 18 | ||
16 | /** | 19 | /** |
17 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditor | 20 | @classdesc The RichTextEditor component is a lightweight Montage component that provides basic HTML editing capability. It wraps the HTML5 <code>contentEditable</code> property and largely relies on the browser's support of <code><a href="http://www.quirksmode.org/dom/execCommand.html" target="_blank">execCommand</a></code>. |
21 | @class module:"montage/ui/rich-text-editor/rich-text-editor.reel".RichTextEditor | ||
18 | @extends module:montage/ui/component.Component | 22 | @extends module:montage/ui/component.Component |
23 | @summary | ||
24 | The easiest way to create a RichTextEditor is with a serialization and a <div> tag:<p> | ||
25 | |||
26 | <em>Serialization</em> | ||
27 | <pre class="sh_javascript"> | ||
28 | { | ||
29 | "editor": { | ||
30 | "prototype": "montage/ui/rich-text-editor/rich-text-editor.reel", | ||
31 | "properties": { | ||
32 | "element": {"#": "editor" } | ||
33 | } | ||
34 | } | ||
35 | </pre> | ||
36 | <em>HTML</em> | ||
37 | <pre class="sh_javascript"> | ||
38 | <body> | ||
39 | <div data-montage-id="editor"> | ||
40 | <span>Hello World!</span> | ||
41 | </div> | ||
42 | </body> | ||
43 | </pre> | ||
19 | */ | 44 | */ |
20 | exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"montage/ui/rich-text-editor.reel".RichTextEditor# */ { | 45 | exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"montage/ui/rich-text-editor/rich-text-editor.reel".RichTextEditor# */ { |
21 | 46 | ||
22 | /** | 47 | /** |
23 | Description TODO | 48 | Returns <code>true</code> if the edtior has focus, otherwise returns <code>false</code>. |
24 | @type {Function} | 49 | @type {boolean} |
25 | */ | 50 | @readonly |
51 | */ | ||
26 | hasFocus: { | 52 | hasFocus: { |
27 | enumerable: true, | 53 | enumerable: true, |
28 | get: function() { | 54 | get: function() { |
@@ -30,10 +56,11 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
30 | } | 56 | } |
31 | }, | 57 | }, |
32 | 58 | ||
33 | /** | 59 | /** |
34 | Description TODO | 60 | Returns the editor's inner element, which is the element that is editable. |
35 | @type {Function} | 61 | @type {Element} |
36 | */ | 62 | @readonly |
63 | */ | ||
37 | innerElement: { | 64 | innerElement: { |
38 | enumerable: true, | 65 | enumerable: true, |
39 | get: function() { | 66 | get: function() { |
@@ -43,8 +70,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
43 | 70 | ||
44 | 71 | ||
45 | /** | 72 | /** |
46 | Description TODO | 73 | Sets the focus on the editor's element. The editor will also become the <code>activeElement</code>. |
47 | @type {Function} | 74 | @function |
48 | */ | 75 | */ |
49 | focus: { | 76 | focus: { |
50 | enumerable: true, | 77 | enumerable: true, |
@@ -55,8 +82,10 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
55 | }, | 82 | }, |
56 | 83 | ||
57 | /** | 84 | /** |
58 | Description TODO | 85 | Returns <code>true</code> when the editor is the active element, otherwise return <code>false</code>. Normally the active element has also focus. However, in a multiple window environment it’s possible to be the active element without having focus. Typically, a toolbar item my steal the focus but not become the active element. |
59 | @type {Function} | 86 | |
87 | @type {boolean} | ||
88 | @readonly | ||
60 | */ | 89 | */ |
61 | isActiveElement: { | 90 | isActiveElement: { |
62 | enumerable: true, | 91 | enumerable: true, |
@@ -66,8 +95,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
66 | }, | 95 | }, |
67 | 96 | ||
68 | /** | 97 | /** |
69 | Description TODO | 98 | Returns <code>true</code> if the content is read only, otherwise returns <code>false</code>. When the editor is set to read only, the user is not able to modify the content. However it still possible to set the content programmatically with by setting the <code>value</code> or <code>textValue</code> properties. |
70 | @type {Function} | 99 | @type {boolean} |
71 | */ | 100 | */ |
72 | readOnly: { | 101 | readOnly: { |
73 | enumerable: true, | 102 | enumerable: true, |
@@ -87,8 +116,9 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
87 | }, | 116 | }, |
88 | 117 | ||
89 | /** | 118 | /** |
90 | Description TODO | 119 | Gets or sets the editor's content as HTML. By default, the HTML content assigned to the editor's DOM element is used. |
91 | @type {Function} | 120 | The new value is passed through the editor's sanitizer before being assigned. |
121 | @type {string} | ||
92 | */ | 122 | */ |
93 | value: { | 123 | value: { |
94 | enumerable: true, | 124 | enumerable: true, |
@@ -154,10 +184,10 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
154 | } | 184 | } |
155 | }, | 185 | }, |
156 | 186 | ||
157 | /** | 187 | /** |
158 | Description TODO | 188 | Gets or sets the editor's content as plain text. By default, the text content assigned to the editor's DOM element is used. |
159 | @type {Function} | 189 | @type {string} |
160 | */ | 190 | */ |
161 | textValue: { | 191 | textValue: { |
162 | enumerable: true, | 192 | enumerable: true, |
163 | get: function() { | 193 | get: function() { |
@@ -206,8 +236,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
206 | }, | 236 | }, |
207 | 237 | ||
208 | /** | 238 | /** |
209 | Description TODO | 239 | Gets or sets the editor's delegate object that can define one or more delegate methods that a consumer can implement. For a list of delegate methods, see [Delegate methods]{@link http://tetsubo.org/docs/montage/using-the-rich…itor-component#Delegate_methods}. |
210 | @type {} | 240 | @type {object} |
211 | */ | 241 | */ |
212 | delegate: { | 242 | delegate: { |
213 | enumerable: true, | 243 | enumerable: true, |
@@ -215,8 +245,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
215 | }, | 245 | }, |
216 | 246 | ||
217 | /** | 247 | /** |
218 | Description TODO | 248 | The role of the sanitizer is to cleanup any data before its inserted, or extracted, from the editor. The default sanitizer removes any JavaScript, and scopes any CSS before injecting any data into the editor. However, JavaScript is not removed when the initial value is set using <code>editor.value</code>. |
219 | @type {Function} | 249 | @type {object} |
220 | */ | 250 | */ |
221 | sanitizer: { | 251 | sanitizer: { |
222 | enumerable: false, | 252 | enumerable: false, |
@@ -229,8 +259,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
229 | }, | 259 | }, |
230 | 260 | ||
231 | /** | 261 | /** |
232 | Description TODO | 262 | An array of overlay objects available to the editor. Overlays are UI components that are displayed on top of the editor based on the context. |
233 | @type {Function} | 263 | @type {array} |
234 | */ | 264 | */ |
235 | overlays: { | 265 |