diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 7cee88621..aab4516a1 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -570,7 +570,8 @@ export default { this.toolbar = new Toolbar(toolbar); var toolbarView = new ToolbarView({ collection: this.toolbar, - editor: this.editor + editor: this.editor, + em }); toolbarEl.appendChild(toolbarView.render().el); } diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index 853fffabe..e4291e6cf 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -45,7 +45,6 @@ export default ComponentView.extend({ } } - this.rteEnabled = 1; this.toggleEvents(1); }, @@ -67,17 +66,34 @@ export default ComponentView.extend({ this.syncContent(); } - this.rteEnabled = 0; this.toggleEvents(); }, + /** + * get content from RTE + * @return string + */ + getContent() { + const { rte } = this; + const { activeRte } = rte || {}; + let content = ''; + + if (activeRte && typeof activeRte.getContent === 'function') { + content = activeRte.getContent(); + } else { + content = this.getChildrenContainer().innerHTML; + } + + return content; + }, + /** * Merge content from the DOM to the model */ syncContent(opts = {}) { const { model, rte, rteEnabled } = this; if (!rteEnabled && !opts.force) return; - const content = this.getChildrenContainer().innerHTML; + const content = this.getContent(); const comps = model.components(); const contentOpt = { fromDisable: 1, ...opts }; comps.length && comps.reset(null, opts); @@ -141,14 +157,17 @@ export default ComponentView.extend({ * @param {Boolean} enable */ toggleEvents(enable) { - var method = enable ? 'on' : 'off'; + const { em } = this; const mixins = { on, off }; - this.em.setEditing(enable); + const method = enable ? 'on' : 'off'; + em.setEditing(enable); + this.rteEnabled = !!enable; // The ownerDocument is from the frame var elDocs = [this.el.ownerDocument, document]; mixins.off(elDocs, 'mousedown', this.disableEditing); mixins[method](elDocs, 'mousedown', this.disableEditing); + em[method]('toolbar:run:before', this.disableEditing); // Avoid closing edit mode on component click this.$el.off('mousedown', this.disablePropagation); @@ -161,8 +180,9 @@ export default ComponentView.extend({ while (el) { el.draggable = enable ? !1 : !0; + // Note: el.parentNode is sometimes null here el = el.parentNode; - el.tagName == 'BODY' && (el = 0); + el && el.tagName == 'BODY' && (el = 0); } } } diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js index 164302e3f..21d7dd9d6 100644 --- a/src/dom_components/view/ToolbarButtonView.js +++ b/src/dom_components/view/ToolbarButtonView.js @@ -13,13 +13,17 @@ export default Backbone.View.extend({ return this.model.get('attributes'); }, - initialize(opts) { - this.editor = opts.config.editor; + initialize(opts = {}) { + const { config = {} } = opts; + this.em = config.em; + this.editor = config.editor; }, handleClick(event) { event.preventDefault(); event.stopPropagation(); + const { em } = this; + em.trigger('toolbar:run:before'); this.execCommand(event); }, diff --git a/src/dom_components/view/ToolbarView.js b/src/dom_components/view/ToolbarView.js index ff920b8b0..d786e1416 100644 --- a/src/dom_components/view/ToolbarView.js +++ b/src/dom_components/view/ToolbarView.js @@ -4,8 +4,8 @@ import ToolbarButtonView from './ToolbarButtonView'; export default DomainViews.extend({ itemView: ToolbarButtonView, - initialize(opts) { - this.config = { editor: opts.editor || '' }; + initialize(opts = {}) { + this.config = { editor: opts.editor || '', em: opts.em }; this.listenTo(this.collection, 'reset', this.render); } });