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/divreplace.html ADDED

@@ -0,0 +1,141 @@
+<!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>Replace DIV &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../ckeditor.js"></script>
+	<link href="sample.css" rel="stylesheet">
+	<style>
+		div.editable
+		{
+			border: solid 2px Transparent;
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+		div.editable:hover
+		{
+			border-color: black;
+		}
+	</style>
+	<script>
+		// Uncomment the following code to test the "Timeout Loading Method".
+		// CKEDITOR.loadFullCoreTimeout = 5;
+		window.onload = function() {
+			// Listen to the double click event.
+			if ( window.addEventListener )
+				document.body.addEventListener( 'dblclick', onDoubleClick, false );
+			else if ( window.attachEvent )
+				document.body.attachEvent( 'ondblclick', onDoubleClick );
+		};
+		function onDoubleClick( ev ) {
+			// Get the element which fired the event. This is not necessarily the
+			// element to which the event has been attached.
+			var element = ev.target || ev.srcElement;
+			// Find out the div that holds this element.
+			var name;
+			do {
+				element = element.parentNode;
+			}
+			while ( element && ( name = element.nodeName.toLowerCase() ) &&
+				( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );
+			if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
+				replaceDiv( element );
+		}
+		var editor;
+		function replaceDiv( div ) {
+			if ( editor )
+				editor.destroy();
+			editor = CKEDITOR.replace( div );
+		}
+	</script>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; Replace DIV with CKEditor on the Fly
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
+			with a CKEditor instance on the fly, following user's doubleclick. The content
+			that was previously placed inside the <code>&lt;div&gt;</code> element will now
+			be moved into CKEditor editing area.
+		</p>
+		<p>
+			For details on how to create this setup check the source code of this sample page.
+		</p>
+	</div>
+	<p>
+		Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
+		editor instances.
+	</p>
+	<div class="editable">
+		<h3>
+			Part 1
+		</h3>
+		<p>
+			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
+			semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
+			rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
+			nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
+			eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
+		</p>
+	</div>
+	<div class="editable">
+		<h3>
+			Part 2
+		</h3>
+		<p>
+			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
+			semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
+			rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
+			nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
+			eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
+		</p>
+		<p>
+			Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
+			sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
+			vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
+		</p>
+	</div>
+	<div class="editable">
+		<h3>
+			Part 3
+		</h3>
+		<p>
+			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
+			semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
+			rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
+			nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
+			eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
+		</p>
+	</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-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/enterkey.html ADDED

@@ -0,0 +1,99 @@
+<!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>ENTER Key Configuration &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../ckeditor.js"></script>
+	<link href="sample.css" rel="stylesheet">
+	<script>
+		var editor;
+		function changeEnter() {
+			// If we already have an editor, let's destroy it first.
+			if ( editor )
+				editor.destroy( true );
+			// Create the editor again, with the appropriate settings.
+			editor = CKEDITOR.replace( 'editor1', {
+				enterMode: Number( document.getElementById( 'xEnter' ).value ),
+				shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
+			});
+		}
+		window.onload = changeEnter;
+	</script>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; ENTER Key Configuration
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
+			to perform actions specified in the
+			<a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode"><code>enterMode</code></a>
+			and <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.shiftEnterMode"><code>shiftEnterMode</code></a>
+			parameters, respectively.
+	 		You can choose from the following options:
+		</p>
+		<ul class="samples">
+			<li><strong><code>ENTER_P</code></strong> &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
+			<li><strong><code>ENTER_BR</code></strong> &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
+			<li><strong><code>ENTER_DIV</code></strong> &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
+		</ul>
+		<p>
+			The sample code below shows how to configure CKEditor to create a <code>&lt;div&gt;</code> block when <em>Enter</em> key is pressed.
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	<strong>enterMode : CKEDITOR.ENTER_DIV</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>
+	<div style="float: left; margin-right: 20px">
+		When <em>Enter</em> is pressed:<br>
+		<select id="xEnter" onchange="changeEnter();">
+			<option selected="selected" value="1">Create a new &lt;P&gt; (recommended)</option>
+			<option value="3">Create a new &lt;DIV&gt;</option>
+			<option value="2">Break the line with a &lt;BR&gt;</option>
+		</select>
+	</div>
+	<div style="float: left">
+		When <em>Shift+Enter</em> is pressed:<br>
+		<select id="xShiftEnter" onchange="changeEnter();">
+			<option value="1">Create a new &lt;P&gt;</option>
+			<option value="3">Create a new &lt;DIV&gt;</option>
+			<option selected="selected" value="2">Break the line with a &lt;BR&gt; (recommended)</option>
+		</select>
+	</div>
+	<br style="clear: both">
+	<form action="sample_posteddata.php" method="post">
+		<p>
+			<br>
+			<textarea cols="80" id="editor1" name="editor1" rows="10">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;.</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/app/assets/javascripts/ckeditor/samples/fullpage.html ADDED

@@ -0,0 +1,109 @@
+<!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>Full Page Editing with Document Properties 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; Full Page Editing with Document Properties Plugin
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to configure CKEditor to edit entire HTML pages, from the
+			<code>&lt;html&gt;</code> tag to the <code>&lt;/html&gt;</code> tag.
+		</p>
+		<p>
+			The <strong>Document Properties</strong> (<code>docprops</code>) plugin is also turned on.
+			This plugin allows you to set the metadata of the page, including the page encoding, margins,
+			meta tags, or background.
+		</p>
+		<p>
+			The CKEditor instance below is inserted with a JavaScript call using the following code:
+		</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>',
+{
+	<strong>fullPage : true,
+	extraPlugins : 'docprops'</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">
+		<label for="editor1">
+			CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:
+		</label>
+		<textarea cols="80" id="editor1" name="editor1" rows="10">
+			&lt;h1&gt;
+				&lt;img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;" /&gt;Little Red Riding Hood&lt;/h1&gt;
+			&lt;p&gt;
+				&quot;&lt;b&gt;Little Red Riding Hood&lt;/b&gt;&quot; is a famous &lt;a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale"&gt;fairy tale&lt;/a&gt; about a young girl&#39;s encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.&lt;/p&gt;
+			&lt;table align="right" cellpadding="1" cellspacing="1" style="width: 200px;"&gt;
+				&lt;caption&gt;
+					&lt;strong&gt;International Names&lt;/strong&gt;&lt;/caption&gt;
+				&lt;tbody&gt;
+					&lt;tr&gt;
+						&lt;td&gt;
+							Chinese&lt;/td&gt;
+						&lt;td&gt;
+							&lt;i&gt;小紅帽&lt;/i&gt;&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;
+							Italian&lt;/td&gt;
+						&lt;td&gt;
+							&lt;i&gt;Cappuccetto Rosso&lt;/i&gt;&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;
+							Spanish&lt;/td&gt;
+						&lt;td&gt;
+							&lt;i&gt;Caperucita Roja&lt;/i&gt;&lt;/td&gt;
+					&lt;/tr&gt;
+				&lt;/tbody&gt;
+			&lt;/table&gt;
+			&lt;p&gt;
+				The version most widely known today is based on the &lt;a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm"&gt;Brothers Grimm&lt;/a&gt; variant. It is about a girl called Little Red Riding Hood, after the red &lt;a href="http://en.wikipedia.org/wiki/Hood_%28headgear%29" title="Hood (headgear)"&gt;hooded&lt;/a&gt; &lt;a href="http://en.wikipedia.org/wiki/Cape" title="Cape"&gt;cape&lt;/a&gt; or &lt;a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak"&gt;cloak&lt;/a&gt; she wears. The girl walks through the woods to deliver food to her sick grandmother.&lt;/p&gt;
+			&lt;p&gt;
+				A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she na&iuml;vely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother&#39;s house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.&lt;/p&gt;
+			&lt;p&gt;
+				When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, &quot;My, what big teeth you have!&quot;&lt;br /&gt;
+				To which the wolf replies, &quot;The better to eat you with,&quot; and swallows her whole, too.&lt;/p&gt;
+			&lt;p&gt;
+				A &lt;a href="http://en.wikipedia.org/wiki/Hunter" title="Hunter"&gt;hunter&lt;/a&gt;, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf&#39;s body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.&lt;/p&gt;
+			&lt;p&gt;
+				The tale makes the clearest contrast between the safe world of the village and the dangers of the &lt;a href="http://en.wikipedia.org/wiki/Enchanted_forest" title="Enchanted forest"&gt;forest&lt;/a&gt;, conventional antitheses that are essentially medieval, though no written versions are as old as that.&lt;/p&gt;
+		</textarea>
+		<script>
+			CKEDITOR.replace( 'editor1', {
+				fullPage : true,
+				extraPlugins : 'docprops'
+			});
+		</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/app/assets/javascripts/ckeditor/samples/index.html ADDED

@@ -0,0 +1,133 @@
+<!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>CKEditor Samples</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="sample.css">
+</head>
+<body>
+	<h1 class="samples">
+		CKEditor Samples
+	</h1>
+	<div class="twoColumns">
+		<div class="twoColumnsLeft">
+			<h2 class="samples">
+				Basic Samples
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a></dt>
+				<dd>Automatic replacement of all textarea elements of a given class with a CKEditor instance.</dd>
+				<dt><a class="samples" href="replacebycode.html">Replace textarea elements by code</a></dt>
+				<dd>Replacement of textarea elements with CKEditor instances by using a JavaScript call.</dd>
+				<dt><a class="samples" href="divarea.html">Replace textarea with a "DIV-based" editor</a> <span class="new">New!</span></dt>
+				<dd>Using <code>div</code> instead of <code>iframe</code> for rich editing.</dd>
+				<dt><a class="samples" href="fullpage.html">Full page support with the Document Properties plugin</a></dt>
+				<dd>CKEditor inserted with a JavaScript call and used to edit the whole page from <code>&lt;html&gt;</code> to <code>&lt;/html&gt;</code>.</dd>
+			</dl>
+			<h2 class="samples">
+				Basic Customization
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="uicolor.html">User Interface color</a></dt>
+				<dd>Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.</dd>
+				<dt><a class="samples" href="uilanguages.html">User Interface languages</a></dt>
+				<dd>Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.</dd>
+			</dl>
+			<h2 class="samples">
+				Additional plugins
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="autogrow.html">AutoGrow plugin</a></dt>
+				<dd>Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.</dd>
+				<dt><a class="samples" href="bbcode.html">Output for BBCode</a></dt>
+				<dd>Configuring CKEditor to produce BBCode tags instead of HTML.</dd>
+				<dt><a class="samples" href="stylesheetparser.html">Stylesheet Parser plugin</a></dt>
+				<dd>Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.</dd>
+				<dt><a class="samples" href="devtools.html">Developer Tools plugin</a></dt>
+				<dd>Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.</dd>
+				<dt><a class="samples" href="placeholder.html">Placeholder plugin</a></dt>
+				<dd>Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.</dd>
+				<dt><a class="samples" href="tableresize.html">TableResize plugin</a></dt>
+				<dd>Using the TableResize plugin to enable table column resizing.</dd>
+				<dt><a class="samples" href="magicline.html">Magicline plugin</a> <span class="new">New!</span></dt>
+				<dd>Using the Magicline plugin to access difficult focus spaces.</dd>
+			</dl>
+		</div>
+		<div class="twoColumnsRight">
+			<h2 class="samples">
+				Inline editing <span class="new">New!</span>
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="inlineall.html">Massive inline editor creation</a> <span class="new">New!</span></dt>
+				<dd>Turn all elements with <code>contentEditable = true</code> attribute into inline editors.</dd>
+				<dt><a class="samples" href="inlinebycode.html">Convert element into an inline editor by code</a> <span class="new">New!</span></dt>
+				<dd>Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.</dd>
+			</dl>
+			<h2 class="samples">
+				Advanced Samples
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a></dt>
+				<dd>Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.</dd>
+				<dt><a class="samples" href="appendto.html">Append editor instances</a></dt>
+				<dd>Appending editor instances to existing DOM elements.</dd>
+				<dt><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a></dt>
+				<dd>Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.</dd>
+				<dt><a class="samples" href="api.html">Basic usage of the API</a></dt>
+				<dd>Using the CKEditor JavaScript API to interact with the editor at runtime.</dd>
+				<dt><a class="samples" href="apidialog.html">Using the JavaScript API to customize dialog windows</a></dt>
+				<dd>Using the dialog windows API to customize dialog windows without changing the original editor code.</dd>
+				<dt><a class="samples" href="enterkey.html">Using the "Enter" key in CKEditor</a></dt>
+				<dd>Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.</dd>
+				<dt><a class="samples" href="outputxhtml.html">Output XHTML</a></dt>
+				<dd>Configuring CKEditor to produce XHTML 1.1 compliant code.</dd>
+				<dt><a class="samples" href="outputhtml.html">Output HTML</a></dt>
+				<dd>Configuring CKEditor to produce legacy HTML 4 code.</dd>
+				<dt><a class="samples" href="outputforflash.html">Output for Flash</a></dt>
+				<dd>Configuring CKEditor to produce HTML code that can be used with Adobe Flash.</dd>
+				<dt><a class="samples" href="readonly.html">Read-only mode</a></dt>
+				<dd>Using the readOnly API to block introducing changes to the editor contents.</dd>
+				<dt><a class="samples" href="tabindex.html">"Tab" key-based navigation</a> <span class="new">New!</span></dt>
+				<dd>Navigating among editor instances with tab key.</dd>
+			</dl>
+		</div>
+	</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-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>