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