Issue #2043πŸ’¬ AnsweredOpened May 28, 2019by megarg0 reactions

Adding custom component does not work

Quick answerby artf

First of all, use the improved API. The isComponent is triggered only if you need to parse an HTML string, if you pass the component object (eg. { type: 'input2', }) the parsing is not necessary. You don't see anything in the canvas because obviously there is no INPUT2 element in HTML5

Read full answer below ↓

Question

I have done a lot of research but still could not add a custom component. I tried the example in official docs (to modify behavior of "input" element and it is working fine). https://grapesjs.com/docs/modules/Components.html#define-new-component But the above example is for modifying existing component ("input"). I am trying to figure out how to create a new component. Following is my code, but it is not working (I am not printing anything in console when I drag it in the form). - note that I used the official example and changed it a bit to create this custom component. Please help on what I...

Answers (1)

artfβ€’ May 30, 2019

First of all, use the improved API. The isComponent is triggered only if you need to parse an HTML string, if you pass the component object (eg. { type: 'input2', }) the parsing is not necessary. You don't see anything in the canvas because obviously there is no INPUT2 element in HTML5

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.