#77 - plugins and config generator updated.

README.md

@@ -131,9 +131,18 @@ add for example:
       //= require redactor-rails/plugins/fontsize
       //= require redactor-rails/plugins/fontfamily
 
-After including the desired plugins they can be configured in the
-redactor config file as normal.
-
+After including the desired plugins they can be configured in the redactor config file as normal.
+
+To add it into the editor just add 'plugins' attributes to config.js file and specify which ones do you want to use:
+
+      $('.redactor').redactor(
+        { "plugins": ['fontsize',
+                    'fontcolor',
+                    'fontfamily',
+                    'fullscreen',
+                    'textdirection',
+                    'clips']
+        });
 
 ### Defining a Devise User Model
 

lib/generators/redactor/templates/config.js

@@ -5,14 +5,18 @@ window.init_redactor = function(){
   if (csrf_param !== undefined && csrf_token !== undefined) {
       params = csrf_param + "=" + encodeURIComponent(csrf_token);
   }
-  $('.redactor').redactor(
-      { "imageUpload":"/redactor_rails/pictures?" + params,
-          "imageGetJson":"/redactor_rails/pictures",
-          "fileUpload":"/redactor_rails/documents?" + params,
-          "fileGetJson":"/redactor_rails/documents",
-          "path":"/assets/redactor-rails",
-          "css":"style.css"}
-  );
+  $('.redactor').redactor({
+        // You can specify, which ones plugins you need.
+        // If you want to use plugins, you have add plugins to your
+        // application.js and application.css files and uncomment the line below:
+        // "plugins": ['fontsize', 'fontcolor', 'fontfamily', 'fullscreen', 'textdirection', 'clips'],
+        "imageUpload":"/redactor_rails/pictures?" + params,
+        "imageGetJson":"/redactor_rails/pictures",
+        "fileUpload":"/redactor_rails/documents?" + params,
+        "fileGetJson":"/redactor_rails/documents",
+        "path":"/assets/redactor-rails",
+        "css":"style.css"
+      });
 }
 
 $(document).on( 'ready page:load', window.init_redactor );

vendor/assets/javascripts/redactor-rails/plugins/clips.js

@@ -1,35 +1,61 @@
 if (!RedactorPlugins) var RedactorPlugins = {};
 
-RedactorPlugins.clips = {
-	init: function()
-	{
-		var callback = $.proxy(function()
+RedactorPlugins.clips = function()
+{
+	return {
+		init: function()
 		{
-			$('#redactor_modal').find('.redactor_clip_link').each($.proxy(function(i, s)
+			var items = [
+				['Lorem ipsum...', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'],
+				['Red label', '<span class="label-red">Label</span>']
+			];
+
+			this.clips.template = $('<ul id="redactor-modal-list">');
+
+			for (var i = 0; i < items.length; i++)
 			{
-				$(s).click($.proxy(function()
-				{
-					this.insertClip($(s).next().html());
-					return false;
+				var li = $('<li>');
+				var a = $('<a href="#" class="redactor-clip-link">').text(items[i][0]);
+				var div = $('<div class="redactor-clip">').hide().html(items[i][1]);
 
-				}, this));
-			}, this));
+				li.append(a);
+				li.append(div);
+				this.clips.template.append(li);
+			}
 
-			this.selectionSave();
-			this.bufferSet();
+			this.modal.addTemplate('clips', '<section>' + this.utils.getOuterHtml(this.clips.template) + '</section>');
+
+			var button = this.button.add('clips', 'Clips');
+			this.button.addCallback(button, this.clips.show);
+
+		},
+		show: function()
+		{
+			this.modal.load('clips', 'Insert Clips', 400);
 
-		}, this );
+			this.modal.createCancelButton();
 
-		this.buttonAdd('clips', 'Clips', function(e)
+			$('#redactor-modal-list').find('.redactor-clip-link').each($.proxy(this.clips.load, this));
+
+			this.selection.save();
+			this.modal.show();
+		},
+		load: function(i,s)
+		{
+			$(s).on('click', $.proxy(function(e)
+			{
+				e.preventDefault();
+				this.clips.insert($(s).next().html());
+
+			}, this));
+		},
+		insert: function(html)
 		{
-			this.modalInit('Clips', '#clipsmodal', 500, callback);
-		});
-	},
-	insertClip: function(html)
-	{
-		this.selectionRestore();
-		this.insertHtml($.trim(html));
-		this.modalClose();
-	}
+			this.selection.restore();
+			this.insert.html(html);
+			this.modal.close();
+			this.observe.load();
+		}
+	};
 };
 

vendor/assets/javascripts/redactor-rails/plugins/fontcolor.js

@@ -1,81 +1,76 @@
 if (!RedactorPlugins) var RedactorPlugins = {};
 
-RedactorPlugins.fontcolor = {
-	init: function()
+(function($)
+{
+	RedactorPlugins.fontcolor = function()
 	{
-		var colors = [
-			'#ffffff', '#000000', '#eeece1', '#1f497d', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#ffff00',
-			'#f2f2f2', '#7f7f7f', '#ddd9c3', '#c6d9f0', '#dbe5f1', '#f2dcdb', '#ebf1dd', '#e5e0ec', '#dbeef3', '#fdeada', '#fff2ca',
-			'#d8d8d8', '#595959', '#c4bd97', '#8db3e2', '#b8cce4', '#e5b9b7', '#d7e3bc', '#ccc1d9', '#b7dde8', '#fbd5b5', '#ffe694',
-			'#bfbfbf', '#3f3f3f', '#938953', '#548dd4', '#95b3d7', '#d99694', '#c3d69b', '#b2a2c7', '#b7dde8', '#fac08f', '#f2c314',
-			'#a5a5a5', '#262626', '#494429', '#17365d', '#366092', '#953734', '#76923c', '#5f497a', '#92cddc', '#e36c09', '#c09100',
-			'#7f7f7f', '#0c0c0c', '#1d1b10', '#0f243e', '#244061', '#632423', '#4f6128', '#3f3151', '#31859b',  '#974806', '#7f6000'
-		];
-
-		var buttons = ['fontcolor', 'backcolor'];
-
-		this.buttonAddSeparator();
-
-		for (var i = 0; i < 2; i++)
-		{
-			var name = buttons[i];
-
-			var $dropdown = $('<div class="redactor_dropdown redactor_dropdown_box_' + name + '" style="display: none; width: 243px;">');
-
-			this.pickerBuild($dropdown, name, colors);
-			$(this.$toolbar).append($dropdown);
-
-			this.buttonAdd(name, this.opts.curLang[name], $.proxy(function(btnName, $button, btnObject, e)
+		return {
+			init: function()
 			{
-				this.dropdownShow(e, btnName);
-
-			}, this));
-		}
-	},
-	pickerBuild: function($dropdown, name, colors)
-	{
-		var rule = 'color';
-		if (name === 'backcolor') rule = 'background-color';
-
-		var _self = this;
-		var onSwatch = function(e)
-		{
-			e.preventDefault();
-
-			var $this = $(this);
-			_self.pickerSet($this.data('rule'), $this.attr('rel'));
-
-		}
-
-		var len = colors.length;
-		for (var z = 0; z < len; z++)
-		{
-			var color = colors[z];
-
-			var $swatch = $('<a rel="' + color + '" data-rule="' + rule +'" href="#" style="float: left; font-size: 0; border: 2px solid #fff; padding: 0; margin: 0; width: 20px; height: 20px;"></a>');
-			$swatch.css('background-color', color);
-			$dropdown.append($swatch);
-			$swatch.on('click', onSwatch);
-		}
-
-		var $elNone = $('<a href="#" style="display: block; clear: both; padding: 4px 0; font-size: 11px; line-height: 1;"></a>')
-		.html(this.opts.curLang.none)
-		.on('click', function(e)
-		{
-			e.preventDefault();
-			_self.pickerSet(rule, false);
-		});
-
-		$dropdown.append($elNone);
-	},
-	pickerSet: function(rule, type)
-	{
-		this.bufferSet();
-
-		this.$editor.focus();
-		this.inlineRemoveStyle(rule);
-		if (type !== false) this.inlineSetStyle(rule, type);
-		if (this.opts.air) this.$air.fadeOut(100);
-		this.sync();
-	}
-};
+				var colors = [
+					'#ffffff', '#000000', '#eeece1', '#1f497d', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#ffff00',
+					'#f2f2f2', '#7f7f7f', '#ddd9c3', '#c6d9f0', '#dbe5f1', '#f2dcdb', '#ebf1dd', '#e5e0ec', '#dbeef3', '#fdeada', '#fff2ca',
+					'#d8d8d8', '#595959', '#c4bd97', '#8db3e2', '#b8cce4', '#e5b9b7', '#d7e3bc', '#ccc1d9', '#b7dde8', '#fbd5b5', '#ffe694',
+					'#bfbfbf', '#3f3f3f', '#938953', '#548dd4', '#95b3d7', '#d99694', '#c3d69b', '#b2a2c7', '#b7dde8', '#fac08f', '#f2c314',
+					'#a5a5a5', '#262626', '#494429', '#17365d', '#366092', '#953734', '#76923c', '#5f497a', '#92cddc', '#e36c09', '#c09100',
+					'#7f7f7f', '#0c0c0c', '#1d1b10', '#0f243e', '#244061', '#632423', '#4f6128', '#3f3151', '#31859b',  '#974806', '#7f6000'
+				];
+
+				var buttons = ['fontcolor', 'backcolor'];
+
+				for (var i = 0; i < 2; i++)
+				{
+					var name = buttons[i];
+
+					var button = this.button.add(name, this.lang.get(name));
+					var $dropdown = this.button.addDropdown(button);
+
+					$dropdown.width(242);
+					this.fontcolor.buildPicker($dropdown, name, colors);
+
+				}
+			},
+			buildPicker: function($dropdown, name, colors)
+			{
+				var rule = (name == 'backcolor') ? 'background-color' : 'color';
+
+				var len = colors.length;
+				var self = this;
+				var func = function(e)
+				{
+					e.preventDefault();
+					self.fontcolor.set($(this).data('rule'), $(this).attr('rel'));
+				};
+
+				for (var z = 0; z < len; z++)
+				{
+					var color = colors[z];
+
+					var $swatch = $('<a rel="' + color + '" data-rule="' + rule +'" href="#" style="float: left; font-size: 0; border: 2px solid #fff; padding: 0; margin: 0; width: 22px; height: 22px;"></a>');
+					$swatch.css('background-color', color);
+					$swatch.on('click', func);
+
+					$dropdown.append($swatch);
+				}
+
+				var $elNone = $('<a href="#" style="display: block; clear: both; padding: 5px; font-size: 12px; line-height: 1;"></a>').html(this.lang.get('none'));
+				$elNone.on('click', $.proxy(function(e)
+				{
+					e.preventDefault();
+					this.fontcolor.remove(rule);
+
+				}, this));
+
+				$dropdown.append($elNone);
+			},
+			set: function(rule, type)
+			{
+				this.inline.format('span', 'style', rule + ': ' + type + ';');
+			},
+			remove: function(rule)
+			{
+				this.inline.removeStyleRule(rule);
+			}
+		};
+	};
+})(jQuery);

vendor/assets/javascripts/redactor-rails/plugins/fontfamily.js

@@ -1,27 +1,35 @@
 if (!RedactorPlugins) var RedactorPlugins = {};
 
-RedactorPlugins.fontfamily = {
-	init: function ()
+(function($)
+{
+	RedactorPlugins.fontfamily = function()
 	{
-		var fonts = [ 'Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace' ];
-		var that = this;
-		var dropdown = {};
+		return {
+			init: function ()
+			{
+				var fonts = [ 'Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace' ];
+				var that = this;
+				var dropdown = {};
 
-		$.each(fonts, function(i, s)
-		{
-			dropdown['s' + i] = { title: s, callback: function() { that.setFontfamily(s); }};
-		});
+				$.each(fonts, function(i, s)
+				{
+					dropdown['s' + i] = { title: s, func: function() { that.fontfamily.set(s); }};
+				});
 
-		dropdown['remove'] = { title: 'Remove font', callback: function() { that.resetFontfamily(); }};
+				dropdown.remove = { title: 'Remove Font Family', func: that.fontfamily.reset };
 
-		this.buttonAdd('fontfamily', 'Change font family', false, dropdown);
-	},
-	setFontfamily: function (value)
-	{
-		this.inlineSetStyle('font-family', value);
-	},
-	resetFontfamily: function()
-	{
-		this.inlineRemoveStyle('font-family');
-	}
-};
+				var button = this.button.add('fontfamily', 'Change Font Family');
+				this.button.addDropdown(button, dropdown);
+
+			},
+			set: function (value)
+			{
+				this.inline.format('span', 'style', 'font-family:' + value + ';');
+			},
+			reset: function()
+			{
+				this.inline.removeStyleRule('font-family');
+			}
+		};
+	};
+})(jQuery);