source: main/trunk/greenstone3/web/interfaces/default/js/ckeditor/samples/plugins/toolbar/toolbar.html@ 29861

Last change on this file since 29861 was 29861, checked in by Georgiy Litvinov, 9 years ago

renamed interfaces
File size: 8.5 KB
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8 <meta charset="utf-8">
9 <title>Toolbar Configuration &mdash; CKEditor Sample</title>
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 <script src="../../../ckeditor.js"></script>
14 <link href="../../../samples/sample.css" rel="stylesheet">
15</head>
16<body>
17 <h1 class="samples">
18 <a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Toolbar Configuration
19 </h1>
20 <div class="description">
21 <p>
22 This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if
23 current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.
24 </p>
25
26 <p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>
27
28 <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>
29
30 <p>
31 You can explicitly define which buttons are displayed in which groups and in which order.
32 This is the more precise setting, but less flexible. If newly added plugin adds its
33 own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.
34 </p>
35
36 <p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>
37
38 <pre class="samples">
39CKEDITOR.replace( <em>'textarea_id'</em>, {
40 <strong>toolbar:</strong> [
41 { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
42 [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
43 '/', // Line break - next group will be placed in new line.
44 { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
45 ]
46});</pre>
47
48 <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>
49
50 <p>
51 You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>
52 and <code>forms</code>) are displayed and in which order. Registered buttons are associated
53 with toolbar groups by <code>toolbar</code> property in their definition.
54 This setting's advantage is that you don't have to modify toolbar configuration
55 when adding/removing plugins which register their own buttons.
56 </p>
57
58 <p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>
59
60 <pre class="samples">
61CKEDITOR.replace( <em>'textarea_id'</em>, {
62 <strong>toolbarGroups:</strong> [
63 { name: 'document', groups: [ 'mode', 'document' ] }, // Displays document group with its two subgroups.
64 { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, // Group's name will be used to create voice label.
65 '/', // Line break - next group will be placed in new line.
66 { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
67 { name: 'links' }
68 ]
69
70 // NOTE: Remember to leave 'toolbar' property with the default value (null).
71});</pre>
72 </div>
73
74 <div id="currentToolbar" style="display: none">
75 <h2 class="samples">Current toolbar configuration</h2>
76 <p>Below you can see editor with current toolbar definition.</p>
77 <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>
78 <pre id="editorCurrentCfg" class="samples"></pre>
79 </div>
80
81 <div id="fullToolbar">
82 <h2 class="samples">Full toolbar configuration</h2>
83 <p>Below you can see editor with full toolbar, generated automatically by the editor.</p>
84 <p>
85 <strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.
86 Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.
87 </p>
88 <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>
89 <pre id="editorFullCfg" class="samples"></pre>
90 </div>
91
92 <script>
93
94(function() {
95 'use strict';
96
97 var buttonsNames;
98
99 CKEDITOR.config.extraPlugins = 'toolbar';
100
101 CKEDITOR.on( 'instanceReady', function( evt ) {
102 var editor = evt.editor,
103 editorCurrent = editor.name == 'editorCurrent',
104 defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups || editor.config.removeButtons ),
105 pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),
106 output = '';
107
108 if ( editorCurrent ) {
109 // If default toolbar configuration has been modified, show "current toolbar" section.
110 if ( !defaultToolbar )
111 CKEDITOR.document.getById( 'currentToolbar' ).show();
112 else
113 return;
114 }
115
116 if ( !buttonsNames )
117 buttonsNames = createButtonsNamesHash( editor.ui.items );
118
119 // Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.
120 if ( !editor.config.toolbar ) {
121 output +=
122 '// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +
123 dumpToolbarConfiguration( editor ) +
124 '\n\n' +
125 '// Toolbar groups configuration.\n' +
126 dumpToolbarConfiguration( editor, true )
127 }
128 // Toolbar groups doesn't count in this case - print only toolbar.
129 else {
130 output += '// Toolbar configuration.\n' +
131 dumpToolbarConfiguration( editor );
132 }
133
134 // Recreate to avoid old IE from loosing whitespaces on filling <pre> content.
135 var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output );
136 CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );
137 } );
138
139 CKEDITOR.replace( 'editorCurrent', { height: 100 } );
140 CKEDITOR.replace( 'editorFull', {
141 // Reset toolbar settings, so full toolbar will be generated automatically.
142 toolbar: null,
143 toolbarGroups: null,
144 removeButtons: 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-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
228 Knabben. All rights reserved.
229 </p>
230 </div>
231</body>
232</html>
Note: See TracBrowser for help on using the repository browser.