Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

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