Merge branch 't/9713' into major

CHANGES.md

@@ -4,6 +4,7 @@ CKEditor 4 Changelog
 ## CKEditor 4.1
 
 * [#9907](http://dev.ckeditor.com/ticket/9907): Added contentPreview event for preview data manipulation.
+* [#9713](http://dev.ckeditor.com/ticket/9713): Introduced `sourcedialog` plugin that brings raw HTML editing for inline editor instances.
 
 ## CKEditor 4.0.2
 

core/dom/node.js

@@ -560,7 +560,11 @@ CKEDITOR.tools.extend( CKEDITOR.dom.node.prototype, {
 			if ( $.nodeName && ( name = $.nodeName.toLowerCase(), ( typeof reference == 'string' ? name == reference : name in reference ) ) )
 				return new CKEDITOR.dom.node( $ );
 
-			$ = $.parentNode;
+			try {
+				$ = $.parentNode;
+			} catch( e ) {
+				$ = null;
+			}
 		}
 		return null;
 	},

core/selection.js

@@ -1288,7 +1288,7 @@
 			if ( restore ) {
 				// Saved selection may be outdated (e.g. anchored in offline nodes).
 				// Avoid getting broken by such.
-				var common = selectedElement || ranges[ 0 ].getCommonAncestor();
+				var common = selectedElement || ranges[ 0 ] && ranges[ 0 ].getCommonAncestor();
 				if ( !( common && common.getAscendant( 'body', 1 ) ) )
 					return;
 

plugins/dialogui/plugin.js

@@ -279,13 +279,15 @@ CKEDITOR.plugins.add( 'dialogui', {
 				attributes.rows = elementDefinition.rows || 5;
 				attributes.cols = elementDefinition.cols || 20;
 
+				attributes[ 'class' ] = 'cke_dialog_ui_input_textarea ' + ( elementDefinition[ 'class' ] || '' );
+
 				if ( typeof elementDefinition.inputStyle != 'undefined' )
 					attributes.style = elementDefinition.inputStyle;
 
 				var innerHTML = function() {
 						attributes[ 'aria-labelledby' ] = this._.labelId;
 						this._.required && ( attributes[ 'aria-required' ] = this._.required );
-						var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
+						var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea id="', domId, '" ' ];
 						for ( var i in attributes )
 							html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[ i ] ) + '" ' );
 						html.push( '>', CKEDITOR.tools.htmlEncode( me._[ 'default' ] ), '</textarea></div>' );

plugins/sourcedialog/dialogs/sourcedialog.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
+
+CKEDITOR.dialog.add( 'sourcedialog', function( editor ) {
+	var size = CKEDITOR.document.getWindow().getViewPaneSize();
+
+	// Make it maximum 800px wide, but still fully visible in the viewport.
+	var width = Math.min( size.width - 70, 800);
+
+	// Make it use 2/3 of the viewport height.
+	var height = size.height / 1.5;
+
+	// Store old editor data to avoid unnecessary setData.
+	var oldData;
+
+	return {
+		title: editor.lang.sourcedialog.title,
+		minWidth: 100,
+		minHeight: 100,
+
+		onShow: function() {
+			this.setValueOf( 'main', 'data', oldData = editor.getData() );
+		},
+
+		onOk: (function() {
+			function setData( newData ) {
+				var that = this;
+
+				editor.setData( newData, function() {
+					that.hide();
+
+					// Ensure correct selection.
+					var range = editor.createRange();
+					range.moveToElementEditStart( editor.editable() );
+					range.select();
+				} );
+			}
+
+			return function( event ) {
+				// Remove CR from input data for reliable comparison with editor data.
+				var newData = this.getValueOf( 'main', 'data' ).replace( /\r/g, '' );
+
+				// Avoid unnecessary setData. Also preserve selection
+				// when user changed his mind and goes back to wysiwyg editing.
+				if ( newData === oldData )
+					return true;
+
+				// Set data asynchronously to avoid errors in IE.
+				CKEDITOR.env.ie ?
+						CKEDITOR.tools.setTimeout( setData, 0, this, newData )
+					:
+						setData.call( this, newData );
+
+				// Don't let the dialog close before setData is over.
+				return false;
+			};
+		})(),
+
+		contents: [{
+			id: 'main',
+			label: editor.lang.sourcedialog.title,
+			elements: [{
+				type: 'textarea',
+				type: 'textarea',
+				id: 'data',
+				inputStyle: 'cursor:auto;' +
+					'width:' + width + 'px;' +
+					'height:' + height + 'px;' +
+					'tab-size:4;',
+				'class': 'cke_source'
+			}]
+		}]
+	};
+});

plugins/sourcedialog/lang/en.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.plugins.setLang( 'sourcedialog', 'en', {
+	toolbar: 'Source',
+	title: 'Source'
+});

plugins/sourcedialog/plugin.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
+
+CKEDITOR.plugins.add( 'sourcedialog', {
+	lang: 'en', // %REMOVE_LINE_CORE%
+	icons: 'sourcedialog,sourcedialog-rtl', // %REMOVE_LINE_CORE%
+
+	init: function( editor ) {
+		// Register the "source" command, which simply opens the "source" dialog.
+		editor.addCommand( 'sourcedialog', new CKEDITOR.dialogCommand( 'sourcedialog' ) );
+
+		// Register the "source" dialog.
+		CKEDITOR.dialog.add( 'sourcedialog', this.path + 'dialogs/sourcedialog.js' );
+
+		// If the toolbar is available, create the "Source" button.
+		if ( editor.ui.addButton ) {
+			editor.ui.addButton( 'Sourcedialog', {
+				label: editor.lang.sourcedialog.toolbar,
+				command: 'sourcedialog',
+				toolbar: 'mode,10'
+			});
+		}
+	}
+});

plugins/sourcedialog/samples/sourcedialog.html

@@ -0,0 +1,118 @@
+<!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>Raw HTML editing with dialog-based source editor &mdash; CKEditor Sample</title>
+	<meta charset="utf-8">
+	<script src="../../../ckeditor.js"></script>
+	<link rel="stylesheet" href="../../../samples/sample.css">
+	<meta name="ckeditor-sample-name" content="Raw HTML editing with dialog-based source editor">
+	<meta name="ckeditor-sample-group" content="Plugins">
+	<meta name="ckeditor-sample-description" content="Editing HTML content of both inline and framed editor instances.">
+	<meta name="ckeditor-sample-isnew" content="1">
+	<style>
+
+		#editable
+		{
+			padding: 10px;
+			float: left;
+		}
+
+	</style>
+</head>
+<body>
+	<h1 class="samples">
+		<a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Raw HTML editing with dialog-based source editor
+	</h1>
+	<div class="description">
+		<p>
+			<strong>Sourcedialog</strong> plugin provides an easy way to edit raw HTML content
+			of an editor, similarly to what is possible with <strong>Sourcearea</strong>
+			plugin for framed instances but using dialogs. Thanks to that, it's also possible
+			to manipulate raw content of inline editor instances.
+		</p>
+		<p>
+			This plugin extends the toolbar with a button,
+			which opens a dialog window with a source code editor. It works with both framed
+			and inline instances. To enable this
+			plugin, basically add <code>extraPlugins: 'sourcedialog'</code> to editor's
+			config:
+		</p>
+<pre class="samples">
+// Inline editor.
+CKEDITOR.inline( 'editable', {
+	<strong>extraPlugins: 'sourcedialog'</strong>
+});
+
+// Framed editor.
+CKEDITOR.replace( 'textarea_id', {
+	<strong>extraPlugins: 'sourcedialog'</strong>,
+	removePlugins: 'sourcearea'
+});
+</pre>
+		<p>
+			Note that you may want to include <code>removePlugins: 'sourcearea'</code>
+			in your config when using <strong>Sourcedialog</strong> in framed instances.
+			This prevents feature redundancy.
+		</p>
+		<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>
+		<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>
+	<div>
+		<label for="editor1">
+			Inline editor:
+		</label>
+		<div id="editor1" contenteditable="true" style="padding: 5px 20px;">
+			<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
+		</div>
+	</div>
+	<br>
+	<div>
+		<label for="editor2">
+			Framed editor:
+		</label>
+		<textarea cols="80" id="editor2" name="editor2" 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>
+	</div>
+	<script>
+
+		// We need to turn off the automatic editor creation first.
+		CKEDITOR.disableAutoInline = true;
+
+		var config = {
+			toolbarGroups: [
+				{ name: 'mode' },
+				{ name: 'basicstyles' },
+				{ name: 'links' }
+			],
+			extraPlugins: 'sourcedialog',
+			removePlugins: 'sourcearea'
+		}
+
+		CKEDITOR.inline( 'editor1', config );
+		CKEDITOR.replace( 'editor2', config );
+
+	</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>

samples/index.html

@@ -139,6 +139,9 @@ <h2 class="samples">
 
 				<dt><a class="samples" href="../plugins/htmlwriter/samples/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/sourcedialog/samples/sourcedialog.html">Raw HTML editing with dialog-based source editor</a> <span class="new">New!</span></dt>
+				<dd>Editing HTML content of both inline and framed editor instances.</dd>
 				<!-- %REMOVE_END% -->
 
 				<!-- ADVANCED_SAMPLES -->

skins/kama/presets.css

@@ -4,7 +4,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
 /* "Source" button label */
-.cke_button__source_label
+.cke_button__source_label,
+.cke_button__sourcedialog_label
 {
 	display: inline;
 }

skins/moono/presets.css

@@ -4,7 +4,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
 /* "Source" button label */
-.cke_button__source_label
+.cke_button__source_label,
+.cke_button__sourcedialog_label
 {
 	display: inline;
 }