Subversion Repositories php-qbpwcf

Rev

Details | Last modification | View Log | RSS feed

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