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

Update with v0.3.18

pull/2301/head
Artur Arseniev 10 years ago
parent
c9212feb30
commit
bc83a47e66
7 changed files with 3190 additions and 518 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. 608
      demo.html
  2. 149
      gjs-plg-doc.html
  3. 2752
      js/acroform.js
  4. 32
      js/grapes.min.js
  5. 164
      js/jspdf0.min.js
  6. 2
      stylesheets/grapes.min.css
  7. 1
      stylesheets/grapesjs-plg.css

608
demo.html
View File

@ -861,473 +861,191 @@
<script src="js/grapes.min.js"></script> <script src="js/grapes.min.js"></script>
<script src="js/grapesjs-plugin-export.min.js"></script> <script src="js/grapesjs-plugin-export.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var gr = grapesjs.init(
{ var lp = './img/';
var plp = 'http://placehold.it/350x250/';
var images = [
lp+'team1.jpg', lp+'team2.jpg', lp+'team3.jpg', plp+'78c5d6/fff/image1.jpg', plp+'459ba8/fff/image2.jpg', plp+'79c267/fff/image3.jpg',
plp+'c5d647/fff/image4.jpg', plp+'f28c33/fff/image5.jpg', plp+'e868a2/fff/image6.jpg', plp+'cc4360/fff/image7.jpg',
lp+'work-desk.jpg', lp+'phone-app.png', lp+'bg-gr-v.png'
];
var gr = grapesjs.init({
height: '100%', height: '100%',
container : '#gjs', container : '#gjs',
fromElement: true, fromElement: true,
plugins: ['gjs-plugin-export'], plugins: ['gjs-plugin-export'],
commands: {
defaults : [{ // Define commands
id: 'open-github', commands: {
run: function(em, sender){ defaults: [{
sender.set('active',false); id: 'open-github',
window.open('https://github.com/artf/grapesjs','_blank'); run: function(em, sender){
}, sender.set('active',false);
stop: function(){} window.open('https://github.com/artf/grapesjs','_blank');
},{ },
id: 'undo', },{
run: function(em, sender){ id: 'undo',
sender.set('active',false); run: function(em, sender){
em.UndoManager.undo(true); sender.set('active',false);
}, em.UndoManager.undo(true);
stop: function(){} },
},{ },{
id: 'redo', id: 'redo',
run: function(em, sender){ run: function(em, sender){
sender.set('active',false); sender.set('active',false);
em.UndoManager.redo(true); em.UndoManager.redo(true);
}, },
stop: function(){} },{
},{ id: 'clean-all',
id: 'clean-all', run: function(em, sender){
run: function(em, sender){ sender.set('active',false);
sender.set('active',false); if(confirm('Are you sure to clean the canvas?')){
if(confirm('Are you sure to clean the canvas?')){ var comps = em.DomComponents.clear();
var comps = em.DomComponents.clear(); }
} },
}, }],
stop: function(){}
}],
}, },
// Insert some default images
assetManager: { assetManager: {
storageType : '', assets: images
storeOnChange : true,
storeAfterUpload : true,
assets : [
{ type: 'image', src : './img/team1.jpg',height:100, width:100},
{ type: 'image', src : './img/team2.jpg',height:100, width:100},
{ type: 'image', src : './img/team3.jpg',height:100, width:100},
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg',height:350, width:250},
{ type: 'image', src : './img/work-desk.jpg',height:1080, width:1728},
{ type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
]
}, },
// Configure Style Manager // 1481 - 1235
styleManager : { styleManager : {
sectors: [{ sectors: [{
name: 'General', name: 'General',
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
properties:[{ properties:[{
name : 'Alignment', name: 'Alignment',
property : 'float', property: 'float',
type : 'radio', type: 'radio',
defaults : 'none', defaults: 'none',
list : [{ list: [
value : 'none', { value: 'none', className: 'fa fa-times'},
title : 'None', { value: 'left', className: 'fa fa-align-left'},
className : 'fa fa-times', { value: 'right', className: 'fa fa-align-right'}
},{ ],
value : 'left', },
className : 'fa fa-align-left', { property: 'position', type: 'select'}
title : 'Float element to the left', ],
},{ },{
value : 'right',
className : 'fa fa-align-right',
title : 'Float element to the right',
}],
},{
property : 'display',
type : 'radio',
list : [{
value : 'block',
title : 'Block',
},{
value : 'inline',
title : 'Inline',
},{
value : 'inline-block',
title : 'Inline-block',
},{
value : 'none',
title : 'None',
className : 'fa fa-eye-slash',
}],
}],
},{
name: 'Dimension', name: 'Dimension',
open: false, open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
properties:[{ properties:[{
name : 'Margin', property: 'margin',
property : 'margin', properties:[
type : 'composite', { name: 'Top', property: 'margin-top'},
properties:[{ { name: 'Right', property: 'margin-right'},
name : 'Top', { name: 'Bottom', property: 'margin-bottom'},
property : 'margin-top', { name: 'Left', property: 'margin-left'}
type : 'integer', ],
units : ['px','%'], },{
defaults : 0,
},{
name : 'Right',
property : 'margin-right',
type : 'integer',
units : ['px','%'],
defaults : 0,
},{
name : 'Bottom',
property : 'margin-bottom',
type : 'integer',
units : ['px','%'],
defaults : 0,
},{
name : 'Left',
property : 'margin-Left',
type : 'integer',
units : ['px','%'],
defaults : 0,
},],
},/*{
name : 'Center block',
property : 'margin',
type : 'select',
defaults : '0',
list : [
{ value: '0', name: 'Normal',},
{ value: '0 auto', name: 'Center',}
],
},*/{
name : 'Padding',
property : 'padding', property : 'padding',
type : 'composite', properties:[
properties:[{ { name: 'Top', property: 'padding-top'},
name : 'Top', { name: 'Right', property: 'padding-right'},
property : 'padding-top', { name: 'Bottom', property: 'padding-bottom'},
type : 'integer', { name: 'Left', property: 'padding-left'}
units : ['px','%'], ],
defaults : 0, }],
min : 0,
},{
name : 'Right',
property : 'padding-right',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Bottom',
property : 'padding-bottom',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Left',
property : 'padding-left',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},],
},],
},{ },{
name: 'Typography', name: 'Typography',
open: false, open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'], buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
properties:[{ properties:[
name: 'Font', { name: 'Font', property: 'font-family'},
property: 'font-family', { name: 'Weight', property: 'font-weight'},
},{ { name: 'Font color', property: 'color'},
name: 'Weight', {
property: 'font-weight', property: 'text-align',
},{ type: 'radio',
name: 'Font color', defaults: 'left',
property: 'color', list: [
},{ { value : 'left', name : 'Left', className: 'fa fa-align-left'},
name : 'Text align', { value : 'center', name : 'Center', className: 'fa fa-align-center' },
property : 'text-align', { value : 'right', name : 'Right', className: 'fa fa-align-right'},
type : 'radio', { value : 'justify', name : 'Justify', className: 'fa fa-align-justify'}
defaults : 'left', ],
list : [{ value : 'left', name : 'Left', className: 'fa fa-align-left'}, },{
{ value : 'center', name : 'Center', className: 'fa fa-align-center' }, property: 'text-shadow',
{ value : 'right', name : 'Right', className: 'fa fa-align-right'}, properties: [
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'},], { name: 'X position', property: 'text-shadow-h'},
},{ { name: 'Y position', property: 'text-shadow-v'},
name : 'Text shadow', { name: 'Blur', property: 'text-shadow-blur'},
property : 'text-shadow', { name: 'Color', property: 'text-shadow-color'}
type : 'stack', ],
preview : true,
properties : [{
name: 'X position',
property: 'h-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Y position',
property: 'v-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Blur',
property: 'blur-radius',
type: 'integer',
units: ['px'],
defaults : 0,
min: 0,
},{
name: 'Color',
property: 'shadow-color',
type: 'color',
defaults: 'black',
},],
}], }],
},{ },{
name: 'Decorations', name: 'Decorations',
open: false, open: false,
buildProps: [ 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], buildProps: [ 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
properties: [{ properties: [{
name : 'Background', property: 'border-radius',
property : 'background-color', properties : [
},{ { name: 'Top', property: 'border-top-left-radius'},
name : 'Border radius', { name: 'Right', property: 'border-top-right-radius'},
property : 'border-radius', { name: 'Bottom', property: 'border-bottom-left-radius'},
type : 'composite', { name: 'Left', property: 'border-bottom-right-radius'}
properties : [{ ],
name : 'Top',
property : 'border-top-left-radius',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Right',
property : 'border-top-right-radius',
type : 'integer',
units : ['px','%'],
min : 0,
defaults : 0,
},{
name : 'Bottom',
property : 'border-bottom-left-radius',
type : 'integer',
units : ['px','%'],
min : 0,
defaults : 0,
},{
name : 'Left',
property : 'border-bottom-right-radius',
type : 'integer',
units : ['px'],
min : 0,
defaults : 0,
},],
},{ },{
name : 'Box shadow', property: 'box-shadow',
property : 'box-shadow', properties: [
type : 'stack', { name: 'X position', property: 'box-shadow-h'},
preview : true, { name: 'Y position', property: 'box-shadow-v'},
properties : [{ { name: 'Blur', property: 'box-shadow-blur'},
name: 'X position', { name: 'Spread', property: 'box-shadow-spread'},
property: 'shadow-x', { name: 'Color', property: 'box-shadow-color'},
type: 'integer', { name: 'Shadow type', property: 'box-shadow-type'}
units: ['px','%'], ],
defaults : 0,
},{
name: 'Y position',
property: 'shadow-y',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Blur',
property: 'shadow-blur',
type: 'integer',
units: ['px'],
defaults : 5,
min: 0,
},{
name: 'Spread',
property: 'shadow-spread',
type: 'integer',
units: ['px'],
defaults : 0,
},{
name: 'Color',
property: 'shadow-color',
type: 'color',
defaults: 'black',
},{
name: 'Shadow type',
property: 'shadow-type',
type: 'select',
defaults: '',
list: [ { value : '', name : 'Outside', },
{ value : 'inset', name : 'Inside', }],
}],
},{ },{
name : 'Background', property: 'background',
property : 'background', properties: [
type : 'stack', { name: 'Image', property: 'background-image'},
preview : true, { name: 'Repeat', property: 'background-repeat'},
detached: true, { name: 'Position', property: 'background-position'},
properties : [{ { name: 'Attachment', property: 'background-attachment'},
name: 'Image', { name: 'Size', property: 'background-size'}
property: 'background-image', ],
type: 'file',
defaults: 'none',
},
{
name: 'Repeat',
property: 'background-repeat',
type: 'select',
defaults: 'repeat',
list: [{ value : 'repeat', name : 'Repeat', },
{ value : 'repeat-x', name : 'Repeat X', },
{ value : 'repeat-y', name : 'Repeat Y', },
{ value : 'no-repeat', name : 'No repeat', }],
},
{
name: 'Position',
property: 'background-position',
type: 'select',
defaults: 'left top',
list: [ { value : 'left top',},
{ value : 'left center',},
{ value : 'left bottom',},
{ value : 'right top',},
{ value : 'right center'},
{ value : 'right bottom'},
{ value : 'center top'},
{ value : 'center center'},
{ value : 'center bottom'}
]
},{
name: 'Attachment',
property: 'background-attachment',
type: 'select',
defaults: 'scroll',
list: [{ value : 'scroll'},
{ value : 'fixed'},
{ value : 'local'}],
},{
name: 'Size',
property: 'background-size',
type: 'select',
defaults: 'auto',
list: [{ value : 'auto'},
{ value : 'cover'},
{ value : 'contain'}],
}],
},], },],
},{ },{
name: 'Extra', name: 'Extra',
open: false, open: false,
buildProps: ['transition', 'perspective', 'transform'], buildProps: ['transition', 'perspective', 'transform'],
properties: [{ properties: [{
name: 'Transition',
property: 'transition', property: 'transition',
type: 'stack', properties:[
preview: false, { name: 'Property', property: 'transition-property'},
properties:[{ { name: 'Duration', property: 'transition-duration'},
name: 'Property', { name: 'Easing', property: 'transition-timing-function'}
property: 'transition-property', ],
type: 'select',
defaults: '',
list: [{ value : 'all', name : 'All', },
{ value : 'width', name : 'Width', },
{ value : 'height', name : 'Height', },
{ value : 'background-color', name : 'Background', },
{ value : 'transform', name : 'Transform', },
{ value : 'box-shadow', name : 'Box shadow', },
{ value : 'opacity', name : 'Opacity', }],
},{
name: 'Duration',
property: 'transition-duration',
type: 'integer',
units: ['s'],
defaults : '2',
min: 0,
},{
name: 'Easing',
property: 'transition-timing-function',
type: 'select',
defaults: 'ease',
list: [{ value : 'linear', name : 'Linear', },
{ value : 'ease', name : 'Ease', },
{ value : 'ease-in', name : 'Ease-in', },
{ value : 'ease-out', name : 'Ease-out', },
{ value : 'ease-in-out', name : 'Ease-in-out', }],
}],
},{ },{
name: 'Transform',
property: 'transform', property: 'transform',
type: 'composite', properties:[
properties:[{ { name: 'Rotate X', property: 'transform-rotate-x'},
name: 'Rotate X', { name: 'Rotate Y', property: 'transform-rotate-y'},
property: 'transform-rotate-x', { name: 'Rotate Z', property: 'transform-rotate-z'},
type: 'integer', { name: 'Scale X', property: 'transform-scale-x'},
units: ['deg'], { name: 'Scale Y', property: 'transform-scale-y'},
defaults : '0', { name: 'Scale Z', property: 'transform-scale-z'}
functionName: 'rotateX', ],
},{
name: 'Rotate Y',
property: 'transform-rotate-y',
type: 'integer',
units: ['deg'],
defaults : '0',
functionName: 'rotateY',
},{
name: 'Rotate Z',
property: 'transform-rotate-z',
type: 'integer',
units: ['deg'],
defaults : '0',
functionName: 'rotateZ',
},{
name: 'Scale X',
property: 'transform-scale-x',
type: 'integer',
defaults : '1',
functionName: 'scaleX',
},{
name: 'Scale Y',
property: 'transform-scale-y',
type: 'integer',
defaults : '1',
functionName: 'scaleY',
},{
name: 'Scale Z',
property: 'transform-scale-z',
type: 'integer',
defaults : '1',
functionName: 'scaleZ',
}],
}] }]
},{ },{
name: 'Flex', name: 'Flex',
open: false, open: false,
properties: [{ properties: [{
name : 'Flex Container', name: 'Flex Container',
property : 'display', property: 'display',
type : 'select', type: 'select',
defaults : 'block', defaults: 'block',
list : [{ list: [
value : 'block', { value: 'block', name: 'Disable'},
name : 'Disable', { value: 'flex', name: 'Enable'}
},{ ],
value : 'flex',
name : 'Enable',
}],
},{ },{
name: 'Flex Parent', name: 'Flex Parent',
property: 'label-parent-flex', property: 'label-parent-flex',
@ -1474,28 +1192,28 @@
); );
// Add extra buttons // Add extra buttons
gr.Panels.addButton('options', [{ gr.Panels.addButton('options', [{
id: 'undo', id: 'undo',
className: 'fa fa-undo icon-undo', className: 'fa fa-undo icon-undo',
command: 'undo', command: 'undo',
attributes: { title: 'Undo (CTRL/CMD + Z)'} attributes: { title: 'Undo (CTRL/CMD + Z)'}
},{ },{
id: 'redo', id: 'redo',
className: 'fa fa-repeat icon-redo', className: 'fa fa-repeat icon-redo',
command: 'redo', command: 'redo',
attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' } attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }
},{ },{
id: 'clean-all', id: 'clean-all',
className: 'fa fa-trash icon-blank', className: 'fa fa-trash icon-blank',
command: 'clean-all', command: 'clean-all',
attributes: { title: 'Empty canvas' } attributes: { title: 'Empty canvas' }
},{ },{
id: 'view-github', id: 'view-github',
className: 'fa fa-github', className: 'fa fa-github',
command: 'open-github', command: 'open-github',
attributes: { title: 'View on Github' } attributes: { title: 'View on Github' }
}]); }]);
</script> </script>

149
gjs-plg-doc.html
View File

@ -2,13 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>GrapesJS Playground PDF Creator</title> <title>GrapesJS Playground PDF Builder</title>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"> <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" href="stylesheets/grapesjs-plg.css"> <link rel="stylesheet" type="text/css" href="stylesheets/grapesjs-plg.css">
<link rel="stylesheet" href="stylesheets/grapes.min.css"> <link rel="stylesheet" href="stylesheets/grapes.min.css">
<script src="js/jquery.js"></script> <script src="js/jquery.js"></script>
<script src="js/grapes.min.js"></script> <script src="js/grapes.min.js"></script>
<script src="js/jspdf.min.js"></script> <script src="js/jspdf0.min.js"></script>
<script src="js/html2canvas.js"></script> <script src="js/html2canvas.js"></script>
<style type="text/css"> <style type="text/css">
body, html{ height: 100%; margin: 0; } body, html{ height: 100%; margin: 0; }
@ -17,12 +17,23 @@
max-width: none; max-width: none;
width: 90%; width: 90%;
} }
.gjs-plg-editor{ width: 70%; } .gjs-plg-editor{ width: 100%; }
.gjs-plg-output{ width: 30%; } .gjs-plg-output{ width: 30%; display: none;}
.gjs-plg-output .doc { .gjs-plg-output .doc {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.gjs-playground{
height: auto;
text-shadow: none;
}
.gjs-cv-canvas > iframe {
margin-top: 35px;
height: 850px;
}
.gjs-cv-canvas > iframe body{
overflow: hidden;
}
/* /*
.gjs-cv-canvas{ .gjs-cv-canvas{
background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQYlWNwcXH5Twjb2dn9ZxhVSB2FdnZ2/4nBAJ3Ssfdcli76AAAAAElFTkSuQmCC") repeat scroll 0 0 background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQYlWNwcXH5Twjb2dn9ZxhVSB2FdnZ2/4nBAJ3Ssfdcli76AAAAAElFTkSuQmCC") repeat scroll 0 0
@ -81,59 +92,78 @@
<script type="text/javascript"> <script type="text/javascript">
var a4 = [ 595.28, 841.89]; var a4 = [ 595.28, 841.89];
var docFrame = $('iframe.doc'); var docFrame = $('iframe.doc');
var saveFilePls = function(fs){
console.log('INSIDE RequestFS');
/*
fs.root.getFile("info.txt", {create: true}, function(file) {
file.createWriter(function(writer) {
var blob = new Blob(["Lorem Ipsum"], {type: "text/plain"});
writer.write(blob);
});
});
*/
// Remove /**
// localstorage.root.getFile("info.txt", {create: false}, function(DatFile) { DatFile.remove(function() {}); }) * Generate PDF from the canvas
} * @param {HTMLElement} el
var generatePdf = function (el) { */
var generatePdf2 = function (el) {
getEditorCanvas(el).then(function(canvas){ getEditorCanvas(el).then(function(canvas){
// img is a good png image 125kb
var img = canvas.toDataURL("image/png"), var img = canvas.toDataURL("image/png"),
doc = new jsPDF({ doc = new jsPDF({
unit:'px', unit:'px',
format:'a4' format:'a4'
}); });
doc.addImage(img, 'image/png', 20, 20); doc.addImage(img, 'image/png', 20, 20);
console.time('test'); doc.save('grapesjs_export_' + new Date().getTime() + '.pdf');
var string = doc.output('datauristring'); });
console.timeEnd('test'); }
docFrame.attr('src', img);
/* var generatePdf = function (el) {
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, saveFilePls, function(err){ doc = new jsPDF({
console.log(err); unit:'px',
format:'a4'
}); });
*/ var specialElementHandlers = {
/*
/* '#wrapper': function(element, renderer){
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024*1024, function(grantedBytes) { console.log(element, renderer);
window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, saveFilePls, function(err){ return true;
console.log('Er2',err); }*/
'#inputTest': function(element, renderer){
console.log(element, renderer);
var textField = new TextField();
textField.Rect = [100, 140, 100, 10];
textField.multiline = true;
textField.V = element.value;//
textField.T = "TestTextBox";
//textField.Q = 2; // Text-Alignment
renderer.pdf.addField(textField);
return true;
}
};
console.log(el);
doc.fromHTML(el, 15, 15, {
//'width': 170,
'elementHandlers': specialElementHandlers
}, function(){
console.log('done');
doc.save('grapesjs_export_' + new Date().getTime() + '.pdf');
}); });
}, function(err){ }
console.log('Er1', err);
} );
*/
//doc.save('test-pdf.pdf'); /**
//el.width(cache_width); * Generate PNG from the canvas
}); * @param {HTMLElement} el
*/
var generatePng = function(el) {
getEditorCanvas(el).then(function(canvas){
var img = canvas.toDataURL("image/png");
var a = document.createElement('a');
a.href = img.replace("image/png", "image/octet-stream");
a.download = 'grapesjs_export_' + new Date().getTime() + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
} }
/**
* Get canvas from the GrapesJS editor
* @param {HTMLElement} el
* @return {Promise}
*/
var getEditorCanvas = function(el) { var getEditorCanvas = function(el) {
//form.width((a4[0]*1.33333) -80).css('max-width','none');
return html2canvas(el, { return html2canvas(el, {
imageTimeout:2000, imageTimeout:2000,
removeContainer:true removeContainer:true
@ -160,13 +190,17 @@
commands: { commands: {
defaults : [{ defaults : [{
id: 'open-github', id: 'gen-pdf',
run: function(em, sender){ run: function(em, sender){
generatePdf(em.Canvas.getBody()); generatePdf(em.Canvas.getBody());
//sender.set('active',false); sender.set('active',false);
//window.open('https://github.com/artf/grapesjs','_blank'); },
},{
id: 'gen-png',
run: function(em, sender){
generatePng(em.Canvas.getBody());
sender.set('active',false);
}, },
stop: function(){}
}], }],
}, },
assetManager: { assetManager: {
@ -743,12 +777,21 @@
// Add extra buttons // Add extra buttons
gr.Panels.addButton('options', [{ gr.Panels.addButton('options', [{
id: 'view-github', id: 'gen-pdf',
className: 'fa fa-github', className: 'fa fa-file-pdf-o',
command: 'open-github', command: 'gen-pdf',
attributes: { title: 'View on Github' } attributes: { title: 'Export in PDF' }
},{
id: 'gen-png',
className: 'fa fa-file-image-o',
command: 'gen-png',
attributes: { title: 'Export in PNG' }
}]); }]);
gr.setDevice('Document');
window.editor = gr;
// Tabs
$(".tabs-menu a").click(function(event) { $(".tabs-menu a").click(function(event) {
event.preventDefault(); event.preventDefault();
var t = $(this); var t = $(this);
@ -759,13 +802,7 @@
$(".tab-content").not(tab).css("display", "none"); $(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn(); $(tab).fadeIn();
}); });
gr.setDevice('Document');
window.editor = gr;
</script> </script>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

2752
js/acroform.js
View File

File diff suppressed because it is too large

32
js/grapes.min.js
View File

File diff suppressed because one or more lines are too long

164
js/jspdf0.min.js
View File

File diff suppressed because one or more lines are too long

2
stylesheets/grapes.min.css
View File

File diff suppressed because one or more lines are too long

1
stylesheets/grapesjs-plg.css
View File

@ -44,6 +44,7 @@
.gjs-plg { .gjs-plg {
display: flex; display: flex;
background-color: #444; background-color: #444;
border-radius: 3px;
} }
.gjs-plg-editor, .gjs-plg-output { .gjs-plg-editor, .gjs-plg-output {
width: 50%; width: 50%;

Write Preview
Loading…
Cancel
Save