tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor RTE wrapper in the way to fetch el with getChildrenContainer

pull/79/merge
Artur Arseniev 10 years ago
parent
aab8b053d8
commit
4191b7c563
1 changed files with 141 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 278
      src/rich_text_editor/main.js

278
src/rich_text_editor/main.js
View File

@ -23,20 +23,20 @@
*/ */
define(function(require) { define(function(require) {
return function() { return function() {
var c = {}, var c = {},
defaults = require('./config/config'), defaults = require('./config/config'),
rte = require('./view/TextEditorView'), rte = require('./view/TextEditorView'),
CommandButtons = require('./model/CommandButtons'), CommandButtons = require('./model/CommandButtons'),
CommandButtonsView = require('./view/CommandButtonsView'); CommandButtonsView = require('./view/CommandButtonsView');
var tlbPfx, toolbar, commands; var tlbPfx, toolbar, commands;
var mainSelf; var mainSelf;
return { return {
customRte: null, customRte: null,
/** /**
* Name of the module * Name of the module
* @type {String} * @type {String}
* @private * @private
@ -49,23 +49,23 @@ define(function(require) {
* @private * @private
*/ */
init: function(config) { init: function(config) {
mainSelf = this; mainSelf = this;
c = config || {}; c = config || {};
for (var name in defaults) { for (var name in defaults) {
if (!(name in c)) if (!(name in c))
c[name] = defaults[name]; c[name] = defaults[name];
} }
var ppfx = c.pStylePrefix; var ppfx = c.pStylePrefix;
if(ppfx) if(ppfx)
c.stylePrefix = ppfx + c.stylePrefix; c.stylePrefix = ppfx + c.stylePrefix;
tlbPfx = c.stylePrefix; tlbPfx = c.stylePrefix;
commands = new CommandButtons(c.commands); commands = new CommandButtons(c.commands);
toolbar = new CommandButtonsView({ toolbar = new CommandButtonsView({
collection: commands, collection: commands,
config: c, config: c,
}); });
return this; return this;
}, },
@ -114,132 +114,136 @@ define(function(require) {
return commands; return commands;
}, },
/** /**
* Triggered when the offset of the editro is changed * Triggered when the offset of the editro is changed
* @private * @private
*/ */
udpatePosition: function() { udpatePosition: function() {
var u = 'px'; var u = 'px';
var canvas = c.em.get('Canvas'); var canvas = c.em.get('Canvas');
var pos = canvas.getTargetToElementDim(toolbar.el, this.lastEl, { var pos = canvas.getTargetToElementDim(toolbar.el, this.lastEl, {
event: 'rteToolbarPosUpdate', event: 'rteToolbarPosUpdate',
}); });
var toolbarStyle = toolbar.el.style; var toolbarStyle = toolbar.el.style;
toolbarStyle.top = pos.top + u; toolbarStyle.top = pos.top + u;
toolbarStyle.left = pos.left + u; toolbarStyle.left = pos.left + u;
},
/**
* Bind rich text editor to the element
* @param {View} view
* @param {Object} rte The instance of already defined RTE
* @private
* */
attach: function(view, rte) {
// 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();
}
this.show();
if(c.em) {
setTimeout(this.udpatePosition.bind(this), 0);
c.em.off('change:canvasOffset', this.udpatePosition, this);
c.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);
}
//Avoid closing edit mode clicking on toolbar
toolbar.$el.on('mousedown', this.disableProp);
return rte;
}, },
/** /**
* Bind rich text editor to the element * Unbind rich text editor from the element
* @param {View} view * @param {View} view
* @param {Object} rte The instance of already defined RTE * @param {Object} rte The instance of already defined RTE
* @private
* */
detach: function(view, rte) {
var customRte = this.customRte;
var el = view.getChildrenContainer();
if (customRte) {
view.model.set('content', el.innerHTML);
customRte.disable(el, rte);
} else {
$(el).wysiwyg('destroy');
}
this.hide();
toolbar.$el.off('mousedown', this.disableProp);
},
/**
* Unbind rich text editor from the element
* @param {View} view
* @param {Object} rte The instance of already defined RTE
* @private
* */
focus: function(view, rte) {
var customRte = this.customRte;
var el = view.getChildrenContainer();
if (customRte) {
if(customRte.focus)
customRte.focus(el, rte);
} else {
this.attach(view);
}
},
/**
* Show the toolbar
* @private * @private
* */ * */
attach: function(view, rte) { show: function() {
this.lastEl = view.el; var toolbarStyle = toolbar.el.style;
var customRte = this.customRte;
// If a custom RTE is defined
if (customRte) {
rte = customRte.enable(view.el, rte);
} else {
view.$el.wysiwyg({}).focus();
}
this.show();
if(c.em) {
setTimeout(this.udpatePosition.bind(this), 0);
c.em.off('change:canvasOffset', this.udpatePosition, this);
c.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);
}
//Avoid closing edit mode clicking on toolbar
toolbar.$el.on('mousedown', this.disableProp);
return rte;
},
/**
* Unbind rich text editor from the element
* @param {View} view
* @param {Object} rte The instance of already defined RTE
* @private
* */
detach: function(view, rte) {
var customRte = this.customRte;
if (customRte) {
view.model.set('content', view.el.innerHTML);
customRte.disable(view.el, rte);
} else {
view.$el.wysiwyg('destroy');
}
this.hide();
toolbar.$el.off('mousedown', this.disableProp);
},
/**
* Unbind rich text editor from the element
* @param {View} view
* @param {Object} rte The instance of already defined RTE
* @private
* */
focus: function(view, rte) {
var customRte = this.customRte;
if (customRte) {
if(customRte.focus)
customRte.focus(view.el, rte);
} else {
this.attach(view);
}
},
/**
* Show the toolbar
* @private
* */
show: function() {
var toolbarStyle = toolbar.el.style;
toolbarStyle.display = "block"; toolbarStyle.display = "block";
}, },
/** /**
* Hide the toolbar * Hide the toolbar
* @private * @private
* */ * */
hide: function() { hide: function() {
toolbar.el.style.display = "none"; toolbar.el.style.display = "none";
}, },
/** /**
* Isolate the disable propagation method * Isolate the disable propagation method
* @private
* */
disableProp: function(e) {
e.stopPropagation();
},
/**
* Return toolbar element
* @return {HTMLElement}
* @private * @private
*/ * */
getToolbarEl: function() { disableProp: function(e) {
return toolbar.el; e.stopPropagation();
}, },
/** /**
* Render toolbar * Return toolbar element
* @return {HTMLElement} * @return {HTMLElement}
* @private * @private
*/ */
render: function(){ getToolbarEl: function() {
return toolbar.render().el; return toolbar.el;
} },
/**
* Render toolbar
* @return {HTMLElement}
* @private
*/
render: function(){
return toolbar.render().el;
}
}; };
}; };
}); });

Write Preview
Loading…
Cancel
Save