diff --git a/src/device_manager/main.js b/src/device_manager/main.js index a030faa33..59942f860 100644 --- a/src/device_manager/main.js +++ b/src/device_manager/main.js @@ -1,5 +1,4 @@ /** - * * [init](#init) * * [add](#add) * * [get](#get) * * [getAll](#getall) diff --git a/src/editor/main.js b/src/editor/main.js index 7b646806f..4dd78c059 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -153,6 +153,11 @@ define(function (require){ */ DeviceManager: em.get('DeviceManager'), + /** + * @property {RichTextEditor} + */ + RichTextEditor: em.get('rte'), + /** * @property {Utils} */ diff --git a/src/rich_text_editor/config/config.js b/src/rich_text_editor/config/config.js index 191cf1241..239090956 100644 --- a/src/rich_text_editor/config/config.js +++ b/src/rich_text_editor/config/config.js @@ -4,20 +4,20 @@ define(function () { toolbarId : 'toolbar', containerId : 'wrapper', commands : [{ - command: 'bold', - title: 'Bold', - class: 'fa fa-bold', - group: 'format' - },{ - command: 'italic', - title: 'Italic', - class: 'fa fa-italic', - group: 'format' - },{ - command: 'underline', - title: 'Underline', - class: 'fa fa-underline', - group: 'format' - },], + command: 'bold', + title: 'Bold', + class: 'fa fa-bold', + group: 'format' + },{ + command: 'italic', + title: 'Italic', + class: 'fa fa-italic', + group: 'format' + },{ + command: 'underline', + title: 'Underline', + class: 'fa fa-underline', + group: 'format' + },], }; }); \ No newline at end of file diff --git a/src/rich_text_editor/main.js b/src/rich_text_editor/main.js index 31a425263..c7d18449d 100644 --- a/src/rich_text_editor/main.js +++ b/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 - * @param {Object} view - * + * Unbind rich text editor from the element + * @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; diff --git a/src/rich_text_editor/model/CommandButton.js b/src/rich_text_editor/model/CommandButton.js index dc1e05449..ac2bed4d0 100644 --- a/src/rich_text_editor/model/CommandButton.js +++ b/src/rich_text_editor/model/CommandButton.js @@ -1,16 +1,14 @@ -define(['backbone'], +define(['backbone'], function (Backbone) { - /** - * @class CommandButton - * */ - return Backbone.Model.extend({ - + return Backbone.Model.extend({ + defaults: { - command : '', - title : '', - class : '', - group : '', + command: '', + title: '', + class: '', + group: '', + arguments: [], }, - + }); }); diff --git a/src/rich_text_editor/model/CommandButtons.js b/src/rich_text_editor/model/CommandButtons.js index 9d53e77d8..da765e6ac 100644 --- a/src/rich_text_editor/model/CommandButtons.js +++ b/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, - + }); }); diff --git a/src/rich_text_editor/view/CommandButtonView.js b/src/rich_text_editor/view/CommandButtonView.js index 12549c88e..2590be200 100644 --- a/src/rich_text_editor/view/CommandButtonView.js +++ b/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; diff --git a/src/rich_text_editor/view/CommandButtonsView.js b/src/rich_text_editor/view/CommandButtonsView.js index ecdd7b9c1..b18b33569 100644 --- a/src/rich_text_editor/view/CommandButtonsView.js +++ b/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.id = this.config.stylePrefix + this.config.toolbarId; - this.$el.data('helper',1); + this.config = o.config || {}; + this.id = this.config.stylePrefix + this.config.toolbarId; + 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, - config : this.config, - attributes : { - 'title' : item.get('title'), - 'data-edit' : item.get('command'), + model: item, + config: this.config, + attributes: { + 'title': item.get('title'), + '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; } + }); });