RubyGems - lafeber_ckeditor - Versions diffs - 3.7.3 - Mend

lafeber_ckeditor 3.7.3

Files changed (1052) hide show

data/app/assets/javascripts/ckeditor/samples/magicline.html ADDED

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2012, 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">
+</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' );
+		</script>
+	</div>
+	<br>
+	<div>
+		<label for="editor2">
+			Editor 2:
+		</label>
+		<div class="description">
+			<p>
+				This editor is using a blue line with slight opacity.
+			</p>
+<pre class="samples">
+CKEDITOR.replace( 'editor2', {
+	magicline_color : 'blue',
+	magicline_opacity : .8
+});</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', {
+				magicline_color : 'blue',	// Blue line
+				magicline_opacity : .5
+			});
+		</script>
+	</div>
+	<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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</footer>
+</body>
+</html>

data/app/assets/javascripts/ckeditor/samples/outputforflash.html ADDED

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<title>Output for Flash &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../ckeditor.js"></script>
+	<script src="assets/outputforflash/swfobject.js"></script>
+	<link href="sample.css" rel="stylesheet">
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; Producing Flash Compliant HTML Output
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure CKEditor to output
+			HTML code that can be used with
+			<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
+			Adobe Flash</a>.
+			The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
+			<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
+		</p>
+		<p>
+			To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
+			JavaScript call, and define CKEditor features to use HTML elements and attributes.
+		</p>
+		<p>
+			For details on how to create this setup check the source code of this sample page.
+		</p>
+	</div>
+	<p>
+		To see how it works, create some content in the editing area of CKEditor on the left
+		and send it to the Flash object on the right side of the page by using the
+		<strong>Send to Flash</strong> button.
+	</p>
+	<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
+		<tr>
+			<td style="width: 100%">
+				<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>
+					if ( document.location.protocol == 'file:' )
+						alert( 'Warning: This samples does not work when loaded from local filesystem' +
+							'due to security restrictions implemented in Flash.' +
+							'\n\nPlease load the sample from a web server instead.' );
+					CKEDITOR.replace( 'editor1', {
+						height: 290,
+						width: '100%',
+						toolbar: [
+							[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
+							[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
+							'/',
+							[ 'Font', 'FontSize' ],
+							[ 'TextColor', '-', 'About' ]
+						],
+						/*
+						 * Style sheet for the contents
+						 */
+						contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
+						/*
+						 * Quirks doctype
+						 */
+						docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
+						/*
+						 * Core styles.
+						 */
+						coreStyles_bold: { element: 'b' },
+						coreStyles_italic: { element: 'i' },
+						coreStyles_underline: { element: 'u' },
+						/*
+						 * 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.
+						 */
+						// The CSS part of the font sizes isn't used by Flash, it is there to get the
+						// font rendered correctly in CKEditor.
+						fontSize_sizes: '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
+						fontSize_style: {
+							element: 'font',
+							attributes: { 'size': '#(size)' },
+							styles: { 'font-size': '#(size)px' }
+						} ,
+						/*
+						 * Font colors.
+						 */
+						colorButton_enableMore: true,
+						colorButton_foreStyle: {
+							element: 'font',
+							attributes: { 'color': '#(color)' }
+						},
+						colorButton_backStyle: {
+							element: 'font',
+							styles: { 'background-color': '#(color)' }
+						},
+						on: { 'instanceReady': configureFlashOutput }
+					});
+					/*
+					 * Adjust the behavior of the dataProcessor to match the
+					 * requirements of Flash
+					 */
+					function configureFlashOutput( ev ) {
+						var editor = ev.editor,
+							dataProcessor = editor.dataProcessor,
+							htmlFilter = dataProcessor && dataProcessor.htmlFilter;
+						// Out self closing tags the HTML4 way, like <br>.
+						dataProcessor.writer.selfClosingEnd = '>';
+						// Make output formatting match Flash expectations
+						var dtd = CKEDITOR.dtd;
+						for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
+							dataProcessor.writer.setRules( e, {
+								indent: false,
+								breakBeforeOpen: false,
+								breakAfterOpen: false,
+								breakBeforeClose: false,
+								breakAfterClose: false
+							});
+						}
+						dataProcessor.writer.setRules( 'br', {
+							indent: false,
+							breakBeforeOpen: false,
+							breakAfterOpen: false,
+							breakBeforeClose: false,
+							breakAfterClose: false
+						});
+						// Output properties as attributes, not styles.
+						htmlFilter.addRules( {
+							elements: {
+								$: function( element ) {
+									var style, match, width, height, align;
+									// Output dimensions of images as width and height
+									if ( element.name == 'img' ) {
+										style = element.attributes.style;
+										if ( style ) {
+											// Get the width from the style.
+											match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style );
+											width = match && match[1];
+											// Get the height from the style.
+											match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
+											height = match && match[1];
+											if ( width ) {
+												element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
+												element.attributes.width = width;
+											}
+											if ( height ) {
+												element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
+												element.attributes.height = height;
+											}
+										}
+									}
+									// Output alignment of paragraphs using align
+									if ( element.name == 'p' ) {
+										style = element.attributes.style;
+										if ( style ) {
+											// Get the align from the style.
+											match = /(?:^|\s)text-align\s*:\s*(\w*);?/i.exec( style );
+											align = match && match[1];
+											if ( align ) {
+												element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
+												element.attributes.align = align;
+											}
+										}
+									}
+									if ( element.attributes.style === '' )
+										delete element.attributes.style;
+									return element;
+								}
+							}
+						});
+					}
+					function sendToFlash() {
+						var html = CKEDITOR.instances.editor1.getData() ;
+						var flash = document.getElementById( 'ckFlashContainer' ) ;
+						flash.setData( html ) ;
+					}
+					CKEDITOR.domReady( function() {
+						swfobject.embedSWF(
+							'assets/outputforflash/outputforflash.swf',
+							'ckFlashContainer',
+							'550',
+							'400',
+							'8',
+							{ wmode: 'transparent' }
+						);
+					});
+				</script>
+				<p>
+					<input type="button" value="Send to Flash" onclick="sendToFlash();">
+				</p>
+			</td>
+			<td style="vertical-align: top; padding-left: 20px">
+				<div id="ckFlashContainer"></div>
+			</td>
+		</tr>
+	</table>
+	<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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>

data/app/assets/javascripts/ckeditor/samples/outputhtml.html ADDED

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2012, 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>
+	<link href="sample.css" rel="stylesheet">
+</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', {
+					/*
+					 * Style sheet for the contents
+					 */
+					contentsCss: 'body {color:#000; background-color#:FFF;}',
+					/*
+					 * Simple HTML5 doctype
+					 */
+					docType: '<!DOCTYPE HTML>',
+					/*
+					 * 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_enableMore: true,
+					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 : { 'instanceReady': configureHtmlOutput }
+				});
+				/*
+				 * Adjust the behavior of the dataProcessor to avoid styles
+				 * and make it look like FCKeditor HTML output.
+				 */
+				function configureHtmlOutput( ev )
+				{
+					var editor = ev.editor,
+						dataProcessor = editor.dataProcessor,
+						htmlFilter = dataProcessor && dataProcessor.htmlFilter;
+					// 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
+						});
+					}
+					// Output properties as attributes, not styles.
+					htmlFilter.addRules( {
+						elements: {
+							$: function( element ) {
+								// Output dimensions of images as width and height
+								if ( element.name == 'img' ) {
+									var style = element.attributes.style;
+									if ( style ) {
+										// Get the width from the style.
+										var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
+											width = match && match[ 1 ];
+										// Get the height from the style.
+										match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
+										var height = match && match[ 1 ];
+										if ( width ) {
+											element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
+											element.attributes.width = width;
+										}
+										if ( height ) {
+											element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
+											element.attributes.height = height;
+										}
+									}
+								}
+								// Output alignment of paragraphs using align
+								if ( element.name == 'p' ) {
+									style = element.attributes.style;
+									if ( style ) {
+										// Get the align from the style.
+										match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
+										var align = match && match[ 1 ];
+										if ( align ) {
+											element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
+											element.attributes.align = align;
+										}
+									}
+								}
+								if ( !element.attributes.style )
+									delete element.attributes.style;
+								return element;
+							}
+						},
+						attributes: {
+							style: function( value, element ) {
+								// Return #RGB for background and border colors
+								return CKEDITOR.tools.convertRgbToHex( value );
+							}
+						}
+					});
+				}
+			</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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>