WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/plugins/toolbar/toolbar.html

Rev	Author	Line No.	Line
1	espaco	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>Toolbar Configuration — 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> » 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">
		39	CKEDITOR.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">
		61	CKEDITOR.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"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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 © 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
		228	Knabben. All rights reserved.
		229	</p>
		230	</div>
		231	</body>
		232	</html>

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/plugins/toolbar/toolbar.html - Rev 1