[Question] isComponent() is not invoked
Question
I'm trying to make a plugin, but I have a problem with isComponent. My component does not call it whene the editor loading the code, this is the script. Where I'm wrong?
index
var editor = grapesjs.init({
height: '100%',
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 1 },
container: '#gjs',
fromElement: true,
plugins: ['grapesjs-plugin-boilerplate']
});
window.editor = editor;
component
export default (editor, config = {}) => {
const domc = editor.DomComponents;
const defaultType = domc.getType('default');
const defaultModel = defaultType.model;
const defaultView = defaultType.view;
domc.addType("alea-video", {
model: defaultModel.extend({
},{
isComponent(el) {
if(el.getAttribute && el.getAttribute('data-gjs-type')) {
return {
type: 'alea-video'
};
}
}
}),
view: defaultView.extend({
tagName: 'div',
render: function () {
defaultType.view.prototype.render.apply(this, arguments);
var iframe = document.createElement("iframe");
var value = document.createElement("div");
iframe.setAttribute('width', '560');
iframe.setAttribute('height', '316');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('src', '//www.youtube.com/embed/DaDjyRH_3DA');
value.classList.add("video-container");
//value.style.backgroundColor = 'red';
value.setAttribute('data-et','video');
//value.setAttribute('data-provider','yt');
value.appendChild(iframe);
this.el.appendChild(value);
return this;
},
})
});
}
block
export default (editor, config = {}) => {
const bm = editor.BlockManager;
bm.add("bm-alea-video", {
label: "Video",
category: "Basic",
attributes: { class: "fa fa-map" },
content: { type: "alea-video" }
})
}
Answers (2)
isComponent is used, inside the parser, when you add an HTML string and you don't declare explicitly its type (eg. <div data-gjs-type="my-custom-type">.. tells already the type so isComponent is not necessary). If you pass an object content: { type: "alea-video" } the parsing is skipped
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #384
Create and Edit Template into Database
This is my code to Create a new template and insert the inline html with style into the database : I am able to insert the template-data in...
Issue #873
[Need help]: After using urlLoad from storage manager impossible to change component with Traits
Hello, I am save template to db and after loading from db impossible to change component with Traits. Video example on countdown: https://y...
Issue #1030
[Question] Firing events with custom components
I'm trying to build a plugin for Grapesjs with some custom components, and I'm having trouble with triggering events and interacting with t...
Issue #1761
[Question] how to defined textNoElement value after grapesjs.init
Hi, I try to define the values for textNoElement after I was initialized a grapesjs. but it not reflected in grapesjs UI. can anyone please...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.