diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index ba3ec68aa..6239ef75b 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -19,11 +19,10 @@ module.exports = ComponentView.extend({ }, /** - * Enable the component to be editable - * @param {Event} e + * Enable element content editing * @private * */ - enableEditing(e) { + enableEditing() { const editable = this.model.get('editable'); const rte = this.rte; @@ -40,11 +39,10 @@ module.exports = ComponentView.extend({ }, /** - * Disable this component to be editable - * @param {Event} + * Disable element content editing * @private * */ - disableEditing(e) { + disableEditing() { const model = this.model; const editable = model.get('editable'); const rte = this.rte; diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index 0bbbe9650..e14a766c6 100644 --- a/src/rich_text_editor/index.js +++ b/src/rich_text_editor/index.js @@ -3,6 +3,7 @@ * * [get](#get) * * [getAll](#getall) * * [remove](#remove) + * * [getToolbarEl](#gettoolbarel) * * This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. * For more info about HTML Editing APIs check here: @@ -21,16 +22,17 @@ * http://www.quirksmode.org/dom/execCommand.html * @module RichTextEditor */ -const $ = Backbone.$; +import RichTextEditor from './model/RichTextEditor'; +import {on, off} from 'utils/mixins' module.exports = () => { - var c = {}, + let config = {}, defaults = require('./config/config'), rte = require('./view/TextEditorView'), CommandButtons = require('./model/CommandButtons'), CommandButtonsView = require('./view/CommandButtonsView'); const $ = require('backbone').$; - let toolbar, commands; + let toolbar, commands, lastEl; return { @@ -45,27 +47,30 @@ module.exports = () => { /** * Initialize module. Automatically called with a new instance of the editor - * @param {Object} config Configurations + * @param {Object} opts Options * @private */ - init(config) { - c = config || {}; + init(opts) { + config = opts || {}; for (let name in defaults) { - if (!(name in c)) { - c[name] = defaults[name]; + if (!(name in config)) { + config[name] = defaults[name]; } } - const ppfx = c.pStylePrefix; + const ppfx = config.pStylePrefix; if (ppfx) { - c.stylePrefix = ppfx + c.stylePrefix; + config.stylePrefix = ppfx + config.stylePrefix; } toolbar = document.createElement('div'); toolbar.className = `${ppfx}rte-toolbar`; + //Avoid closing on toolbar clicking + on(toolbar, 'mousedown', e => e.stopPropagation()); + /* commands = new CommandButtons(c.commands); toolbar = new CommandButtonsView({ @@ -133,12 +138,12 @@ module.exports = () => { */ udpatePosition() { var u = 'px'; - var canvas = c.em.get('Canvas'); - var pos = canvas.getTargetToElementDim(toolbar.el, this.lastEl, { + var canvas = config.em.get('Canvas'); + var pos = canvas.getTargetToElementDim(toolbar.el, lastEl, { event: 'rteToolbarPosUpdate', }); - if (c.adjustToolbar) { + if (config.adjustToolbar) { // Move the toolbar down when the top canvas edge is reached if (pos.top <= pos.canvasTop) { pos.top = pos.elementTop + pos.elementHeight; @@ -151,26 +156,19 @@ module.exports = () => { }, /** - * Bind rich text editor to the element + * Enable rich text editor on the element * @param {View} view * @param {Object} rte The instance of already defined RTE * @private * */ - attach(view, rte) { - const em = c.em; - // lastEl will be used to place the RTE toolbar - this.lastEl = view.el; - var el = view.getChildrenContainer(); - var customRte = this.customRte; - - // If a custom RTE is defined - if (customRte) { - rte = customRte.enable(el, rte); - } else { - $(el).wysiwyg({}).focus(); - } + enable(view, rte) { + lastEl = view.el; + const em = config.em; + const el = view.getChildrenContainer(); + const customRte = this.customRte; - this.show(); + rte = customRte ? customRte.enable(el, rte) : new RichTextEditor({el}); + toolbar.style.display = ''; if (em) { setTimeout(this.udpatePosition.bind(this), 0); @@ -181,8 +179,6 @@ module.exports = () => { em.on('canvasScroll', this.udpatePosition, this); } - //Avoid closing edit mode clicking on toolbar - toolbar.$el.on('mousedown', this.disableProp); return rte; }, @@ -192,17 +188,17 @@ module.exports = () => { * @param {Object} rte The instance of already defined RTE * @private * */ - detach(view, rte) { - var customRte = this.customRte; + disable(view, rte) { + const customRte = this.customRte; var el = view.getChildrenContainer(); + if (customRte) { - view.model.set('content', el.innerHTML); customRte.disable(el, rte); } else { - $(el).wysiwyg('destroy'); + rte.disable(); } - this.hide(); - toolbar.$el.off('mousedown', this.disableProp); + + toolbar.style.display = 'none'; }, /** @@ -223,31 +219,7 @@ module.exports = () => { }, /** - * Show the toolbar - * @private - * */ - show() { - toolbar.style.display = ''; - }, - - /** - * Hide the toolbar - * @private - * */ - hide() { - toolbar.style.display = 'none'; - }, - - /** - * Isolate the disable propagation method - * @private - * */ - disableProp(e) { - e.stopPropagation(); - }, - - /** - * Return toolbar element + * Return the toolbar element * @return {HTMLElement} * @private */