Modify grapes.min.js to allow video types on AssetManager
This is how I was able to trigger the asset manager on dbl click. See the events property below.
Read full answer below ↓Question
Please, I would like to modify my grapes.min.js because I would like to add the video type to my assetManager. For some reason, the am.addType() messes up my page and does not work as well. I am not sure why, but I am curious about where to make the changes on my grapes.min.js to include video types. Please help.
Answers (3)
This is how I was able to trigger the asset manager on dbl click. See the events property below.
export default (editor, config = {}) => {
const comps = editor.DomComponents;
//const defaultType = domc.getType('default');
var defaultType = comps.getType('video');
const defaultModel = defaultType.model;
const defaultView = defaultType.view;
// ...
comps.addType('video', {
view: defaultType.view.extend({
init(){
// The 'active' is triggered by the 'activeOnRender' you've used inside your block
this.listenTo(this.model, 'active', this.doStuff);
},
events: {
dblclick: function(){
console.log('dbl click');
this.doStuff();
}
},
doStuff(){
this.opts.config.em.get('Editor').runCommand('open-assets', { target: this.model, types:['video'], accept: 'video/*'})
}
}),
});
}
I think it will be much easier to understand what is wrong with am.addType. Please provide a live demo of your case.
ps. As you've created an issue I removed your comment in #802 because the content is the same but left like this it was just creating confusion
@artf Never mind. I found out I was just mixing up the versions used. Thank you! I actually used another way around. I added activeOnRender:1 to video and removed the default src in the blocks-basic.js. This allowed me to choose my own src by just including the link to the video. However, I am unable to reopen the AssetsManager on dblclick. Please do you know how I can also make that possible for videos?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #916
[Question] why do layers not have element tag name?
I'm playing around with grapes' internals because I would like to contribute in the future. Most of my interest is in making it worth with...
Issue #984
Does grapesjs support load and modify previous saved work?
When I download a page, I see different html then I saw in the page. When I put the saved html back to the gjs, I see a some different page...
Issue #802
Assets rendering
I try to create a video thumbnail, when I add it like a tag it's working fine but when this an array or an object, it doesn't render it.
Issue #1781
add a font-size type prop
I'm trying to create a font-size type of property that I would like to add to the dimensions sector. Doing this: Getting the value and all,...
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.