RubyGems - drg_default_html_editor - Versions diffs - 0.4.15 - Mend

drg_default_html_editor 0.4.15

Files changed (458) hide show

data/app/assets/javascripts/drg_default_html_editor/ckeditor/samples/index.html ADDED Viewed

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>CKEditor Samples</title>
+	<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="jquery.html">Create editors with jQuery</a></dt>
+				<dd>Creating standard and inline CKEditor instances with jQuery adapter.</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">Plugins</h2>
+<dl class="samples">
+<dt><a class="samples" href="plugins/magicline/magicline.html">Magicline plugin</a></dt>
+<dd>Using the Magicline plugin to access difficult focus spaces.</dd>
+<dt><a class="samples" href="plugins/wysiwygarea/fullpage.html">Full page support</a></dt>
+<dd>CKEditor inserted with a JavaScript call and used to edit the whole page from &lt;html&gt; to &lt;/html&gt;.</dd>
+</dl>
+		</div>
+		<div class="twoColumnsRight">
+			<h2 class="samples">
+				Inline Editing
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="inlineall.html">Massive inline editor creation</a></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></dt>
+				<dd>Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.</dd>
+				<dt><a class="samples" href="inlinetextarea.html">Replace textarea with inline editor</a> <span class="new">New!</span></dt>
+				<dd>A form with a textarea that is replaced by an inline editor at runtime.</dd>
+			</dl>
+			<h2 class="samples">
+				Advanced Samples
+			</h2>
+			<dl class="samples">
+				<dt><a class="samples" href="datafiltering.html">Data filtering and features activation</a> <span class="new">New!</span></dt>
+				<dd>Data filtering and automatic features activation basing on configuration.</dd>
+				<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="xhtmlstyle.html">XHTML-compliant style</a></dt>
+				<dd>Configuring CKEditor to produce XHTML 1.1 compliant attributes and styles.</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></dt>
+				<dd>Navigating among editor instances with tab key.</dd>
+<dt><a class="samples" href="plugins/dialog/dialog.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="plugins/enterkey/enterkey.html">Using the &quot;Enter&quot; 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="plugins/htmlwriter/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="plugins/htmlwriter/outputhtml.html">Output HTML</a></dt>
+<dd>Configuring CKEditor to produce legacy HTML 4 code.</dd>
+<dt><a class="samples" href="plugins/toolbar/toolbar.html">Toolbar Configurations</a></dt>
+<dd>Configuring CKEditor to display full or custom toolbar layout.</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-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>

data/app/assets/javascripts/drg_default_html_editor/ckeditor/samples/inlineall.html ADDED Viewed

@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Massive inline editing &mdash; CKEditor Sample</title>
+	<script src="../ckeditor.js"></script>
+	<script>
+		// This code is generally not necessary, but it is here to demonstrate
+		// how to customize specific editor instances on the fly. This fits well
+		// this demo because we have editable elements (like headers) that
+		// require less features.
+		// The "instanceCreated" event is fired for every editor instance created.
+		CKEDITOR.on( 'instanceCreated', function( event ) {
+			var editor = event.editor,
+				element = editor.element;
+			// Customize editors for headers and tag list.
+			// These editors don't need features like smileys, templates, iframes etc.
+			if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
+				// Customize the editor configurations on "configLoaded" event,
+				// which is fired after the configuration file loading and
+				// execution. This makes it possible to change the
+				// configurations before the editor initialization takes place.
+				editor.on( 'configLoaded', function() {
+					// Remove unnecessary plugins to make the editor simpler.
+					editor.config.removePlugins = 'colorbutton,find,flash,font,' +
+						'forms,iframe,image,newpage,removeformat,' +
+						'smiley,specialchar,stylescombo,templates';
+					// Rearrange the layout of the toolbar.
+					editor.config.toolbarGroups = [
+						{ name: 'editing',		groups: [ 'basicstyles', 'links' ] },
+						{ name: 'undo' },
+						{ name: 'clipboard',	groups: [ 'selection', 'clipboard' ] },
+						{ name: 'about' }
+					];
+				});
+			}
+		});
+	</script>
+	<link href="sample.css" rel="stylesheet">
+	<style>
+		/* The following styles are just to make the page look nice. */
+		/* Workaround to show Arial Black in Firefox. */
+		@font-face
+		{
+			font-family: 'arial-black';
+			src: local('Arial Black');
+		}
+		*[contenteditable="true"]
+		{
+			padding: 10px;
+		}
+		#container
+		{
+			width: 960px;
+			margin: 30px auto 0;
+		}
+		#header
+		{
+			overflow: hidden;
+			padding: 0 0 30px;
+			border-bottom: 5px solid #05B2D2;
+			position: relative;
+		}
+		#headerLeft,
+		#headerRight
+		{
+			width: 49%;
+			overflow: hidden;
+		}
+		#headerLeft
+		{
+			float: left;
+			padding: 10px 1px 1px;
+		}
+		#headerLeft h2,
+		#headerLeft h3
+		{
+			text-align: right;
+			margin: 0;
+			overflow: hidden;
+			font-weight: normal;
+		}
+		#headerLeft h2
+		{
+			font-family: "Arial Black",arial-black;
+			font-size: 4.6em;
+			line-height: 1.1;
+			text-transform: uppercase;
+		}
+		#headerLeft h3
+		{
+			font-size: 2.3em;
+			line-height: 1.1;
+			margin: .2em 0 0;
+			color: #666;
+		}
+		#headerRight
+		{
+			float: right;
+			padding: 1px;
+		}
+		#headerRight p
+		{
+			line-height: 1.8;
+			text-align: justify;
+			margin: 0;
+		}
+		#headerRight p + p
+		{
+			margin-top: 20px;
+		}
+		#headerRight > div
+		{
+			padding: 20px;
+			margin: 0 0 0 30px;
+			font-size: 1.4em;
+			color: #666;
+		}
+		#columns
+		{
+			color: #333;
+			overflow: hidden;
+			padding: 20px 0;
+		}
+		#columns > div
+		{
+			float: left;
+			width: 33.3%;
+		}
+		#columns #column1 > div
+		{
+			margin-left: 1px;
+		}
+		#columns #column3 > div
+		{
+			margin-right: 1px;
+		}
+		#columns > div > div
+		{
+			margin: 0px 10px;
+			padding: 10px 20px;
+		}
+		#columns blockquote
+		{
+			margin-left: 15px;
+		}
+		#tagLine
+		{
+			border-top: 5px solid #05B2D2;
+			padding-top: 20px;
+		}
+		#taglist {
+			display: inline-block;
+			margin-left: 20px;
+			font-weight: bold;
+			margin: 0 0 0 20px;
+		}
+	</style>
+</head>
+<body>
+<div>
+	<h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>
+	<div class="description">
+		<p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
+		<pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>
+		<p>Click inside of any element below to start editing.</p>
+	</div>
+</div>
+<div id="container">
+	<div id="header">
+		<div id="headerLeft">
+			<h2 id="sampleTitle" contenteditable="true">
+				CKEditor<br> Goes Inline!
+			</h2>
+			<h3 contenteditable="true">
+				Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
+			</h3>
+		</div>
+		<div id="headerRight">
+			<div contenteditable="true">
+				<p>
+					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
+				</p>
+				<p>
+					Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div id="columns">
+		<div id="column1">
+			<div contenteditable="true">
+				<h3>
+					Fusce vitae porttitor
+				</h3>
+				<p>
+					<strong>
+						Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
+					</strong>
+				</p>
+				<p>
+					Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
+				</p>
+				<blockquote>
+					<p>
+						Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
+						Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
+					</p>
+				</blockquote>
+				<blockquote>
+					<p>
+						Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
+					</p>
+				</blockquote>
+				<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
+				<p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
+			</div>
+		</div>
+		<div id="column2">
+			<div contenteditable="true">
+				<h3>
+					Integer condimentum sit amet
+				</h3>
+				<p>
+					<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
+					Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
+				<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
+				<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
+			</div>
+			<div contenteditable="true">
+				<h3>
+					Praesent wisi accumsan sit amet nibh
+				</h3>
+				<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
+				<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
+				<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
+			</div>
+		</div>
+		<div id="column3">
+			<div contenteditable="true">
+				<p>
+					<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
+				</p>
+				<p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
+				<h3>
+					Nullam laoreet vel consectetuer tellus suscipit
+				</h3>
+				<ul>
+					<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
+					<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
+					<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
+				</ul>
+				<p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
+				<p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
+				<p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
+			</div>
+		</div>
+	</div>
+	<div id="tagLine">
+		Tags of this article:
+		<p id="taglist" contenteditable="true">
+			inline, editing, floating, CKEditor
+		</p>
+	</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-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
+		- Frederico Knabben. All rights reserved.
+	</p>
+</div>
+</body>
+</html>

data/app/assets/javascripts/drg_default_html_editor/ckeditor/samples/inlinebycode.html ADDED Viewed

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Inline Editing by Code &mdash; CKEditor Sample</title>
+	<script src="../ckeditor.js"></script>
+	<link href="sample.css" rel="stylesheet">
+	<style>
+		#editable
+		{
+			padding: 10px;
+			float: left;
+		}
+	</style>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; Inline Editing by Code
+	</h1>
+	<div class="description">
+		<p>
+			This sample shows how to create an inline editor instance of CKEditor. It is created
+			with a JavaScript call using the following code:
+		</p>
+<pre class="samples">
+// This property tells CKEditor to not activate every element with contenteditable=true element.
+CKEDITOR.disableAutoInline = true;
+var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
+</pre>
+		<p>
+			Note that <code>editable</code> in the code above is the <code>id</code>
+			attribute of the <code>&lt;div&gt;</code> element to be converted into an inline instance.
+		</p>
+	</div>
+	<div id="editable" contenteditable="true">
+		<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>
+		<p><b>Apollo 11</b> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+		<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+		<h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+		<p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+		<blockquote>
+			<p>One small step for [a] man, one giant leap for mankind.</p>
+		</blockquote>
+		<p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+		<blockquote>
+			<p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+		</blockquote>
+		<h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+		<table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;">
+			<caption><strong>Mission crew</strong></caption>
+			<thead>
+			<tr>
+				<th scope="col">Position</th>
+				<th scope="col">Astronaut</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<td>Commander</td>
+				<td>Neil A. Armstrong</td>
+			</tr>
+			<tr>
+				<td>Command Module Pilot</td>
+				<td>Michael Collins</td>
+			</tr>
+			<tr>
+				<td>Lunar Module Pilot</td>
+				<td>Edwin &quot;Buzz&quot; E. Aldrin, Jr.</td>
+			</tr>
+			</tbody>
+		</table>
+		<p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+		<ol>
+			<li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+			<li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+			<li><strong>Lunar Module</strong> for landing on the Moon.</li>
+		</ol>
+		<p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+		<hr />
+		<p style="text-align: right;"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+	</div>
+	<script>
+		// We need to turn off the automatic editor creation first.
+		CKEDITOR.disableAutoInline = true;
+		var editor = CKEDITOR.inline( 'editable' );
+	</script>
+	<div id="footer">
+		<hr>
+		<p contenteditable="true">
+			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-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
+			- Frederico Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>

data/app/assets/javascripts/drg_default_html_editor/ckeditor/samples/inlinetextarea.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Replace Textarea with Inline Editor &mdash; CKEditor Sample</title>
+	<script src="../ckeditor.js"></script>
+	<link href="sample.css" rel="stylesheet">
+	<style>
+		/* Style the CKEditor element to look like a textfield */
+		.cke_textarea_inline
+		{
+			padding: 10px;
+			height: 200px;
+			overflow: auto;
+			border: 1px solid gray;
+			-webkit-appearance: textfield;
+		}
+	</style>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea with Inline Editor
+	</h1>
+	<div class="description">
+		<p>
+			You can also create an inline editor from a <code>textarea</code>
+			element. In this case the <code>textarea</code> will be replaced
+			by a <code>div</code> element with inline editing enabled.
+		</p>
+<pre class="samples">
+// "article-body" is the name of a textarea element.
+var editor = CKEDITOR.inline( 'article-body' );
+</pre>
+	</div>
+	<form action="sample_posteddata.php" method="post">
+		<h2>This is a sample form with some fields</h2>
+		<p>
+			Title:<br>
+			<input type="text" name="title" value="Sample Form"></p>
+		<p>
+			Article Body (Textarea converted to CKEditor):<br>
+			<textarea name="article-body" style="height: 200px">
+				&lt;h2&gt;Technical details &lt;a id="tech-details" name="tech-details"&gt;&lt;/a&gt;&lt;/h2&gt;
+				&lt;table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;"&gt;
+					&lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt;
+					&lt;thead&gt;
+					&lt;tr&gt;
+						&lt;th scope="col"&gt;Position&lt;/th&gt;
+						&lt;th scope="col"&gt;Astronaut&lt;/th&gt;
+					&lt;/tr&gt;
+					&lt;/thead&gt;
+					&lt;tbody&gt;
+					&lt;tr&gt;
+						&lt;td&gt;Commander&lt;/td&gt;
+						&lt;td&gt;Neil A. Armstrong&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;Command Module Pilot&lt;/td&gt;
+						&lt;td&gt;Michael Collins&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;tr&gt;
+						&lt;td&gt;Lunar Module Pilot&lt;/td&gt;
+						&lt;td&gt;Edwin &quot;Buzz&quot; E. Aldrin, Jr.&lt;/td&gt;
+					&lt;/tr&gt;
+					&lt;/tbody&gt;
+				&lt;/table&gt;
+				&lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center"&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href="http://en.wikipedia.org/wiki/NASA" title="NASA"&gt;NASA&lt;/a&gt;&#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt;
+				&lt;ol&gt;
+					&lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt;
+					&lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt;
+					&lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt;
+				&lt;/ol&gt;
+				&lt;p&gt;After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis"&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean"&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt;
+				&lt;hr /&gt;
+				&lt;p style="text-align: right;"&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
+			</textarea>
+		</p>
+		<p>
+			<input type="submit" value="Submit">
+		</p>
+	</form>
+	<script>
+		CKEDITOR.inline( 'article-body' );
+	</script>
+	<div id="footer">
+		<hr>
+		<p contenteditable="true">
+			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-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
+			- Frederico Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>