← Back to branch summary

~therp-nl/web-addons/6.1-web_print_from_browser-hide_kanban_controls

« back to all changes in this revision

Viewing changes to web_ckeditor4/static/lib/ckeditor/samples/plugins/toolbar/toolbar.html

  • Committer: Stefan Rijnhart
  • Author(s): hbrunn at therp
  • Date: 2013-05-29 22:55:12 UTC
  • mfrom: (11.1.10 web-ckeditor4)
  • Revision ID: stefan@therp.nl-20130529225512-jwz5q1jej6lozmcn
[ADD] web_ckeditor

Show diffs side-by-side

added added

removed removed

Lines of Context:
web_ckeditor4/static/lib/ckeditor/samples/plugins/toolbar/toolbar.html
 
1
<!DOCTYPE html>
 
2
<!--
 
3
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 
4
For licensing, see LICENSE.html or http://ckeditor.com/license
 
5
-->
 
6
<html>
 
7
<head>
 
8
        <title>Toolbar Configuration &mdash; CKEditor Sample</title>
 
9
        <meta charset="utf-8">
 
10
        <meta name="ckeditor-sample-name" content="Toolbar Configurations">
 
11
        <meta name="ckeditor-sample-group" content="Advanced Samples">
 
12
        <meta name="ckeditor-sample-description" content="Configuring CKEditor to display full or custom toolbar layout.">
 
13
        <meta name="ckeditor-sample-isnew" content="1">
 
14
        <script src="../../../ckeditor.js"></script>
 
15
        <link href="../../../samples/sample.css" rel="stylesheet">
 
16
</head>
 
17
<body>
 
18
        <h1 class="samples">
 
19
                <a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Toolbar Configuration
 
20
        </h1>
 
21
        <div class="description">
 
22
                <p>
 
23
                        This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if
 
24
                        current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.
 
25
                </p>
 
26
 
 
27
                <p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>
 
28
 
 
29
                <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>
 
30
 
 
31
                <p>
 
32
                        You can explicitly define which buttons are displayed in which groups and in which order.
 
33
                        This is the more precise setting, but less flexible. If newly added plugin adds its
 
34
                        own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.
 
35
                </p>
 
36
 
 
37
                <p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>
 
38
 
 
39
                <pre class="samples">
 
40
CKEDITOR.replace( <em>'textarea_id'</em>, {
 
41
        <strong>toolbar:</strong> [
 
42
                { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
 
43
                [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],                  // Defines toolbar group without name.
 
44
                '/',                                                                                                                                                                    // Line break - next group will be placed in new line.
 
45
                { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
 
46
        ]
 
47
});</pre>
 
48
 
 
49
                <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>
 
50
 
 
51
                <p>
 
52
                        You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>
 
53
                        and <code>forms</code>) are displayed and in which order. Registered buttons are associated
 
54
                        with toolbar groups by <code>toolbar</code> property in their definition.
 
55
                        This setting's advantage is that you don't have to modify toolbar configuration
 
56
                        when adding/removing plugins which register their own buttons.
 
57
                </p>
 
58
 
 
59
                <p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>
 
60
 
 
61
                <pre class="samples">
 
62
CKEDITOR.replace( <em>'textarea_id'</em>, {
 
63
        <strong>toolbarGroups:</strong> [
 
64
                { name: 'document',        groups: [ 'mode', 'document' ] },                    // Displays document group with its two subgroups.
 
65
                { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },                       // Group's name will be used to create voice label.
 
66
                '/',                                                                                                                            // Line break - next group will be placed in new line.
 
67
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
 
68
                { name: 'links' }
 
69
        ]
 
70
 
 
71
        // NOTE: Remember to leave 'toolbar' property with the default value (null).
 
72
});</pre>
 
73
        </div>
 
74
 
 
75
        <div id="currentToolbar" style="display: none">
 
76
                <h2 class="samples">Current toolbar configuration</h2>
 
77
                <p>Below you can see editor with current toolbar definition.</p>
 
78
                <textarea cols="80" id="editorCurrent" name="editorCurrent" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
 
79
                <pre id="editorCurrentCfg" class="samples"></pre>
 
80
        </div>
 
81
 
 
82
        <div id="fullToolbar">
 
83
                <h2 class="samples">Full toolbar configuration</h2>
 
84
                <p>Below you can see editor with full toolbar, generated automatically by the editor.</p>
 
85
                <p>
 
86
                        <strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.
 
87
                        Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.
 
88
                </p>
 
89
                <textarea cols="80" id="editorFull" name="editorFull" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
 
90
                <pre id="editorFullCfg" class="samples"></pre>
 
91
        </div>
 
92
 
 
93
        <script>
 
94
 
 
95
(function() {
 
96
        'use strict';
 
97
 
 
98
        var buttonsNames;
 
99
 
 
100
        CKEDITOR.config.extraPlugins = 'toolbar';
 
101
 
 
102
        CKEDITOR.on( 'instanceReady', function( evt ) {
 
103
                var editor = evt.editor,
 
104
                        editorCurrent = editor.name == 'editorCurrent',
 
105
                        defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups ),
 
106
                        pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),
 
107
                        output = '';
 
108
 
 
109
                if ( editorCurrent ) {
 
110
                        // If default toolbar configuration has been modified, show "current toolbar" section.
 
111
                        if ( !defaultToolbar )
 
112
                                CKEDITOR.document.getById( 'currentToolbar' ).show();
 
113
                        else
 
114
                                return;
 
115
                }
 
116
 
 
117
                if ( !buttonsNames )
 
118
                        buttonsNames = createButtonsNamesHash( editor.ui.items );
 
119
 
 
120
                // Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.
 
121
                if ( !editor.config.toolbar ) {
 
122
                        output +=
 
123
                                '// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +
 
124
                                dumpToolbarConfiguration( editor ) +
 
125
                                '\n\n' +
 
126
                                '// Toolbar groups configuration.\n' +
 
127
                                dumpToolbarConfiguration( editor, true )
 
128
                }
 
129
                // Toolbar groups doesn't count in this case - print only toolbar.
 
130
                else {
 
131
                        output += '// Toolbar configuration.\n' +
 
132
                                dumpToolbarConfiguration( editor );
 
133
                }
 
134
 
 
135
                // Recreate to avoid old IE from loosing whitespaces on filling <pre> content.
 
136
                var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output );
 
137
                CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );
 
138
        } );
 
139
 
 
140
        CKEDITOR.replace( 'editorCurrent', { height: 100 } );
 
141
        CKEDITOR.replace( 'editorFull', {
 
142
                // Reset toolbar settings, so full toolbar will be generated automatically.
 
143
                toolbar: null,
 
144
                toolbarGroups: null,
 
145
                height: 100
 
146
        } );
 
147
 
 
148
        function dumpToolbarConfiguration( editor, printGroups ) {
 
149
                var output = [],
 
150
                        toolbar = editor.toolbar;
 
151
 
 
152
                for ( var i = 0; i < toolbar.length; ++i ) {
 
153
                        var group = dumpToolbarGroup( toolbar[ i ], printGroups );
 
154
                        if ( group )
 
155
                                output.push( group );
 
156
                }
 
157
 
 
158
                return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];';
 
159
        }
 
160
 
 
161
        function dumpToolbarGroup( group, printGroups ) {
 
162
                var output = [];
 
163
 
 
164
                if ( typeof group == 'string' )
 
165
                        return '\'' + group + '\'';
 
166
                if ( CKEDITOR.tools.isArray( group ) )
 
167
                        return dumpToolbarItems( group );
 
168
                // Skip group when printing entire toolbar configuration and there are no items in this group.
 
169
                if ( !printGroups && !group.items )
 
170
                        return;
 
171
 
 
172
                if ( group.name )
 
173
                        output.push( 'name: \'' + group.name + '\'' );
 
174
 
 
175
                if ( group.groups )
 
176
                        output.push( 'groups: ' + dumpToolbarItems( group.groups ) );
 
177
 
 
178
                if ( !printGroups )
 
179
                        output.push( 'items: ' + dumpToolbarItems( group.items ) );
 
180
 
 
181
                return '{ ' + output.join( ', ' ) + ' }';
 
182
        }
 
183
 
 
184
        function dumpToolbarItems( items ) {
 
185
                if ( typeof items == 'string' )
 
186
                        return '\'' + items + '\'';
 
187
 
 
188
                var names = [],
 
189
                        i, item;
 
190
 
 
191
                for ( var i = 0; i < items.length; ++i ) {
 
192
                        item = items[ i ];
 
193
                        if ( typeof item == 'string' )
 
194
                                names.push( item );
 
195
                        else {
 
196
                                if ( item.type == CKEDITOR.UI_SEPARATOR )
 
197
                                        names.push( '-' );
 
198
                                else
 
199
                                        names.push( buttonsNames[ item.name ] );
 
200
                        }
 
201
                }
 
202
 
 
203
                return '[ \'' + names.join( '\', \'' ) + '\' ]';
 
204
        }
 
205
 
 
206
        // Creates { 'lowercased': 'LowerCased' } buttons names hash.
 
207
        function createButtonsNamesHash( items ) {
 
208
                var hash = {},
 
209
                        name;
 
210
 
 
211
                for ( name in items ) {
 
212
                        hash[ items[ name ].name ] = name;
 
213
                }
 
214
 
 
215
                return hash;
 
216
        }
 
217
 
 
218
})();
 
219
        </script>
 
220
 
 
221
        <div id="footer">
 
222
                <hr>
 
223
                <p>
 
224
                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 
225
                </p>
 
226
                <p id="copy">
 
227
                        Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 
228
                        Knabben. All rights reserved.
 
229
                </p>
 
230
        </div>
 
231
</body>
 
232
</html>