Start refactoring rich text editor module

src/device_manager/main.js

@@ -1,5 +1,4 @@
 /**
- * * [init](#init)
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)

src/editor/main.js

@@ -153,6 +153,11 @@ define(function (require){
 				 */
 				DeviceManager: em.get('DeviceManager'),
 
+				/**
+				 * @property {RichTextEditor}
+				 */
+				RichTextEditor: em.get('rte'),
+
 				/**
 				 * @property {Utils}
 				 */

src/rich_text_editor/config/config.js

@@ -4,20 +4,20 @@ define(function () {
 		toolbarId	: 'toolbar',
 		containerId	: 'wrapper',
 		commands	: [{
-							command: 	'bold',
+			command: 	'bold',
-							title: 		'Bold',
+			title: 		'Bold',
-							class:		'fa fa-bold',
+			class:		'fa fa-bold',
-							group:		'format'
+			group:		'format'
-						},{
+		},{
-							command: 	'italic',
+			command: 	'italic',
-							title: 		'Italic',
+			title: 		'Italic',
-							class:		'fa fa-italic',
+			class:		'fa fa-italic',
-							group:		'format'
+			group:		'format'
-						},{
+		},{
-							command: 	'underline',
+			command: 	'underline',
-							title: 		'Underline',
+			title: 		'Underline',
-							class:		'fa fa-underline',
+			class:		'fa fa-underline',
-							group:		'format'
+			group:		'format'
-					 },],
+	 },],
 	};
 });

src/rich_text_editor/main.js

@@ -1,3 +1,19 @@
+/**
+ * * [add](#add)
+ * * [get](#get)
+ * * [getAll](#getall)
+ * * [remove](#remove)
+ *
+ * This module allows to customize the toolbar of the Rich Text Editor
+ * Before using methods you should get first the module from the editor instance, in this way:
+ *
+ * ```js
+ * var rte = editor.RichTextEditor;
+ * ```
+ * Complete list of commands
+ * http://www.quirksmode.org/dom/execCommand.html
+ * @module RichTextEditor
+ */
 define(function(require) {
 
 	return function() {
@@ -6,7 +22,7 @@ define(function(require) {
 		rte = require('./view/TextEditorView'),
 		CommandButtons = require('./model/CommandButtons'),
 		CommandButtonsView = require('./view/CommandButtonsView');
-		var tlbPfx, toolbar;
+		var tlbPfx, toolbar, commands;
 
 		return {
 
@@ -20,6 +36,7 @@ define(function(require) {
       /**
        * Initialize module. Automatically called with a new instance of the editor
        * @param {Object} config Configurations
+       * @private
        */
       init: function(config) {
         c = config || {};
@@ -33,13 +50,39 @@ define(function(require) {
 					c.stylePrefix = ppfx + c.stylePrefix;
 
 				tlbPfx = c.stylePrefix;
+        commands = new CommandButtons(c.commands);
 				toolbar = new CommandButtonsView({
-					collection: new CommandButtons(c.commands),
+					collection: commands,
 					config: c,
 				});
         return this;
       },
 
+      /**
+       * Add new command to the toolbar
+       * @param {string} command Command name
+       * @param {string} command Command name
+       * @example
+       * var cm = rte.add('bold', {
+       *   title: 'Make bold',
+       *   class: 'fa fa-bold',
+       * });
+       * // With arguments
+       * var cm = rte.add('fontSize', {
+       *   title: 'Font size',
+       *   arguments: [
+       *     {name: 'Big', value: 5},
+       *     {name: 'Normal', value: 3},
+       *     {name: 'Small', value: 1}
+       *   ]
+       * });
+       */
+      add: function(command, opts) {
+        var obj = opts || {};
+        obj.command = command;
+        return commands.add(obj);
+      },
+
 			/**
        * Triggered when the offset of the editro is changed
        * @private
@@ -58,8 +101,9 @@ define(function(require) {
       },
 
 			/**
-			 * Bind rich text editor to element
+			 * Bind rich text editor to the element
 			 * @param {View} view
+       * @private
 			 * */
 			attach: function(view){
 				view.$el.wysiwyg({}).focus();
@@ -76,9 +120,9 @@ define(function(require) {
 			},
 
 			/**
-			 * Unbind rich text editor from element
+			 * Unbind rich text editor from the element
-			 * @param		{Object}	view
+			 * @param {View} view
-			 *
+			 * @private
 			 * */
 			detach: function(view){
 				view.$el.wysiwyg('destroy');
@@ -87,24 +131,24 @@ define(function(require) {
 			},
 
 			/**
-			 * Show toolbar
+			 * Show the toolbar
-			 *
+			 * @private
 			 * */
 			show: function(){
 				toolbar.el.style.display = 'block';
 			},
 
 			/**
-			 * Hide toolbar
+			 * Hide the toolbar
-			 *
+			 * @private
 			 * */
 			hide: function(){
 				toolbar.el.style.display = 'none';
 			},
 
 			/**
-			 * Isolate disable propagation method
+			 * Isolate the disable propagation method
-			 *
+			 * @private
 			 * */
 			disableProp: function(e){
 				e.stopPropagation();
@@ -113,6 +157,7 @@ define(function(require) {
 			/**
 			 * Return toolbar element
 			 * @return {HTMLElement}
+       * @private
 			 */
 			getToolbarEl: function() {
 				return toolbar.el;
@@ -121,6 +166,7 @@ define(function(require) {
 			/**
 			 * Render toolbar
 			 * @return {HTMLElement}
+       * @private
 			 */
 			render: function(){
 				return toolbar.render().el;

src/rich_text_editor/model/CommandButton.js

@@ -1,16 +1,14 @@
-define(['backbone'], 
+define(['backbone'],
 	function (Backbone) {
-		/**
+		return Backbone.Model.extend({
-		 * @class CommandButton
+
-		 * */
-		return Backbone.Model.extend({ 
-			
 			defaults: {
-				command		: '',
+				command: '',
-				title		: '',
+				title: '',
-				class		: '',
+				class: '',
-				group		: '',
+				group: '',
+        arguments: [],
 			},
-			
+
 		});
 });

src/rich_text_editor/model/CommandButtons.js

@@ -1,11 +1,8 @@
-define([ 'backbone','./CommandButton'], 
+define([ 'backbone','./CommandButton'],
 	function (Backbone, CommandButton) {
-		/**
-		 * @class CommandButtons
-		 * */
 		return Backbone.Collection.extend({
-			
+
 			model: CommandButton,
-			
+
 		});
 });

src/rich_text_editor/view/CommandButtonView.js

@@ -1,17 +1,14 @@
-define(['backbone'], 
+define(['backbone'],
 	function (Backbone) {
-	/** 
-	 * @class CommandButtonView
-	 * */
 	return Backbone.View.extend({
-		
+
 		tagName: 'a',
-		
+
 		initialize: function(o){
 			this.config		= o.config || {};
 			this.className	= this.config.stylePrefix + 'btn ' + this.model.get('class');
 		},
-		
+
 		render: function() {
 			this.$el.attr('class',  _.result( this, 'className' ) );
 			return this;

src/rich_text_editor/view/CommandButtonsView.js

@@ -1,18 +1,15 @@
 define(['backbone','./CommandButtonView'],
 	function (Backbone, CommandButtonView) {
-	/**
-	 * @class CommandButtonsView
-	 * */
 	return Backbone.View.extend({
 
 		attributes : {
-			'data-role' 	:	'editor-toolbar',
+			'data-role':	'editor-toolbar',
 		},
 
 		initialize: function(o){
-			this.config		= o.config || {};
+			this.config = o.config || {};
-			this.id			= this.config.stylePrefix + this.config.toolbarId;
+			this.id = this.config.stylePrefix + this.config.toolbarId;
-			this.$el.data('helper',1);
+			this.$el.data('helper', 1);
 		},
 
 		render: function() {
@@ -21,11 +18,11 @@ define(['backbone','./CommandButtonView'],
 
 			this.collection.each(function(item){
 				var view = new CommandButtonView({
-					model 		: item,
+					model: item,
-					config		: this.config,
+					config: this.config,
-					attributes 	: {
+					attributes: {
-						'title'		: item.get('title'),
+						'title': item.get('title'),
-						'data-edit'	: item.get('command'),
+						'data-edit': item.get('command'),
 					},
 				});
 				fragment.appendChild(view.render().el);
@@ -34,5 +31,6 @@ define(['backbone','./CommandButtonView'],
 			this.$el.attr('id',  _.result( this, 'id' ) );
 			return this;
 		}
+
 	});
 });