Two little things
I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list. Here is the problem In https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js I explain why you need it So in your c...
Read full answer below ↓Question
Hi @artf @arthuralmeidap @sonnylloyd @cmcintosh @daniel-farina
Thank you so much for developing such a awesome framework. I tried to achieve almost all the functionalities in grapesjs preset newsletter.
Just need some help on this two little things :
- I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list.
I have already followed issues https://github.com/artf/grapesjs/issues/216 and https://github.com/artf/grapesjs/issues/372
It does not seem to work.
This is my json response from the server after uploading the files :
[{"type":"image","src":"http://cimailer.dev/uploads/1.jpg","height":"350","weight":"250"},{"type":"image","src":"http://cimailer.dev/uploads/Capture.JPG","height":"350","weight":"250"}]
This is my complete code :
<script type="text/javascript">
$( document ).ready(function()
{
var id = '<?php echo $this->uri->segment('3'); ?>';
$.get( 'http://cimailer.dev/dragdropeditor/dragdrop/fetch/'+id, function(data) {
var obj = jQuery.parseJSON(data);
$.each(obj, function(key,value) {
templateid = obj.id;
templatename = obj.templatename;
templatedata = obj.templatedata;
});
$( "#templatename" ).val(templatename);
$.get( "http://cimailer.dev/dragdropeditor/dragdrop/listimages", function( data ) {
if(data.length > 0){
var images =JSON.parse(data);
}
else
{
var images = [];
}
var editor = grapesjs.init
({
height: '100%',
components: templatedata,
container : '#gjs',
plugins: ['gjs-preset-newsletter','gjs-plugin-export'],
assetManager: {
assets: images,
modalTitle: 'Select Image',
autoAdd: 1,
uploadName: 'files',
storageType: 'remote',
storeOnChange: true,
storeAfterUpload: true,
upload: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
uploadText: 'Drop files here or click to upload',
handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
},
storageManager: {
id: '',
autoload: false,
autosave: false,
storeComponents: false,
storeStyles: false,
storeHtml: true,
storeCss: true,
type: 'remote',
urlStore: '<?php echo base_url(); ?>dragdropeditor/dragdrop/update/'+id,
urlLoad: '<?php echo base_url(); ?>dragdropeditor/dragdrop/fetch/'+id,
contentTypeJson: true,
},
pluginsOpts: {
'gjs-plugin-export': {
btnLabel: 'Export Code',
preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>'
},
'gjs-preset-newsletter': {
modalLabelImport: 'Paste all your code here below and click import',
modalLabelExport: 'Copy the code and use it wherever you want',
codeViewerTheme: 'material',
//defaultTemplate: templateImport,
importPlaceholder: '<!DOCTYPE html><html><head><title></title></head><body></body></html>',
cellStyle: {
'font-size': '12px',
'font-weight': 300,
'vertical-align': 'top',
color: 'rgb(111, 119, 125)',
margin: 0,
padding: 0,
}
}
}
});
var assets = editor.AssetManager.getAll() // <- Backbone collection
assets.on('remove', function(asset)
{
var removefile = asset.get('src');
$.ajax({
url: '<?php echo base_url(); ?>dragdropeditor/dragdrop/delete',
type: 'post',
data: {file: removefile},
success: function(response){
}
});
});
// Let's add in this demo the possibility to test our newsletters
var mdlClass = 'gjs-mdl-dialog-sm';
var pnm = editor.Panels;
var cmdm = editor.Commands;
var testContainer = document.getElementById("edit-template");
var contentEl = testContainer.querySelector('input[name=body]');
var md = editor.Modal;
cmdm.add('edit-template', {
run(editor, sender) {
sender.set('active', 0);
var modalContent = md.getContentEl();
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
var cmdGetCode = cmdm.get('gjs-get-inlined-html');
contentEl.value = cmdGetCode && cmdGetCode.run(editor);
mdlDialog.className += ' ' + mdlClass;
testContainer.style.display = 'block';
md.setTitle('Enter Template Name');
md.setContent('');
md.setContent(testContainer);
md.open();
md.getModel().once('change:open', function() {
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
//clean status
})
}
});
pnm.addButton('options', {
id: 'edit-template',
className: 'fa fa-floppy-o icon-blank',
command: 'edit-template',
attributes: {
'title': 'Edit Template',
'data-tooltip-pos': 'bottom',
},
});
//fa fa-refresh
var statusFormElC = document.querySelector('.form-status');
var statusFormEl = document.querySelector('.form-status i');
var ajaxTest = ajaxable(testContainer).
onStart(function(){
statusFormEl.className = 'fa fa-spinner anim-spin';
statusFormElC.style.opacity = '1';
statusFormElC.className = 'form-status';
setTimeout(function() {
window.location.href = "<?php echo base_url(); ?>templates/list";
}, 600);
window.onbeforeunload = null;
})
.onResponse(function(res){
console.log(res);
if (res.data) {
statusFormElC.style.opacity = '0';
statusFormEl.removeAttribute('data-tooltip');
md.close();
} else if(res.errors){
statusFormEl.className = 'fa fa-exclamation-circle';
statusFormEl.setAttribute('data-tooltip', res.errors);
statusFormElC.className = 'form-status text-danger';
}
});
// Simple warn notifier
var origWarn = console.warn;
toastr.options = {
closeButton: true,
preventDuplicates: true,
showDuration: 250,
hideDuration: 150
};
console.warn = function (msg) {
toastr.warning(msg);
origWarn(msg);
};
$(document).ready(function () {
// Beautify tooltips
$('*[title]').each(function () {
var el = $(this);
var title = el.attr('title').trim();
if(!title)
return;
el.attr('data-tooltip', el.attr('title'));
el.attr('title', '');
});
});
});
});
});
</script>
Also I observed that the Add image button does not seem to work,
If I try to give it a online path it will show the image but won't download and add it to the assets manager. And it does not work for local path.
Any way I can achieve it, if not how can I hide it.
- I want to show the preview button for newsletter as used for webpage templates :
Thank you.
Answers (3)
- I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list.
Here is the problem
handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
In https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js I explain why you need it
// Handle the image url submit from the built-in 'Add image' form
// @example
// handleAdd: (textFromInput) => {
// // some check...
// editor.AssetManager.add(textFromInput);
// }
handleAdd: '',
So in your case, just remove it, you don't need it. You can hide Add image input with CSS if you want
- I want to show the preview button for newsletter as used for webpage templates
I remove it here https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37 You can add it back
Hi @artf
Not sure about using https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37
I am using the compressed version:
<script src="js/grapes.min.js"></script> <script src="js/grapesjs-preset-newsletter.min.js"></script>
Also I wanted to know why Add image button does not seem to work ? I mean not clear about it
I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list.
Why do I have to refresh the page every time. Is it possible to load the images directly after uploading
The Add button works exactly as expected, it shouldn't upload/download stuff. If you need custom behaviors add your UI
Why do I have to refresh the page every time. Is it possible to load the images directly after uploading
I've already told you where is the problem... read my previous answer
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1836
How to add !important in all the generated apis
Hello @artf, While i am going to edit some html from editor with the help of css then i need to add !important into all the css which is ch...
Issue #387
Want to save template name
Hi @artf @sonnylloyd @arthuralmeidap @cmcintosh I am trying to store template name, but not sure how to pass the template name along with t...
Issue #375
Edit Template into Database, need help with urlLoad
@arthuralmeidap @artf @cmcintosh I am trying to edit a existing template in the database, I am unable to send the template data and id to t...
Issue #886
[HELP WANTED]: questions about some customization.
Hey Guys, first thank you very much for your work, this project seems really promising. I have a few question for a website i'm building. I...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.