RubyGems - cg_app_base - Versions diffs - 1.0.51 - Mend

cg_app_base 1.0.51

Files changed (852) hide show

data/app/assets/javascripts/flatty/plugins/ckeditor/samples/plugins/htmlwriter/outputhtml.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<title>HTML Compliant Output &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../../../ckeditor.js"></script>
+	<script src="../../sample.js"></script>
+	<link href="../../sample.css" rel="stylesheet">
+	<meta name="ckeditor-sample-required-plugins" content="sourcearea">
+	<meta name="ckeditor-sample-name" content="Output HTML">
+	<meta name="ckeditor-sample-group" content="Advanced Samples">
+	<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">
+</head>
+<body>
+	<h1 class="samples">
+		<a href="../../index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure CKEditor to output valid
+			<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
+			Traditional HTML elements like <code>&lt;b&gt;</code>,
+			<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
+			<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
+		</p>
+		<p>
+			To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
+			JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
+		</p>
+		<p>
+			A snippet of the configuration code can be seen below; check the source of this page for
+			full definition:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	coreStyles_bold: { element: 'b' },
+	coreStyles_italic: { element: 'i' },
+	fontSize_style: {
+		element: 'font',
+		attributes: { 'size': '#(size)' }
+	}
+	...
+});</pre>
+	</div>
+	<form action="../../sample_posteddata.php" method="post">
+		<p>
+			<label for="editor1">
+				Editor 1:
+			</label>
+			<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
+			<script>
+				CKEDITOR.replace( 'editor1', {
+					/*
+					 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
+					 */
+					extraPlugins: 'htmlwriter',
+					/*
+					 * Style sheet for the contents
+					 */
+					contentsCss: 'body {color:#000; background-color#:FFF;}',
+					/*
+					 * Simple HTML5 doctype
+					 */
+					docType: '<!DOCTYPE HTML>',
+					/*
+					 * Allowed content rules which beside limiting allowed HTML
+					 * will also take care of transforming styles to attributes
+					 * (currently only for img - see transformation rules defined below).
+					 *
+					 * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
+					 */
+					allowedContent:
+						'h1 h2 h3 p pre[align]; ' +
+						'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
+						'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
+					/*
+					 * Core styles.
+					 */
+					coreStyles_bold: { element: 'b' },
+					coreStyles_italic: { element: 'i' },
+					coreStyles_underline: { element: 'u' },
+					coreStyles_strike: { element: 'strike' },
+					/*
+					 * Font face.
+					 */
+					// Define the way font elements will be applied to the document.
+					// The "font" element will be used.
+					font_style: {
+						element: 'font',
+						attributes: { 'face': '#(family)' }
+					},
+					/*
+					 * Font sizes.
+					 */
+					fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
+					fontSize_style: {
+						element: 'font',
+						attributes: { 'size': '#(size)' }
+					},
+					/*
+					 * Font colors.
+					 */
+					colorButton_foreStyle: {
+						element: 'font',
+						attributes: { 'color': '#(color)' }
+					},
+					colorButton_backStyle: {
+						element: 'font',
+						styles: { 'background-color': '#(color)' }
+					},
+					/*
+					 * Styles combo.
+					 */
+					stylesSet: [
+						{ name: 'Computer Code', element: 'code' },
+						{ name: 'Keyboard Phrase', element: 'kbd' },
+						{ name: 'Sample Text', element: 'samp' },
+						{ name: 'Variable', element: 'var' },
+						{ name: 'Deleted Text', element: 'del' },
+						{ name: 'Inserted Text', element: 'ins' },
+						{ name: 'Cited Work', element: 'cite' },
+						{ name: 'Inline Quotation', element: 'q' }
+					],
+					on: {
+						pluginsLoaded: configureTransformations,
+						loaded: configureHtmlWriter
+					}
+				});
+				/*
+				 * Add missing content transformations.
+				 */
+				function configureTransformations( evt ) {
+					var editor = evt.editor;
+					editor.dataProcessor.htmlFilter.addRules( {
+						attributes: {
+							style: function( value, element ) {
+								// Return #RGB for background and border colors
+								return CKEDITOR.tools.convertRgbToHex( value );
+							}
+						}
+					} );
+					// Default automatic content transformations do not yet take care of
+					// align attributes on blocks, so we need to add our own transformation rules.
+					function alignToAttribute( element ) {
+						if ( element.styles[ 'text-align' ] ) {
+							element.attributes.align = element.styles[ 'text-align' ];
+							delete element.styles[ 'text-align' ];
+						}
+					}
+					editor.filter.addTransformations( [
+						[ { element: 'p',	right: alignToAttribute } ],
+						[ { element: 'h1',	right: alignToAttribute } ],
+						[ { element: 'h2',	right: alignToAttribute } ],
+						[ { element: 'h3',	right: alignToAttribute } ],
+						[ { element: 'pre',	right: alignToAttribute } ]
+					] );
+				}
+				/*
+				 * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
+				 */
+				function configureHtmlWriter( evt ) {
+					var editor = evt.editor,
+						dataProcessor = editor.dataProcessor;
+					// Out self closing tags the HTML4 way, like <br>.
+					dataProcessor.writer.selfClosingEnd = '>';
+					// Make output formatting behave similar to FCKeditor.
+					var dtd = CKEDITOR.dtd;
+					for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
+						dataProcessor.writer.setRules( e, {
+							indent: true,
+							breakBeforeOpen: true,
+							breakAfterOpen: false,
+							breakBeforeClose: !dtd[ e ][ '#' ],
+							breakAfterClose: true
+						});
+					}
+				}
+			</script>
+		</p>
+		<p>
+			<input type="submit" value="Submit">
+		</p>
+	</form>
+	<div id="footer">
+		<hr>
+		<p>
+			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+		</p>
+		<p id="copy">
+			Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>

data/app/assets/javascripts/flatty/plugins/ckeditor/samples/plugins/magicline/magicline.html ADDED Viewed

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<title>Using Magicline plugin &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../../../ckeditor.js"></script>
+	<link rel="stylesheet" href="../../sample.css">
+	<meta name="ckeditor-sample-name" content="Magicline plugin">
+	<meta name="ckeditor-sample-group" content="Plugins">
+	<meta name="ckeditor-sample-description" content="Using the Magicline plugin to access difficult focus spaces.">
+	<meta name="ckeditor-sample-isnew" content="1">
+</head>
+<body>
+	<h1 class="samples">
+		<a href="../../index.html">CKEditor Samples</a> &raquo; Using Magicline plugin
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows the advantages of <strong>Magicline</strong> plugin
+			which is to enhance the editing process. Thanks to this plugin,
+			a number of difficult focus spaces which are inaccessible due to
+			browser issues can now be focused.
+		</p>
+		<p>
+			<strong>Magicline</strong> plugin shows a red line with a handler
+			which, when clicked, inserts a paragraph and allows typing. To see this,
+			focus an editor and move your mouse above the focus space you want
+			to access. The plugin is enabled by default so no additional
+			configuration is necessary.
+		</p>
+	</div>
+	<div>
+		<label for="editor1">
+			Editor 1:
+		</label>
+		<div class="description">
+			<p>
+				This editor uses a default <strong>Magicline</strong> setup.
+			</p>
+		</div>
+		<textarea cols="80" id="editor1" name="editor1" rows="10">
+			&lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
+				&lt;tbody&gt;
+					&lt;tr&gt;
+						&lt;td&gt;This table&lt;/td&gt;
+						&lt;td&gt;is the&lt;/td&gt;
+						&lt;td&gt;very first&lt;/td&gt;
+						&lt;td&gt;element of the document.&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;We are still&lt;/td&gt;
+						&lt;td&gt;able to acces&lt;/td&gt;
+						&lt;td&gt;the space before it.&lt;/td&gt;
+						&lt;td&gt;
+						&lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
+							&lt;tbody&gt;
+								&lt;tr&gt;
+									&lt;td&gt;This table is inside of a cell of another table.&lt;/td&gt;
+								&lt;/tr&gt;
+								&lt;tr&gt;
+									&lt;td&gt;We can type&amp;nbsp;either before or after it though.&lt;/td&gt;
+								&lt;/tr&gt;
+							&lt;/tbody&gt;
+						&lt;/table&gt;
+						&lt;/td&gt;
+					&lt;/tr&gt;
+				&lt;/tbody&gt;
+			&lt;/table&gt;
+			&lt;p&gt;Two succesive horizontal lines (&lt;tt&gt;HR&lt;/tt&gt; tags). We can access the space in between:&lt;/p&gt;
+			&lt;hr /&gt;
+			&lt;hr /&gt;
+			&lt;ol&gt;
+				&lt;li&gt;This numbered list...&lt;/li&gt;
+				&lt;li&gt;...is a neighbour of a horizontal line...&lt;/li&gt;
+				&lt;li&gt;...and another list.&lt;/li&gt;
+			&lt;/ol&gt;
+			&lt;ul&gt;
+				&lt;li&gt;We can type between the lists...&lt;/li&gt;
+				&lt;li&gt;...thanks to &lt;strong&gt;Magicline&lt;/strong&gt;.&lt;/li&gt;
+			&lt;/ul&gt;
+			&lt;p&gt;Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.&lt;/p&gt;
+			&lt;p&gt;Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.&lt;/p&gt;
+			&lt;p&gt;Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.&lt;/p&gt;
+			&lt;div style=&quot;border: 2px dashed green; background: #ddd; text-align: center;&quot;&gt;
+			&lt;p&gt;This text is wrapped in a&amp;nbsp;&lt;tt&gt;DIV&lt;/tt&gt;&amp;nbsp;element. We can type after this element though.&lt;/p&gt;
+			&lt;/div&gt;
+		</textarea>
+		<script>
+			// This call can be placed at any point after the
+			// <textarea>, or inside a <head><script> in a
+			// window.onload event handler.
+			CKEDITOR.replace( 'editor1', {
+				extraPlugins: 'magicline',	// Ensure that magicline plugin, which is required for this sample, is loaded.
+				allowedContent: true		// Switch off the ACF, so very complex content created to
+											// show magicline's power isn't filtered.
+			} );
+		</script>
+	</div>
+	<br>
+	<div>
+		<label for="editor2">
+			Editor 2:
+		</label>
+		<div class="description">
+			<p>
+				This editor is using a blue line.
+			</p>
+<pre class="samples">
+CKEDITOR.replace( 'editor2', {
+	magicline_color: 'blue'
+});</pre>
+		</div>
+		<textarea cols="80" id="editor2" name="editor2" rows="10">
+			&lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
+				&lt;tbody&gt;
+					&lt;tr&gt;
+						&lt;td&gt;This table&lt;/td&gt;
+						&lt;td&gt;is the&lt;/td&gt;
+						&lt;td&gt;very first&lt;/td&gt;
+						&lt;td&gt;element of the document.&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;We are still&lt;/td&gt;
+						&lt;td&gt;able to acces&lt;/td&gt;
+						&lt;td&gt;the space before it.&lt;/td&gt;
+						&lt;td&gt;
+						&lt;table border=&quot;1&quot; cellpadding=&quot;1&quot; cellspacing=&quot;1&quot; style=&quot;width: 100%; &quot;&gt;
+							&lt;tbody&gt;
+								&lt;tr&gt;
+									&lt;td&gt;This table is inside of a cell of another table.&lt;/td&gt;
+								&lt;/tr&gt;
+								&lt;tr&gt;
+									&lt;td&gt;We can type&amp;nbsp;either before or after it though.&lt;/td&gt;
+								&lt;/tr&gt;
+							&lt;/tbody&gt;
+						&lt;/table&gt;
+						&lt;/td&gt;
+					&lt;/tr&gt;
+				&lt;/tbody&gt;
+			&lt;/table&gt;
+			&lt;p&gt;Two succesive horizontal lines (&lt;tt&gt;HR&lt;/tt&gt; tags). We can access the space in between:&lt;/p&gt;
+			&lt;hr /&gt;
+			&lt;hr /&gt;
+			&lt;ol&gt;
+				&lt;li&gt;This numbered list...&lt;/li&gt;
+				&lt;li&gt;...is a neighbour of a horizontal line...&lt;/li&gt;
+				&lt;li&gt;...and another list.&lt;/li&gt;
+			&lt;/ol&gt;
+			&lt;ul&gt;
+				&lt;li&gt;We can type between the lists...&lt;/li&gt;
+				&lt;li&gt;...thanks to &lt;strong&gt;Magicline&lt;/strong&gt;.&lt;/li&gt;
+			&lt;/ul&gt;
+			&lt;p&gt;Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.&lt;/p&gt;
+			&lt;p&gt;Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.&lt;/p&gt;
+			&lt;p&gt;Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.&lt;/p&gt;
+			&lt;div style=&quot;border: 2px dashed green; background: #ddd; text-align: center;&quot;&gt;
+			&lt;p&gt;This text is wrapped in a&amp;nbsp;&lt;tt&gt;DIV&lt;/tt&gt;&amp;nbsp;element. We can type after this element though.&lt;/p&gt;
+			&lt;/div&gt;
+		</textarea>
+		<script>
+			// This call can be placed at any point after the
+			// <textarea>, or inside a <head><script> in a
+			// window.onload event handler.
+			CKEDITOR.replace( 'editor2', {
+				extraPlugins: 'magicline',	// Ensure that magicline plugin, which is required for this sample, is loaded.
+				magicline_color: 'blue',	// Blue line
+				allowedContent: true		// Switch off the ACF, so very complex content created to
+											// show magicline's power isn't filtered.
+			});
+		</script>
+	</div>
+	<div id="footer">
+		<hr>
+		<p>
+			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+		</p>
+		<p id="copy">
+			Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>

data/app/assets/javascripts/flatty/plugins/ckeditor/samples/plugins/toolbar/toolbar.html ADDED Viewed

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