frontendeditor_ckeditor 0.0.5 → 0.0.6

data/lib/frontendeditor_ckeditor/version.rb

@@ -1,3 +1,3 @@
 module FrontendeditorCkeditor
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end

data/vendor/assets/javascripts/ckeditor/ckeditor_actions.coffee

@@ -5,7 +5,7 @@ Editor.active = ->
   target.attr('contenteditable',true)
   target.effect('highlight', duration: 5000)
   for div in target
-    CKEDITOR.inline(div)
+    CKEDITOR.inline(div, extraPlugins: 'sourcedialog')
 
 Editor.deactive = ->
   $('.editable-long-text').attr('contenteditable', false)
@@ -20,18 +20,3 @@ Editor.commitAll = ->
     model.id = dataset.id
     model.set(dataset.attribute, editor.getData())
   )
-
-Editor.on('instanceCreated', ( event ) ->
-  editor = event.editor
-  element = editor.element
-  editor.on('configLoaded', () ->
-    editor.config.toolbarGroups = [
-      { name: 'editing',    groups: [ 'basicstyles', 'links' ] }
-      { name: 'styles' }
-      '/'
-      { name: 'undo' }
-      { name: 'clipboard',  groups: [ 'selection', 'clipboard' ] }
-      { name: 'insert' }
-    ]
-  )
-)

data/vendor/assets/javascripts/ckeditor/plugins/sourcedialog/dialogs/sourcedialog.js

@@ -0,0 +1,78 @@
+/**
+ * @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',
+				dir: 'ltr',
+				inputStyle: 'cursor:auto;' +
+					'width:' + width + 'px;' +
+					'height:' + height + 'px;' +
+					'tab-size:4;' +
+					'text-align:left;',
+				'class': 'cke_source'
+			}]
+		}]
+	};
+});

data/vendor/assets/javascripts/ckeditor/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'
+});

data/vendor/assets/javascripts/ckeditor/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'
+			});
+		}
+	}
+});

data/vendor/assets/javascripts/ckeditor/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>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: frontendeditor_ckeditor
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
   prerelease: 
 platform: ruby
 authors:
@@ -74,6 +74,12 @@ files:
 - vendor/assets/stylesheets/ckeditor/skins/kama/dialog_opera.css
 - vendor/assets/stylesheets/ckeditor/skins/kama/dialog_ie7.css
 - vendor/assets/javascripts/ckeditor/ckeditor_actions.coffee
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/samples/sourcedialog.html
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/icons/sourcedialog.png
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/icons/sourcedialog-rtl.png
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/lang/en.js
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/plugin.js
+- vendor/assets/javascripts/ckeditor/plugins/sourcedialog/dialogs/sourcedialog.js
 - vendor/assets/javascripts/ckeditor/init_ckeditor.coffee
 - Rakefile
 - README.md