From be25a49064e80b3a4559edeb45871909563118cf Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 11 Oct 2017 01:36:23 +0200 Subject: [PATCH] Move RTE rendering from canvas to its module --- src/canvas/index.js | 2 +- src/canvas/view/CanvasView.js | 8 --- src/dom_components/view/ComponentTextView.js | 3 +- src/rich_text_editor/config/config.js | 35 ++---------- src/rich_text_editor/index.js | 56 ++++++++++---------- src/rich_text_editor/view/RichTextEditor.js | 20 +++---- 6 files changed, 45 insertions(+), 79 deletions(-) diff --git a/src/canvas/index.js b/src/canvas/index.js index fc3b591f7..9f75d794e 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -106,7 +106,7 @@ module.exports = () => { }, /** - * Returns element containing canvas tools + * Returns element containing all canvas tools * @return {HTMLElement} */ getToolsEl() { diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index d3d11feef..86a0e888e 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -362,7 +362,6 @@ module.exports = Backbone.View.extend({ `); const el = this.el; - const rte = this.em.get('rte'); const toolsEl = el.querySelector(`#${ppfx}tools`); this.hlEl = el.querySelector(`.${ppfx}highlighter`); this.badgeEl = el.querySelector(`.${ppfx}badge`); @@ -372,13 +371,6 @@ module.exports = Backbone.View.extend({ this.resizerEl = el.querySelector(`.${ppfx}resizer`); this.offsetEl = el.querySelector(`.${ppfx}offset-v`); this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`); - - if (rte) { - const rteEl = rte.render(); - rteEl.style.pointerEvents = 'all'; - toolsEl.appendChild(rteEl); - } - this.toolsEl = toolsEl; this.el.className = this.className; return this; diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index d8fc5cdeb..ee9d2498e 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -12,9 +12,10 @@ module.exports = ComponentView.extend({ ComponentView.prototype.initialize.apply(this, arguments); this.disableEditing = this.disableEditing.bind(this); const model = this.model; + const em = this.em; this.listenTo(model, 'focus active', this.enableEditing); this.listenTo(model, 'change:content', this.updateContent); - this.rte = this.config.rte || ''; + this.rte = em && em.get('rte'); this.activeRte = null; }, diff --git a/src/rich_text_editor/config/config.js b/src/rich_text_editor/config/config.js index b2d8b6a56..f27a589f0 100644 --- a/src/rich_text_editor/config/config.js +++ b/src/rich_text_editor/config/config.js @@ -1,40 +1,11 @@ module.exports = { + stylePrefix : 'rte-', - toolbarId : 'toolbar', // If true, moves the toolbar below the element when the top canvas // edge is reached adjustToolbar: 1, - // Default toolbar commands - commands : [{ - command: 'bold', - title: 'Bold', - class: 'fa fa-bold', - },{ - command: 'italic', - title: 'Italic', - class: 'fa fa-italic', - },{ - command: 'underline', - title: 'Underline', - class: 'fa fa-underline', - },{ - command: 'strikethrough', - title: 'Strikethrough', - class: 'fa fa-strikethrough', - group: 'format' - },{ - command: 'insertHTML', - title: 'Link', - class: 'fa fa-link', - args: '${content}', - }/*,{ - command: 'fontSize', - options: [ - {name: 'Huge', value: '7'}, - {name: 'Normal', value: '5'}, - {value: '1'} - ] - }*/], + // Default RTE actions + actions: ['bold', 'italic', 'underline', 'strikethrough', 'link'], }; diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index e2e39765b..b3faa620e 100644 --- a/src/rich_text_editor/index.js +++ b/src/rich_text_editor/index.js @@ -30,8 +30,7 @@ module.exports = () => { CommandButtons = require('./model/CommandButtons'), CommandButtonsView = require('./view/CommandButtonsView'); const $ = require('backbone').$; - var tlbPfx, toolbar, commands; - var mainSelf; + let toolbar, commands; return { @@ -50,26 +49,39 @@ module.exports = () => { * @private */ init(config) { - mainSelf = this; c = config || {}; - for (var name in defaults) { - if (!(name in c)) + + for (let name in defaults) { + if (!(name in c)) { c[name] = defaults[name]; + } } - var ppfx = c.pStylePrefix; - if(ppfx) + const ppfx = c.pStylePrefix; + + if (ppfx) { c.stylePrefix = ppfx + c.stylePrefix; + } - tlbPfx = c.stylePrefix; + toolbar = document.createElement('div'); + toolbar.className = `${ppfx}rte-toolbar`; + + /* commands = new CommandButtons(c.commands); toolbar = new CommandButtonsView({ collection: commands, config: c, }); + */ return this; }, + postRender(ev) { + const canvas = ev.model.get('Canvas'); + toolbar.style.pointerEvents = 'all'; + canvas.getToolsEl().appendChild(toolbar); + }, + /** * Add a new command to the toolbar * @param {string} command Command name @@ -145,6 +157,7 @@ module.exports = () => { * @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(); @@ -159,13 +172,13 @@ module.exports = () => { this.show(); - if(c.em) { + if (em) { setTimeout(this.udpatePosition.bind(this), 0); - c.em.off('change:canvasOffset', this.udpatePosition, this); - c.em.on('change:canvasOffset', this.udpatePosition, this); + em.off('change:canvasOffset', this.udpatePosition, this); + em.on('change:canvasOffset', this.udpatePosition, this); // Update position on scrolling - c.em.off('canvasScroll', this.udpatePosition, this); - c.em.on('canvasScroll', this.udpatePosition, this); + em.off('canvasScroll', this.udpatePosition, this); + em.on('canvasScroll', this.udpatePosition, this); } //Avoid closing edit mode clicking on toolbar @@ -214,8 +227,7 @@ module.exports = () => { * @private * */ show() { - var toolbarStyle = toolbar.el.style; - toolbarStyle.display = "block"; + toolbar.style.display = ''; }, /** @@ -223,7 +235,7 @@ module.exports = () => { * @private * */ hide() { - toolbar.el.style.display = "none"; + toolbar.style.display = 'none'; }, /** @@ -240,17 +252,7 @@ module.exports = () => { * @private */ getToolbarEl() { - return toolbar.el; + return toolbar; }, - - /** - * Render toolbar - * @return {HTMLElement} - * @private - */ - render() { - return toolbar.render().el; - } - }; }; diff --git a/src/rich_text_editor/view/RichTextEditor.js b/src/rich_text_editor/view/RichTextEditor.js index cf2313e2f..e73728955 100644 --- a/src/rich_text_editor/view/RichTextEditor.js +++ b/src/rich_text_editor/view/RichTextEditor.js @@ -29,7 +29,7 @@ const actions = { title: 'Link', result: (rte) => { const url = window.prompt('Enter the link URL') - if (url) rte.exec('createLink', url) + if (url) rte.exec('createLink', url)//class="link" } }, } @@ -43,14 +43,20 @@ export default class RichTextEditor { return el[RTE_KEY]; } + el.oninput = e => settings.onChange && settings.onChange(e.target.innerHTML); + el.onkeydown = e => (e.which === 9 && e.preventDefault()); + el[RTE_KEY] = this; + this.el = el; + this.doc = el.ownerDocument; + settings.actions = settings.actions ? settings.actions.map(action => { if (typeof action === 'string') { - return actions[action] + return actions[action]; } else if (actions[action.name]) { - return { ...actions[action.name], ...action } + return {...actions[action.name], ...action}; } - return action + return action; }) : Object.keys(actions).map(action => actions[action]) settings.classes = { ...{ @@ -71,12 +77,6 @@ export default class RichTextEditor { settings.actions.forEach(action => this.addAction(action)) } - el.oninput = e => settings.onChange(e.target.innerHTML) - el.onkeydown = e => (e.which === 9 && e.preventDefault()); - el[RTE_KEY] = this; - - this.el = el; - this.doc = el.ownerDocument; this.settings = settings; this.classes = classes; settings.styleWithCSS && this.exec('styleWithCSS');