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

Fix editor instance

pull/36/head
Artur Arseniev 10 years ago
parent
92454f0301
commit
51f8ee16ee
9 changed files with 148 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/commands/view/CommandAbstract.js
  2. 10
      src/commands/view/OpenStyleManager.js
  3. 71
      src/editor/main.js
  4. 11
      src/editor/model/Editor.js
  5. 2
      src/grapesjs/main.js
  6. 5
      src/panels/view/ButtonView.js
  7. 8
      test/specs/grapesjs/main.js
  8. 74
      test/specs/panels/e2e/PanelsE2e.js
  9. 7
      test/specs/panels/main.js

8
src/commands/view/CommandAbstract.js
View File

@ -40,9 +40,7 @@ define(['backbone'],
* @param {Object} sender Button sender
* @private
* */
run: function(em, sender) {
console.warn("No run method found");
},
run: function(em, sender) {},
/**
* Method that stop command
@ -50,9 +48,7 @@ define(['backbone'],
* @param {Object} sender Button sender
* @private
* */
stop: function(em, sender) {
console.warn("No stop method found");
}
stop: function(em, sender) {}
});
});

10
src/commands/view/OpenStyleManager.js
View File

@ -9,12 +9,12 @@ define(['StyleManager'], function(StyleManager) {
{
this.sender = sender;
if(!this.$cn){
var config = em.get('Config'),
panels = em.get('Panels'),
var config = em.getConfig(),
panels = em.Panels,
pfx = config.styleManager.stylePrefix || 'sm-';
config.styleManager.stylePrefix = config.stylePrefix + pfx;
config.styleManager.target = em;
config.styleManager.target = em.editor;
// Main container
this.$cn = $('<div/>');
@ -23,7 +23,7 @@ define(['StyleManager'], function(StyleManager) {
this.$cn.append(this.$cn2);
// Class Manager container
this.clm = em.get('ClassManager');
this.clm = em.ClassManager;
if(this.clm){
this.$clm = new this.clm.ClassTagsView({
collection: new this.clm.ClassTags([]),
@ -54,7 +54,7 @@ define(['StyleManager'], function(StyleManager) {
// Add all containers to the panel
this.panel.set('appendContent', this.$cn).trigger('change:appendContent');
this.target = em;
this.target = em.editor;
this.listenTo( this.target ,'change:selectedComponent', this.toggleSm);
}
this.toggleSm();

71
src/editor/main.js
View File

@ -8,6 +8,8 @@
* * [getStyle](#getstyle)
* * [setStyle](#setstyle)
* * [getSelected](#getselected)
* * [runCommand](#runcommand)
* * [stopCommand](#stopcommand)
* * [store](#store)
* * [load](#load)
* * [render](#render)
@ -27,7 +29,7 @@ define(function (require){
var Editor = function(config) {
var c = config || {},
defaults = require('./config/config'),
Editor = require('./model/Editor'),
EditorModel = require('./model/Editor'),
EditorView = require('./view/EditorView');
for (var name in defaults) {
@ -35,9 +37,9 @@ define(function (require){
c[name] = defaults[name];
}
var editorModel = new Editor(c);
var em = new EditorModel(c);
var obj = {
model : editorModel,
model : em,
config : c,
};
@ -45,62 +47,77 @@ define(function (require){
return {
editor: editorModel,
editor: em,
/**
* @property {DomComponents}
*/
DomComponents: editorModel.get('Components'),
DomComponents: em.get('Components'),
/**
* @property {CssComposer}
*/
CssComposer: editorModel.get('CssComposer'),
CssComposer: em.get('CssComposer'),
/**
* @property {StorageManager}
*/
StorageManager: editorModel.get('StorageManager'),
StorageManager: em.get('StorageManager'),
/**
* @property {AssetManager}
*/
AssetManager: editorModel.get('AssetManager'),
AssetManager: em.get('AssetManager'),
/**
* @property {ClassManager}
*/
ClassManager: editorModel.get('ClassManager'),
ClassManager: em.get('ClassManager'),
/**
* @property {CodeManager}
*/
CodeManager: editorModel.get('CodeManager'),
CodeManager: em.get('CodeManager'),
/**
* @property {Commands}
*/
Commands: editorModel.get('Commands'),
Commands: em.get('Commands'),
/**
* @property {Dialog}
*/
Dialog: editorModel.get('Modal'),
Dialog: em.get('Modal'),
/**
* @property {Panels}
*/
Panels: editorModel.get('Panels'),
Panels: em.get('Panels'),
/**
* @property {StyleManager}
*/
StyleManager: editorModel.get('StyleManager'),
StyleManager: em.get('StyleManager'),
/**
* @property {StyleManager}
*/
Canvas: editorModel.get('Canvas'),
Canvas: em.get('Canvas'),
/**
* @property {Utils}
*/
Utils: em.get('Utils'),
/**
* Initialize editor model
* @return {this}
* @private
*/
init: function(){
em.init(this);
return this;
},
/**
* Returns configuration object
@ -115,7 +132,7 @@ define(function (require){
* @return {string} HTML string
*/
getHtml: function(){
return editorModel.getHtml();
return em.getHtml();
},
/**
@ -123,7 +140,7 @@ define(function (require){
* @return {string} CSS string
*/
getCss: function(){
return editorModel.getCss();
return em.getCss();
},
/**
@ -131,7 +148,7 @@ define(function (require){
* @return {Object}
*/
getComponents: function(){
return editorModel.get('Components').getComponents();
return em.get('Components').getComponents();
},
/**
@ -148,7 +165,7 @@ define(function (require){
* });
*/
setComponents: function(components){
editorModel.setComponents(components);
em.setComponents(components);
return this;
},
@ -157,7 +174,7 @@ define(function (require){
* @return {Object}
*/
getStyle: function(){
return editorModel.get('CssComposer').getRules();
return em.get('CssComposer').getRules();
},
/**
@ -173,7 +190,7 @@ define(function (require){
* });
*/
setStyle: function(style){
editorModel.setStyle(style);
em.setStyle(style);
return this;
},
@ -182,7 +199,7 @@ define(function (require){
* @return {grapesjs.Component}
*/
getSelected: function(){
return editorModel.getSelected();
return em.getSelected();
},
/**
@ -193,21 +210,21 @@ define(function (require){
* editor.runCommand('myCommand', {someValue: 1});
*/
runCommand: function(id, options) {
var command = editorModel.get('Commands').get(id);
var command = em.get('Commands').get(id);
if(command)
command.run(this, this, options);
},
/**
* Stop command executed before
* Stop the command if stop method was provided
* @param {string} id Command ID
* @param {Object} options Custom options
* @example
* editor.stopCommand('myCommand', {someValue: 1});
*/
stopCommand: function(id, options) {
var command = editorModel.get('Commands').get(id);
var command = em.get('Commands').get(id);
if(command)
command.stop(this, this, options);
@ -218,7 +235,7 @@ define(function (require){
* @return {Object} Stored data
*/
store: function(){
return editorModel.store();
return em.store();
},
/**
@ -226,7 +243,7 @@ define(function (require){
* @return {Object} Stored data
*/
load: function(){
return editorModel.load();
return em.load();
},
/**

11
src/editor/model/Editor.js
View File

@ -43,7 +43,7 @@ define([
},
initialize: function(c) {
this.config = _.clone(c);
this.config = c;
this.pfx = this.config.storagePrefix;
this.compName = this.pfx + 'components' + this.config.id;
this.rulesName = this.pfx + 'rules' + this.config.id;
@ -70,6 +70,15 @@ define([
this.on('change:selectedComponent', this.componentSelected, this);
},
/**
* Initialize editor model and set editor instance
* @param {Editor} editor Editor instance
* @return {this}
*/
init: function(editor){
this.set('Editor', editor);
},
/**
* Initialize Parser
* */

2
src/grapesjs/main.js
View File

@ -46,7 +46,7 @@ define(function (require) {
throw new Error("'container' is required");
c.el = document.querySelector(els);
var editor = new Editor(c);
var editor = new Editor(c).init();
// Execute all plugins
var plugs = plugins.getAll();

5
src/panels/view/ButtonView.js
View File

@ -141,6 +141,7 @@ function(Backbone, require) {
* */
updateActive: function(){
var command = null;
var editor = this.em && this.em.get ? this.em.get('Editor') : null;
if(this.commands)
command = this.commands.get(this.model.get('command'));
@ -154,7 +155,7 @@ function(Backbone, require) {
this.parentM.set('active', true, { silent: true }).trigger('checkActive');
if(command)
command.run(this.em, this.model);
command.run(editor, this.model);
}else{
this.$el.removeClass(this.activeCls);
@ -164,7 +165,7 @@ function(Backbone, require) {
this.parentM.set('active', false, { silent: true }).trigger('checkActive');
if(command)
command.stop(this.em, this.model);
command.stop(editor, this.model);
}
},

8
test/specs/grapesjs/main.js
View File

@ -148,8 +148,8 @@ define(['GrapesJS', 'PluginManager', 'chai'],
editor.testVal = '';
editor.setComponents(htmlString);
editor.Commands.add('test-command', {
run: function(editor, caller, opts){
editor.testVal = editor.getHtml() + opts.val;
run: function(ed, caller, opts){
ed.testVal = ed.getHtml() + opts.val;
},
});
editor.runCommand('test-command', {val: 5});
@ -161,8 +161,8 @@ define(['GrapesJS', 'PluginManager', 'chai'],
editor.testVal = '';
editor.setComponents(htmlString);
editor.Commands.add('test-command', {
stop: function(editor, caller, opts){
editor.testVal = editor.getHtml() + opts.val;
stop: function(ed, caller, opts){
ed.testVal = ed.getHtml() + opts.val;
},
});
editor.stopCommand('test-command', {val: 5});

74
test/specs/panels/e2e/PanelsE2e.js
View File

@ -0,0 +1,74 @@
define(['GrapesJS'],
function(GrapesJS) {
return {
run : function(){
describe('E2E tests', function() {
var fixtures;
var fixture;
var obj;
var editorName = 'panel-fixture';
before(function () {
fixtures = $("#fixtures");
});
beforeEach(function () {
obj = GrapesJS;
config = {
container: '#' + editorName,
storage: { autoload: 0, type:'none' },
};
fixture = $('<div id="' + editorName + '"></div>');
fixture.empty().appendTo(fixtures);
});
afterEach(function () {
delete obj;
delete config;
fixture.remove();
});
after(function () {
fixture.remove();
});
it('Command is correctly executed on button click', function() {
var commandId = 'command-test';
config.commands = {
defaults: [{
id: commandId,
run: function(ed, caller){
ed.testValue = 'testValue';
caller.set('active', false);
}
}]
};
config.panels = {
defaults : [{
id : 'toolbar-test',
buttons : [{
id : 'button-test',
className : 'fa fa-smile-o',
command : commandId,
}],
}],
};
var editor = obj.init(config);
editor.testValue = '';
var button = editor.Panels.getButton('toolbar-test', 'button-test');
button.set('active', 1);
editor.testValue.should.equal('testValue');
button.get('active').should.equal(false);
});
});
}
};
});

7
test/specs/panels/main.js
View File

@ -6,7 +6,8 @@ define([
modulePath + '/view/PanelView',
modulePath + '/view/PanelsView',
modulePath + '/view/ButtonView',
modulePath + '/view/ButtonsView'
modulePath + '/view/ButtonsView',
modulePath + '/e2e/PanelsE2e'
],
function(
Panels,
@ -14,7 +15,8 @@ define([
PanelView,
PanelsView,
ButtonView,
ButtonsView
ButtonsView,
e2e
) {
describe('Panels', function() {
@ -111,5 +113,6 @@ define([
PanelsView.run();
ButtonView.run();
ButtonsView.run();
e2e.run();
});
});
Write Preview
Loading…
Cancel
Save