← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/editor/index.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/editor/index.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Rich Text Editor</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Rich Text Editor</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
    <p>The Rich Text Editor is a UI control that allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text.</p>
24
 
    <p>The current release of the Rich Text Editor for YUI 3 is the base utility layers that provide a foundation on which you can create an Editor. <strong>This version of Editor does not contain a GUI of any kind.</strong></p>
25
 
</div>
26
 
 
27
 
<h2 id="getting-started">Getting Started</h2>
28
 
 
29
 
<p>
30
 
To include the source files for Rich Text Editor and its dependencies, first load
31
 
the YUI seed file if you haven't already loaded it.
32
 
</p>
33
 
 
34
 
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
35
 
 
36
 
 
37
 
<p>
38
 
Next, create a new YUI instance for your application and populate it with the
39
 
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
40
 
YUI will automatically load any dependencies required by the modules you
41
 
specify.
42
 
</p>
43
 
 
44
 
<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
45
 
YUI().use(&#x27;editor&#x27;, function (Y) {
46
 
    &#x2F;&#x2F; Rich Text Editor is available and ready for use. Add implementation
47
 
    &#x2F;&#x2F; code here.
48
 
});</pre>
49
 
 
50
 
 
51
 
<p>
52
 
For more information on creating YUI instances and on the
53
 
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
54
 
documentation for the <a href="../yui/index.html">YUI Global object</a>.
55
 
</p>
56
 
 
57
 
 
58
 
<h2 id="query">Creating an Editor</h2>
59
 
<p>This simple example will create an Editable area inside of another Node. It will not contain a GUI, only the iframe. You can use various Editor events to wire up your own toolbar.</p>
60
 
 
61
 
<pre class="code prettyprint">YUI().use(&#x27;editor-base&#x27;, function(Y) {
62
 
 
63
 
    var editor = new Y.EditorBase({
64
 
        content: &#x27;&lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &#x27;
65
 
    });
66
 
 
67
 
    &#x2F;&#x2F;Add the BiDi plugin
68
 
    editor.plug(Y.Plugin.EditorBidi);
69
 
 
70
 
    &#x2F;&#x2F;Focusing the Editor when the frame is ready..
71
 
    editor.on(&#x27;frame:ready&#x27;, function() {
72
 
        this.focus();
73
 
    });
74
 
 
75
 
    &#x2F;&#x2F;Rendering the Editor.
76
 
    editor.render(&#x27;#editor&#x27;);
77
 
 
78
 
});</pre>
79
 
 
80
 
 
81
 
<h2 id="instance">Frame Instance</h2>
82
 
<p>When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe. 
83
 
This means that you now have the full power of YUI 3 inside the Editor iframe. You can use Event, Stylesheet, Node and even DD
84
 
inside the iframe, without having to load all the JavaScript inside the document.</p>
85
 
 
86
 
<p>Getting access to this instance is simple. Just use the <code>getInstance</code> method on the Editor instance, like this:</p>
87
 
 
88
 
<pre class="code prettyprint">YUI().use(&#x27;editor-base&#x27;, function(Y) {
89
 
 
90
 
    var editor = new Y.EditorBase({
91
 
        content: &#x27;&lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &#x27;
92
 
    });
93
 
 
94
 
    &#x2F;&#x2F;Add the BiDi plugin
95
 
    editor.plug(Y.Plugin.EditorBidi);
96
 
 
97
 
    &#x2F;&#x2F;Focusing the Editor when the frame is ready..
98
 
    editor.on(&#x27;frame:ready&#x27;, function() {
99
 
        this.focus();
100
 
 
101
 
        var inst = this.getInstance();
102
 
        &#x2F;&#x2F;inst is now an instance of YUI that is bound to the iframe.
103
 
 
104
 
        var body = inst.one(&#x27;body&#x27;);
105
 
        &#x2F;&#x2F;body is a Node instance of the BODY element &quot;inside&quot; the iframe.
106
 
 
107
 
 
108
 
        var strongs = inst.all(&#x27;strong&#x27;);
109
 
        &#x2F;&#x2F;strongs is a NodeList instance of all the STRONG elements &quot;inside&quot; the iframe.
110
 
    });
111
 
 
112
 
    &#x2F;&#x2F;Rendering the Editor.
113
 
    editor.render(&#x27;#editor&#x27;);
114
 
 
115
 
});</pre>
116
 
 
117
 
 
118
 
<h2 id="events">Events</h2>
119
 
 
120
 
<p>By default, the frame instance under the hood of Editor attaches a listener for all known DOM events. The example
121
 
below shows how you can listen and interact with them.</p>
122
 
 
123
 
<pre class="code prettyprint">YUI().use(&#x27;editor-base&#x27;, function(Y) {
124
 
 
125
 
    var editor = new Y.EditorBase({
126
 
        content: &#x27;&lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &lt;strong&gt;This is &lt;em&gt;a test&lt;&#x2F;em&gt;&lt;&#x2F;strong&gt; &#x27;
127
 
    });
128
 
 
129
 
    &#x2F;&#x2F;Add the BiDi plugin
130
 
    editor.plug(Y.Plugin.EditorBidi);
131
 
 
132
 
    editor.on(&#x27;frame:keydown&#x27;, function(e) {
133
 
        &#x2F;&#x2F;Listen for the keydown event inside the Editor.
134
 
        &#x2F;*
135
 
            This event object contains 3 new properties:
136
 
                frameEvent
137
 
                frameTarget
138
 
                frameCurrentTarget
139
 
 
140
 
            These properties are the original properties before
141
 
            the Event was fired, so you can use them like:
142
 
 
143
 
                e.frameEvent.halt();
144
 
        *&#x2F;
145
 
    });
146
 
 
147
 
    editor.on(&#x27;frame:mouseup&#x27;, function(e) {
148
 
        &#x2F;&#x2F;Listen for the mouseup event inside the Editor.
149
 
    });
150
 
 
151
 
    &#x2F;&#x2F;Rendering the Editor.
152
 
    editor.render(&#x27;#editor&#x27;);
153
 
 
154
 
});</pre>
155
 
 
156
 
 
157
 
<h2 id="nodechange">Node Change Event</h2>
158
 
 
159
 
<p>The <code>nodeChange</code> event is a special event that Editor emits so that you can react to certain important moments that occured.</p>
160
 
<p>The most common use for the <code>nodeChange</code> event is to update the state of a Toolbar.</p>
161
 
 
162
 
<h3 id="nodechange-event-properties">nodeChange event properties</h3>
163
 
<p>This list contains the properties that are added to the Event object when the <code>nodeChange</code> event is fired.</p>
164
 
<table>
165
 
    <thead>
166
 
        <tr>
167
 
            <th>Event Property</th>
168
 
            <th>Description</th>
169
 
        </tr>
170
 
    </thead>
171
 
    <tbody>
172
 
        <tr>
173
 
            <td nowrap="nowrap"><code>changedEvent</code></td>
174
 
            <td>The event that caused the nodeChange</td>
175
 
        </tr>
176
 
        <tr>
177
 
            <td nowrap="nowrap"><code>changedNode</code></td>
178
 
            <td>The node that was interacted with</td>
179
 
        </tr>
180
 
        <tr>
181
 
            <td nowrap="nowrap"><code>changedType</code></td>
182
 
            <td>The type of change: mousedown, mouseup, right, left, backspace, tab, enter, etc..</td>
183
 
        </tr>
184
 
        <tr>
185
 
            <td nowrap="nowrap"><code>commands</code></td>
186
 
            <td>The list of execCommands that belong to this change and the dompath that's associated with the changedNode</td>
187
 
        </tr>
188
 
        <tr>
189
 
            <td nowrap="nowrap"><code>classNames</code></td>
190
 
            <td>An array of classNames that are applied to the changedNode and all of its parents</td>
191
 
        </tr>
192
 
        <tr>
193
 
            <td nowrap="nowrap"><code>dompath</code></td>
194
 
            <td>A sorted array of node instances that make up the DOM path from the changedNode to body.</td>
195
 
        </tr>
196
 
        <tr>
197
 
            <td nowrap="nowrap"><code>backgroundColor</code></td>
198
 
            <td>The cascaded backgroundColor of the changedNode</td>
199
 
        </tr>
200
 
        <tr>
201
 
            <td nowrap="nowrap"><code>fontColor</code></td>
202
 
            <td>The cascaded fontColor of the changedNode</td>
203
 
        </tr>
204
 
        <tr>
205
 
            <td nowrap="nowrap"><code>fontFamily</code></td>
206
 
            <td>The cascaded fontFamily of the changedNode</td>
207
 
        </tr>
208
 
        <tr>
209
 
            <td nowrap="nowrap"><code>fontSize</code></td>
210
 
            <td>The cascaded fontSize of the changedNode</td>
211
 
        </tr>
212
 
    </tbody>
213
 
</table>
214
 
 
215
 
 
216
 
<h2 id="modules">Module Descriptions</h2>
217
 
 
218
 
<p>Using YUI 3's plugin architecture, this version of the Rich Text Editor is even more modular and extensible than the previous version.
219
 
Almost every part of the Editor infrastructure is a plugin or extension. Below you will find the current list of plugins shipped with Editor.</p>
220
 
<table>
221
 
    <thead>
222
 
        <tr>
223
 
            <th>Module Name</th>
224
 
            <th>Description</th>
225
 
        </tr>
226
 
    </thead>
227
 
    <tbody>
228
 
        <tr>
229
 
            <td nowrap="nowrap"><code>frame</code></td>
230
 
            <td>Controls the creation and set up of the editable area</td>
231
 
        </tr>
232
 
        <tr>
233
 
            <td nowrap="nowrap"><code>selection</code></td>
234
 
            <td>Cross-browser selection normalization</td>
235
 
        </tr>
236
 
        <tr>
237
 
            <td nowrap="nowrap"><code>exec-command</code></td>
238
 
            <td>Plugs into frame to extend <code>document.execCommand</code> support.</td>
239
 
        </tr>
240
 
        <tr>
241
 
            <td nowrap="nowrap"><code>editor-tab</code></td>
242
 
            <td>Overrides the default tab key handler and indents/outdents the current block level element.</td>
243
 
        </tr>
244
 
        <tr>
245
 
            <td nowrap="nowrap"><code>editor-para</code></td>
246
 
            <td>Paragraph support (opposite of <code>editor-br</code>)</td>
247
 
        </tr>
248
 
        <tr>
249
 
            <td nowrap="nowrap"><code>editor-br</code></td>
250
 
            <td>Line break support (opposite of <code>editor-para</code>) </td>
251
 
        </tr>
252
 
        <tr>
253
 
            <td nowrap="nowrap"><code>editor-bidi</code></td>
254
 
            <td>Paragraph/Bi-Directional support</td>
255
 
        </tr>
256
 
        <tr>
257
 
            <td nowrap="nowrap"><code>createlink-base</code></td>
258
 
            <td>Simple <code>prompt</code> based link creation.</td>
259
 
        </tr>
260
 
        <tr>
261
 
            <td nowrap="nowrap"><code>editor-base</code></td>
262
 
            <td>Rollup of the above modules</td>
263
 
        </tr>
264
 
        <tr>
265
 
            <td nowrap="nowrap"><code>editor</code></td>
266
 
            <td>Rollup of the above modules</td>
267
 
        </tr>
268
 
    </tbody>
269
 
</table>
270
 
 
271
 
<p><strong>Note:</strong> Either <code>editor-br</code> or <code>editor-para</code> should be plugged. One, but not both, is required for proper functionality.</p>
272
 
</div>
273
 
        </div>
274
 
 
275
 
        <div id="sidebar" class="yui3-u">
276
 
            
277
 
                <div id="toc" class="sidebox">
278
 
                    <div class="hd">
279
 
                        <h2 class="no-toc">Table of Contents</h2>
280
 
                    </div>
281
 
 
282
 
                    <div class="bd">
283
 
                        <ul class="toc">
284
 
<li>
285
 
<a href="#getting-started">Getting Started</a>
286
 
</li>
287
 
<li>
288
 
<a href="#query">Creating an Editor</a>
289
 
</li>
290
 
<li>
291
 
<a href="#instance">Frame Instance</a>
292
 
</li>
293
 
<li>
294
 
<a href="#events">Events</a>
295
 
</li>
296
 
<li>
297
 
<a href="#nodechange">Node Change Event</a>
298
 
<ul class="toc">
299
 
<li>
300
 
<a href="#nodechange-event-properties">nodeChange event properties</a>
301
 
</li>
302
 
</ul>
303
 
</li>
304
 
<li>
305
 
<a href="#modules">Module Descriptions</a>
306
 
</li>
307
 
</ul>
308
 
                    </div>
309
 
                </div>
310
 
            
311
 
 
312
 
            
313
 
                <div class="sidebox">
314
 
                    <div class="hd">
315
 
                        <h2 class="no-toc">Examples</h2>
316
 
                    </div>
317
 
 
318
 
                    <div class="bd">
319
 
                        <ul class="examples">
320
 
                            
321
 
                                
322
 
                                    <li data-description="Use the Editor&#x27;s instance to query the iframe">
323
 
                                        <a href="editor-instance.html">Using the Editor&#x27;s instance</a>
324
 
                                    </li>
325
 
                                
326
 
                            
327
 
                                
328
 
                                    <li data-description="Using the Editor&#x27;s built in events.">
329
 
                                        <a href="editor-events.html">Editor Events</a>
330
 
                                    </li>
331
 
                                
332
 
                            
333
 
                                
334
 
                                    <li data-description="Using the Editor&#x27;s nodeChange Event.">
335
 
                                        <a href="editor-nodechange.html">NodeChange Event</a>
336
 
                                    </li>
337
 
                                
338
 
                            
339
 
                                
340
 
                                    <li data-description="Creating and using your own ExecCommands">
341
 
                                        <a href="editor-exec.html">ExecCommands</a>
342
 
                                    </li>
343
 
                                
344
 
                            
345
 
                        </ul>
346
 
                    </div>
347
 
                </div>
348
 
            
349
 
 
350
 
            
351
 
        </div>
352
 
    </div>
353
 
</div>
354
 
 
355
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
356
 
<script>prettyPrint();</script>
357
 
 
358
 
</body>
359
 
</html>