[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / release / samples / old / toolbar / toolbar.html

<!DOCTYPE html>\r
<!--\r
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.md or http://ckeditor.com/license\r
-->\r
<html>\r
<head>\r
	<meta charset="utf-8">\r
	<title>Toolbar Configuration &mdash; CKEditor Sample</title>\r
	<meta name="ckeditor-sample-name" content="Toolbar Configurations">\r
	<meta name="ckeditor-sample-group" content="Advanced Samples">\r
	<meta name="ckeditor-sample-description" content="Configuring CKEditor to display full or custom toolbar layout.">\r
	<script src="../../../ckeditor.js"></script>\r
	<link href="../../../samples/old/sample.css" rel="stylesheet">\r
</head>\r
<body>\r
	<h1 class="samples">\r
		<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Toolbar Configuration\r
	</h1>\r
	<div class="warning deprecated">\r
		This sample is not maintained anymore. Check out the <a href="../../../samples/toolbarconfigurator/index.html#basic">brand new CKEditor Toolbar Configurator</a>.\r
	</div>\r
	<div class="description">\r
		<p>\r
			This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if\r
			current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.\r
		</p>\r
\r
		<p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>\r
\r
		<h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>\r
\r
		<p>\r
			You can explicitly define which buttons are displayed in which groups and in which order.\r
			This is the more precise setting, but less flexible. If newly added plugin adds its\r
			own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.\r
		</p>\r
\r
		<p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>\r
\r
		<pre class="samples">\r
CKEDITOR.replace( <em>'textarea_id'</em>, {\r
	<strong>toolbar:</strong> [\r
		{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },	// Defines toolbar group with name (used to create voice label) and items in 3 subgroups.\r
		[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],			// Defines toolbar group without name.\r
		'/',																					// Line break - next group will be placed in new line.\r
		{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }\r
	]\r
});</pre>\r
\r
		<h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>\r
\r
		<p>\r
			You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>\r
			and <code>forms</code>) are displayed and in which order. Registered buttons are associated\r
			with toolbar groups by <code>toolbar</code> property in their definition.\r
			This setting's advantage is that you don't have to modify toolbar configuration\r
			when adding/removing plugins which register their own buttons.\r
		</p>\r
\r
		<p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>\r
\r
		<pre class="samples">\r
CKEDITOR.replace( <em>'textarea_id'</em>, {\r
	<strong>toolbarGroups:</strong> [\r
		{ name: 'document',	   groups: [ 'mode', 'document' ] },			// Displays document group with its two subgroups.\r
 		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },			// Group's name will be used to create voice label.\r
 		'/',																// Line break - next group will be placed in new line.\r
 		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },\r
 		{ name: 'links' }\r
	]\r
\r
	// NOTE: Remember to leave 'toolbar' property with the default value (null).\r
});</pre>\r
	</div>\r
\r
	<div id="currentToolbar" style="display: none">\r
		<h2 class="samples">Current toolbar configuration</h2>\r
		<p>Below you can see editor with current toolbar definition.</p>\r
		<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>\r
		<pre id="editorCurrentCfg" class="samples"></pre>\r
	</div>\r
\r
	<div id="fullToolbar">\r
		<h2 class="samples">Full toolbar configuration</h2>\r
		<p>Below you can see editor with full toolbar, generated automatically by the editor.</p>\r
		<p>\r
			<strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.\r
			Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.\r
		</p>\r
		<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>\r
		<pre id="editorFullCfg" class="samples"></pre>\r
	</div>\r
\r
	<script>\r
\r
(function() {\r
	'use strict';\r
\r
	var buttonsNames;\r
\r
	CKEDITOR.config.extraPlugins = 'toolbar';\r
\r
	CKEDITOR.on( 'instanceReady', function( evt ) {\r
		var editor = evt.editor,\r
			editorCurrent = editor.name == 'editorCurrent',\r
			defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups || editor.config.removeButtons ),\r
			pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),\r
			output = '';\r
\r
		if ( editorCurrent ) {\r
			// If default toolbar configuration has been modified, show "current toolbar" section.\r
			if ( !defaultToolbar )\r
				CKEDITOR.document.getById( 'currentToolbar' ).show();\r
			else\r
				return;\r
		}\r
\r
		if ( !buttonsNames )\r
			buttonsNames = createButtonsNamesHash( editor.ui.items );\r
\r
		// Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.\r
		if ( !editor.config.toolbar ) {\r
			output +=\r
				'// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +\r
				dumpToolbarConfiguration( editor ) +\r
				'\n\n' +\r
				'// Toolbar groups configuration.\n' +\r
				dumpToolbarConfiguration( editor, true )\r
		}\r
		// Toolbar groups doesn't count in this case - print only toolbar.\r
		else {\r
			output += '// Toolbar configuration.\n' +\r
				dumpToolbarConfiguration( editor );\r
		}\r
\r
		// Recreate to avoid old IE from loosing whitespaces on filling <pre> content.\r
		var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output );\r
		CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );\r
	} );\r
\r
	CKEDITOR.replace( 'editorCurrent', { height: 100 } );\r
	CKEDITOR.replace( 'editorFull', {\r
		// Reset toolbar settings, so full toolbar will be generated automatically.\r
		toolbar: null,\r
		toolbarGroups: null,\r
		removeButtons: null,\r
		height: 100\r
	} );\r
\r
	function dumpToolbarConfiguration( editor, printGroups ) {\r
		var output = [],\r
			toolbar = editor.toolbar;\r
\r
		for ( var i = 0; i < toolbar.length; ++i ) {\r
			var group = dumpToolbarGroup( toolbar[ i ], printGroups );\r
			if ( group )\r
				output.push( group );\r
		}\r
\r
		return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];';\r
	}\r
\r
	function dumpToolbarGroup( group, printGroups ) {\r
		var output = [];\r
\r
		if ( typeof group == 'string' )\r
			return '\'' + group + '\'';\r
		if ( CKEDITOR.tools.isArray( group ) )\r
			return dumpToolbarItems( group );\r
		// Skip group when printing entire toolbar configuration and there are no items in this group.\r
		if ( !printGroups && !group.items )\r
			return;\r
\r
		if ( group.name )\r
			output.push( 'name: \'' + group.name + '\'' );\r
\r
		if ( group.groups )\r
			output.push( 'groups: ' + dumpToolbarItems( group.groups ) );\r
\r
		if ( !printGroups )\r
			output.push( 'items: ' + dumpToolbarItems( group.items ) );\r
\r
		return '{ ' + output.join( ', ' ) + ' }';\r
	}\r
\r
	function dumpToolbarItems( items ) {\r
		if ( typeof items == 'string' )\r
			return '\'' + items + '\'';\r
\r
		var names = [],\r
			i, item;\r
\r
		for ( var i = 0; i < items.length; ++i ) {\r
			item = items[ i ];\r
			if ( typeof item == 'string' )\r
				names.push( item );\r
			else {\r
				if ( item.type == CKEDITOR.UI_SEPARATOR )\r
					names.push( '-' );\r
				else\r
					names.push( buttonsNames[ item.name ] );\r
			}\r
		}\r
\r
		return '[ \'' + names.join( '\', \'' ) + '\' ]';\r
	}\r
\r
	// Creates { 'lowercased': 'LowerCased' } buttons names hash.\r
	function createButtonsNamesHash( items ) {\r
		var hash = {},\r
			name;\r
\r
		for ( name in items ) {\r
			hash[ items[ name ].name ] = name;\r
		}\r
\r
		return hash;\r
	}\r
\r
})();\r
	</script>\r
\r
	<div id="footer">\r
		<hr>\r
		<p>\r
			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
		</p>\r
		<p id="copy">\r
			Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
			Knabben. All rights reserved.\r
		</p>\r
	</div>\r
</body>\r
</html>\r
Commit	Line	Data
7adcb81e IB	1	<!DOCTYPE html>\r
7adcb81e IB	2	<!--\r
3b35bd27	3	Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
7adcb81e IB	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
3b35bd27	230	Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
7adcb81e IB	231	Knabben. All rights reserved.\r
	232	</p>\r
	233	</div>\r
	234	</body>\r
	235	</html>\r