~ubuntu-branches/ubuntu/utopic/ldap-account-manager/utopic-proposed

« back to all changes in this revision

Viewing changes to templates/lib/extra/ckeditor/plugins/indent/dev/indent.html

  • Committer: Package Import Robot
  • Author(s): Roland Gruber
  • Date: 2014-06-12 17:51:20 UTC
  • mfrom: (1.2.24)
  • Revision ID: package-import@ubuntu.com-20140612175120-grobhwyk369g9aod
Tags: 4.6-1
new upstream release

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE html>
 
2
<!--
 
3
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 
4
For licensing, see LICENSE.md or http://ckeditor.com/license
 
5
-->
 
6
<html>
 
7
<head>
 
8
        <meta charset="utf-8">
 
9
        <title>Indent DEV sample</title>
 
10
        <script src="../../../ckeditor.js"></script>
 
11
        <style>
 
12
                body {
 
13
                        padding: 20px;
 
14
                        margin: 0;
 
15
                }
 
16
                .editors {
 
17
                        display: block;
 
18
                        overflow: hidden;
 
19
                        width: 100%;
 
20
                        margin: 0px auto;
 
21
                        list-style-type: none;
 
22
                        margin: 0;
 
23
                        padding: 0;
 
24
 
 
25
                        box-sizing: content-box;
 
26
                        -moz-box-sizing: content-box;
 
27
                        -webkit-box-sizing: content-box;
 
28
 
 
29
                        background: #eee;
 
30
                }
 
31
                .editors li {
 
32
                        width: 50%;
 
33
                        margin: 0;
 
34
                        padding: 10px;
 
35
                        float: left;
 
36
 
 
37
                        box-sizing: border-box;
 
38
                        -moz-box-sizing: border-box;
 
39
                        -webkit-box-sizing: border-box;
 
40
 
 
41
                }
 
42
                .editors li:nth-child(2n) {
 
43
                        background: #D4E59A;
 
44
                }
 
45
                #menu {
 
46
                        position: fixed;
 
47
                        top: 0;
 
48
                        right: 20px;
 
49
                        padding: 5px;
 
50
                        border: 1px solid #aaa;
 
51
                        background: #eee;
 
52
                }
 
53
 
 
54
        </style>
 
55
</head>
 
56
<body>
 
57
        <p id="menu">
 
58
                <a href="#listnblock">List &amp; Block</a>,
 
59
                <a href="#classes">Classes</a>,
 
60
                <a href="#list">List</a>,
 
61
                <a href="#block">Block</a>,
 
62
                <a href="#br">ENTER_BR</a>
 
63
        </p>
 
64
 
 
65
        <h1 class="samples">Indent DEV sample</h1>
 
66
        <h2 id="listnblock">List &amp; Block</h2>
 
67
        <ul class="editors">
 
68
                <li>
 
69
                        <textarea cols="80" id="editor1" rows="10">
 
70
                                <p>xx</p>
 
71
                                <ul>
 
72
                                        <li>x</li>
 
73
                                        <li>y</li>
 
74
                                </ul>
 
75
                                <p>xx</p>
 
76
 
 
77
                                <br>
 
78
 
 
79
                                <ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>
 
80
                        </textarea>
 
81
                </li>
 
82
                <li>
 
83
                        <pre id="editor1_out"></pre>
 
84
                </li>
 
85
        </ul>
 
86
 
 
87
        <h2 id="classes">Indent classes</h2>
 
88
        <ul class="editors">
 
89
                <li>
 
90
                        <textarea cols="80" id="editor2" rows="10">
 
91
                                <ul>
 
92
                                        <li>a</li>
 
93
                                        <li>
 
94
                                                b
 
95
                                                <ol>
 
96
                                                        <li>inner</li>
 
97
                                                </ol>
 
98
                                        </li>
 
99
                                        <li>c</li>
 
100
                                </ul>
 
101
                                <p>moo</p>
 
102
                        </textarea>
 
103
                </li>
 
104
                <li>
 
105
                        <pre id="editor2_out"></pre>
 
106
                </li>
 
107
        </ul>
 
108
 
 
109
        <h2 id="list">List only</h2>
 
110
        <ul class="editors">
 
111
                <li>
 
112
                        <textarea cols="80" id="editor3" rows="10">
 
113
                                <ul>
 
114
                                        <li>a</li>
 
115
                                        <li>
 
116
                                                b
 
117
                                                <ol>
 
118
                                                        <li>inner</li>
 
119
                                                </ol>
 
120
                                        </li>
 
121
                                        <li>c</li>
 
122
                                </ul>
 
123
                                <p>moo</p>
 
124
                        </textarea>
 
125
                </li>
 
126
                <li>
 
127
                        <pre id="editor3_out"></pre>
 
128
                </li>
 
129
        </ul>
 
130
 
 
131
        <h2 id="block">Block only</h2>
 
132
        <ul class="editors">
 
133
                <li>
 
134
                        <textarea cols="80" id="editor4" rows="10">
 
135
                                <ul>
 
136
                                        <li>a</li>
 
137
                                        <li>
 
138
                                                b
 
139
                                                <ol>
 
140
                                                        <li>inner</li>
 
141
                                                </ol>
 
142
                                        </li>
 
143
                                        <li>c</li>
 
144
                                </ul>
 
145
                                <p>moo</p>
 
146
                        </textarea>
 
147
                </li>
 
148
                <li>
 
149
                        <pre id="editor4_out"></pre>
 
150
                </li>
 
151
        </ul>
 
152
 
 
153
        <h2 id="br">CKEDITOR.ENTER_BR</h2>
 
154
        <ul class="editors">
 
155
                <li>
 
156
                        <textarea cols="80" id="editor5" rows="10">
 
157
                                Text
 
158
                                <br>
 
159
                                <ul>
 
160
                                        <li>a</li>
 
161
                                        <li>b</li>
 
162
                                </ul>
 
163
                        </textarea>
 
164
                </li>
 
165
                <li>
 
166
                        <pre id="editor5_out"></pre>
 
167
                </li>
 
168
        </ul>
 
169
        <script>
 
170
 
 
171
                var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';
 
172
 
 
173
                CKEDITOR.config.indentOffset = 10;
 
174
                CKEDITOR.addCss( '\
 
175
                        .i1{ margin-left: 10px}\
 
176
                        .i2{ margin-left: 20px}\
 
177
                        .i3{ margin-left: 30px}' );
 
178
 
 
179
                function showData( event ) {
 
180
                        CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );
 
181
                }
 
182
 
 
183
                function browserHtmlFix( html ) {
 
184
                        if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {
 
185
                                // Fix output base href on anchored link.
 
186
                                html = html.replace( /href="(.*?)#(.*?)"/gi,
 
187
                                   function( m, base, anchor ) {
 
188
                                           if ( base == window.location.href.replace( window.location.hash, '' ) )
 
189
                                                   return 'href="#' + anchor + '"';
 
190
 
 
191
                                           return m;
 
192
                                   } );
 
193
 
 
194
                                // Fix output line break after HR.
 
195
                                html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );
 
196
                        }
 
197
 
 
198
                        return html;
 
199
                }
 
200
 
 
201
                function getHtmlWithSelection( editorOrElement, root ) {
 
202
                        var isEditor = editorOrElement instanceof CKEDITOR.editor,
 
203
                                element =  isEditor ? editorOrElement.editable() : editorOrElement;
 
204
 
 
205
                        root = isEditor ? element :
 
206
                                   root instanceof CKEDITOR.dom.document ?
 
207
                                   root.getBody() : root || CKEDITOR.document.getBody();
 
208
 
 
209
                        function replaceWithBookmark( match, startOrEnd ) {
 
210
                                var bookmark;
 
211
                                switch( startOrEnd ) {
 
212
                                        case 'S' :
 
213
                                                bookmark = '[';
 
214
                                                break;
 
215
                                        case 'E' :
 
216
                                                bookmark = ']';
 
217
                                                break;
 
218
                                        case 'C' :
 
219
                                                bookmark = '^';
 
220
                                                break;
 
221
                                }
 
222
                                return bookmark;
 
223
                        }
 
224
 
 
225
                        // Hack: force remove the filling char hack in Webkit.
 
226
                        isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );
 
227
 
 
228
                        var sel = isEditor ? editorOrElement.getSelection()
 
229
                                          : new CKEDITOR.dom.selection( root );
 
230
 
 
231
                        var doc = sel.document;
 
232
                        var ranges = sel.getRanges(),
 
233
                                range;
 
234
 
 
235
                        var bms = [];
 
236
                        var iter = ranges.createIterator();
 
237
                        while( range = iter.getNextRange() )
 
238
                                bms.push( range.createBookmark( 1 ) );
 
239
 
 
240
                        var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );
 
241
                        html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,
 
242
                                                                 replaceWithBookmark );
 
243
 
 
244
                        for ( var i = 0, bm; i < bms.length; i++ ) {
 
245
                                bm = bms[ i ];
 
246
                                var start = doc.getById( bm.startNode ),
 
247
                                        end = doc.getById( bm.endNode );
 
248
 
 
249
                                start && start.remove();
 
250
                                end && end.remove();
 
251
                        }
 
252
 
 
253
                        return html;
 
254
                }
 
255
 
 
256
                CKEDITOR.on( 'instanceReady', function ( event ) {
 
257
                        var editor = event.editor;
 
258
 
 
259
                        showData.call( editor );
 
260
 
 
261
                        editor.on( 'afterCommandExec', showData, editor );
 
262
                });
 
263
 
 
264
                CKEDITOR.replace( 'editor1', {
 
265
                        plugins: plugins
 
266
                } );
 
267
 
 
268
                CKEDITOR.replace( 'editor2', {
 
269
                        plugins: plugins,
 
270
                        indentClasses: [ 'i1', 'i2', 'i3' ]
 
271
                } );
 
272
 
 
273
                CKEDITOR.replace( 'editor3', {
 
274
                        plugins: plugins,
 
275
                        removePlugins: 'indentblock'
 
276
                } );
 
277
 
 
278
                CKEDITOR.replace( 'editor4', {
 
279
                        plugins: plugins,
 
280
                        removePlugins: 'indentlist'
 
281
                } );
 
282
 
 
283
                CKEDITOR.replace( 'editor5', {
 
284
                        plugins: plugins,
 
285
                        enterMode: CKEDITOR.ENTER_BR
 
286
                } );
 
287
        </script>
 
288
</body>
 
289
</html>