RubyGems - frontendeditor_ckeditor - Versions diffs - 0.0.1 - Mend

frontendeditor_ckeditor 0.0.1

Files changed (430) hide show

data/vendor/assets/javascripts/ckeditor/samples/tabindex.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!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>TAB Key-Based Navigation &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../ckeditor.js"></script>
+	<link href="sample.css" rel="stylesheet">
+	<style>
+		.cke_focused,
+		.cke_editable.cke_focused
+		{
+			outline: 3px dotted blue !important;
+			*border: 3px dotted blue !important;	/* For IE7 */
+		}
+	</style>
+	<script>
+		CKEDITOR.on( 'instanceReady', function( evt ) {
+			var editor = evt.editor;
+			editor.setData( 'This editor has it\'s tabIndex set to <strong>' + editor.tabIndex + '</strong>' );
+			// Apply focus class name.
+			editor.on( 'focus', function() {
+				editor.container.addClass( 'cke_focused' );
+			});
+			editor.on( 'blur', function() {
+				editor.container.removeClass( 'cke_focused' );
+			});
+			// Put startup focus on the first editor in tab order.
+			if ( editor.tabIndex == 1 )
+				editor.focus();
+		});
+	</script>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; TAB Key-Based Navigation
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how tab key navigation among editor instances is
+			affected by the <code>tabIndex</code> attribute from
+			the original page element. Use TAB key to move between the editors.
+		</p>
+	</div>
+	<form action="sample_posteddata.php" method="post">
+		<div class="ckeditor" contenteditable="true" id="editor1" tabindex="4"></div>
+		<p>
+			<textarea class="ckeditor" cols="80" id="editor2" rows="10" tabindex="2"></textarea>
+		</p>
+		<p>
+			<textarea class="ckeditor" cols="80" id="editor3" rows="10" tabindex="3"></textarea>
+		</p>
+		<p>
+			<textarea class="ckeditor" cols="80" id="editor4" rows="10" tabindex="1"></textarea>
+		</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>

data/vendor/assets/javascripts/ckeditor/samples/tableresize.html ADDED Viewed

@@ -0,0 +1,101 @@
+<!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 TableResize 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 the TableResize Plugin
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure CKEditor instances to use the
+			<strong>TableResize</strong> (<code>tableresize</code>) plugin that allows
+			the user to edit table columns by using the mouse.
+		</p>
+		<p>
+			The TableResize plugin makes it possible to modify table column width. Hover
+			your mouse over the column border to see the cursor change to indicate that
+			the column can be resized. Click and drag your mouse to set the desired width.
+		</p>
+		<p>
+			By default the plugin is turned off. To add a CKEditor instance using the
+			TableResize plugin, insert the following JavaScript call into your code:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	<strong>extraPlugins: 'tableresize'</strong>
+});</pre>
+		<p>
+			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
+			the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
+		</p>
+	</div>
+	<form action="sample_posteddata.php" method="post">
+		<p>
+			<label for="editor1">
+				CKEditor using the <code>tableresize</code> plugin:
+			</label>
+			<textarea cols="80" id="editor1" name="editor1" rows="10">
+				&lt;table style="width: 500px;"&gt;
+					&lt;caption&gt;
+						A sample table&lt;/caption&gt;
+					&lt;tbody&gt;
+						&lt;tr&gt;
+							&lt;td&gt;
+								Column 1&lt;/td&gt;
+							&lt;td&gt;
+								Column 2&lt;/td&gt;
+						&lt;/tr&gt;
+						&lt;tr&gt;
+							&lt;td&gt;
+								You can resize a table column.&lt;/td&gt;
+							&lt;td&gt;
+								Hover your mouse over its border.&lt;/td&gt;
+						&lt;/tr&gt;
+						&lt;tr&gt;
+							&lt;td&gt;
+								Watch the cursor change.&lt;/td&gt;
+							&lt;td&gt;
+								Now click and drag to resize.&lt;/td&gt;
+						&lt;/tr&gt;
+					&lt;/tbody&gt;
+				&lt;/table&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.
+				// Replace the <textarea id="editor"> with an CKEditor
+				// instance, using default configurations.
+				CKEDITOR.replace( 'editor1', {
+					extraPlugins: 'tableresize'
+				});
+			</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>

data/vendor/assets/javascripts/ckeditor/samples/uicolor.html ADDED Viewed

@@ -0,0 +1,137 @@
+<!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>UI Color Picker &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; Kama UI Color
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
+			with a CKEditor instance with an option to change the color of its user interface.<br>
+			<strong>Note:</strong>The UI skin color is a feature dedicated to the "kama" skin.
+		</p>
+		<h2 class="samples">Setting the User Interface Color</h2>
+		<p>
+			To specify the color of the user interface, set the <code>uiColor</code> property:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	<strong>uiColor: '#EE0000'</strong>
+});</pre>
+		<p>
+			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
+			the <code>&lt;textarea&gt;</code> element to be replaced.
+		</p>
+		<h2 class="samples">Enabling the Color Picker</h2>
+		<p>
+			If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>
+			toolbar button is added to CKEditor, the user will also be able to pick the color of the
+			UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.
+		</p>
+		<p>
+			To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,
+			use the following JavaScript call:
+		</p>
+		<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	<strong>extraPlugins : 'uicolor',</strong>
+	toolbar : [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
+});</pre>
+	</div>
+	<p>
+		Click the <strong>UI Color Picker</strong> button to test your color preferences at runtime.
+	</p>
+	<p>
+		The first editor instance includes the <strong>UI Color Picker</strong> toolbar button,
+		but the default UI color is not defined, so the editor uses the skin color.
+	</p>
+	<form action="sample_posteddata.php" method="post">
+	<p>
+		<textarea cols="80" id="editor1" name="editor1" 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>
+		<script>
+			// Replace the <textarea id="editor"> with an CKEditor
+			// instance, using default configurations.
+			CKEDITOR.replace( 'editor1', {
+				extraPlugins : 'uicolor',
+				toolbar : [
+					[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
+					[ 'FontSize', 'TextColor', 'BGColor' ],
+					[ 'UIColor' ]
+				]
+			});
+		</script>
+	</p>
+	<p>
+		The second editor instance includes the <strong>UI Color Picker</strong> toolbar button. The
+		default UI color was defined, so the skin color is not used.
+	</p>
+	<p>
+		<textarea cols="80" id="editor2" name="editor2" 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>
+		<script>
+			// Replace the <textarea id="editor"> with an CKEditor
+			// instance, using default configurations.
+			CKEDITOR.replace( 'editor2', {
+				extraPlugins : 'uicolor',
+				uiColor: '#14B8C4',
+				toolbar : [
+					[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
+					[ 'FontSize', 'TextColor', 'BGColor' ],
+					[ 'UIColor' ]
+				]
+			});
+		</script>
+	</p>
+	<p>
+		The third editor instance is inline. It also includes the <strong>UI Color Picker</strong> toolbar
+		button.
+	</p>
+	<div id="editor3" contenteditable="true">
+		<p>This is some <strong>sample text</strong>. You are using <a data-cke-saved-href="http://ckeditor.com/" href="http://ckeditor.com/">CKEditor</a>.</p>
+	</div>
+	<script>
+		// Disable automatic creation of inline instances.
+		CKEDITOR.disableAutoInline = true;
+		// Replace the <div id="editor3"> with an inline CKEditor instance.
+		CKEDITOR.inline( 'editor3', {
+			extraPlugins : 'uicolor',
+			uiColor: '#67C614',
+			toolbar : [
+				[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
+				[ 'FontSize', 'TextColor', 'BGColor' ],
+				[ 'UIColor' ]
+			]
+		} );
+	</script>
+	<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>

data/vendor/assets/javascripts/ckeditor/samples/uilanguages.html ADDED Viewed

@@ -0,0 +1,119 @@
+<!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>User Interface Globalization &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../ckeditor.js"></script>
+	<script src="../lang/_languages.js"></script>
+	<link rel="stylesheet" href="sample.css">
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; User Interface Languages
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
+			with a CKEditor instance with an option to change the language of its user interface.
+		</p>
+		<p>
+			It pulls the language list from CKEditor <code>_languages.js</code> file that contains the list of supported languages and creates
+			a drop-down list that lets the user change the UI language.
+		</p>
+		<p>
+			By default, CKEditor automatically localizes the editor to the language of the user.
+			The UI language can be controlled with two configuration options:
+			<code><a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.language">language</a></code> and
+			<code><a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.defaultLanguage">
+			defaultLanguage</a></code>. The <code>defaultLanguage</code> setting specifies the
+			default CKEditor language to be used when a localization suitable for user's settings is not available.
+		</p>
+		<p>
+			To specify the user interface language that will be used no matter what language is
+			specified in user's browser or operating system, set the <code>language</code> property:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	// Load the German interface.
+	<strong>language: 'de'</strong>
+});</pre>
+		<p>
+			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
+			the <code>&lt;textarea&gt;</code> element to be replaced.
+		</p>
+	</div>
+	<form action="sample_posteddata.php" method="post">
+		<p>
+			Available languages (<span id="count"> </span> languages!):<br>
+			<script>
+				document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
+				// Get the language list from the _languages.js file.
+				for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ ) {
+					document.write(
+						'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
+							window.CKEDITOR_LANGS[i].name +
+						'</option>' );
+				}
+				document.write( '</select>' );
+			</script>
+			<br>
+			<span style="color: #888888">
+				(You may see strange characters if your system does not support the selected language)
+			</span>
+		</p>
+		<p>
+			<textarea cols="80" id="editor1" name="editor1" 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>
+			<script>
+				// Set the number of languages.
+				document.getElementById( 'count' ).innerHTML = window.CKEDITOR_LANGS.length;
+				var editor;
+				function createEditor( languageCode ) {
+					if ( editor )
+						editor.destroy();
+					// Replace the <textarea id="editor"> with an CKEditor
+					// instance, using default configurations.
+					editor = CKEDITOR.replace( 'editor1', {
+						language : languageCode,
+						on : {
+							instanceReady : function() {
+								// Wait for the editor to be ready to set
+								// the language combo.
+								var languages = document.getElementById( 'languages' );
+								languages.value = this.langCode;
+								languages.disabled = false;
+							}
+						}
+					});
+				}
+				// At page startup, load the default language:
+				createEditor( '' );
+			</script>
+		</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>

data/vendor/assets/javascripts/ckeditor/styles.js ADDED Viewed

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
+CKEDITOR.stylesSet.add( 'default', [
+	/* Block Styles */
+	// These styles are already available in the "Format" combo, so they are
+	// not needed here by default. You may enable them to avoid placing the
+	// "Format" combo in the toolbar, maintaining the same features.
+	/*
+	{ name: 'Paragraph',		element: 'p' },
+	{ name: 'Heading 1',		element: 'h1' },
+	{ name: 'Heading 2',		element: 'h2' },
+	{ name: 'Heading 3',		element: 'h3' },
+	{ name: 'Heading 4',		element: 'h4' },
+	{ name: 'Heading 5',		element: 'h5' },
+	{ name: 'Heading 6',		element: 'h6' },
+	{ name: 'Preformatted Text',element: 'pre' },
+	{ name: 'Address',			element: 'address' },
+	*/
+	{ name: 'Blue Title',		element: 'h3', styles: { 'color': 'Blue' } },
+	{ name: 'Red Title',		element: 'h3', styles: { 'color': 'Red' } },
+	/* Inline Styles */
+	// These are core styles available as toolbar buttons. You may opt enabling
+	// some of them in the Styles combo, removing them from the toolbar.
+	/*
+	{ name: 'Strong',			element: 'strong', overrides: 'b' },
+	{ name: 'Emphasis',			element: 'em'	, overrides: 'i' },
+	{ name: 'Underline',		element: 'u' },
+	{ name: 'Strikethrough',	element: 'strike' },
+	{ name: 'Subscript',		element: 'sub' },
+	{ name: 'Superscript',		element: 'sup' },
+	*/
+	{ name: 'Marker: Yellow',	element: 'span', styles: { 'background-color': 'Yellow' } },
+	{ name: 'Marker: Green',	element: 'span', styles: { 'background-color': 'Lime' } },
+	{ name: 'Big',				element: 'big' },
+	{ name: 'Small',			element: 'small' },
+	{ name: 'Typewriter',		element: 'tt' },
+	{ 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' },
+	{ name: 'Language: RTL',	element: 'span', attributes: { 'dir': 'rtl' } },
+	{ name: 'Language: LTR',	element: 'span', attributes: { 'dir': 'ltr' } },
+	/* Object Styles */
+	{
+		name: 'Image on Left',
+		element: 'img',
+		attributes: {
+			'style': 'padding: 5px; margin-right: 5px',
+			'border': '2',
+			'align': 'left'
+		}
+	},
+	{
+		name: 'Image on Right',
+		element: 'img',
+		attributes: {
+			'style': 'padding: 5px; margin-left: 5px',
+			'border': '2',
+			'align': 'right'
+		}
+	},
+	{ name: 'Borderless Table',		element: 'table',	styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
+	{ name: 'Square Bulleted List',	element: 'ul',		styles: { 'list-style-type': 'square' } }
+]);