A component that inserts editable HTML
Hi @NorthstarTech, I just created a plugin (very early, could use some more work) that you may find helpful: https://github.com/ryandeba/grapesjs-html-block. You should just be able to include that file in your project and include the plugin in your grapesjs init config: grapesjs.init({ ..., plugins: ['html-block'] })...
Read full answer below ↓Question
Would it be possible to create a block that allowed the user to write in responsive HTML either directly on to the template or on the side in the style/layout manager?
Answers (3)
Hi @NorthstarTech,
I just created a plugin (very early, could use some more work) that you may find helpful: https://github.com/ryandeba/grapesjs-html-block.
You should just be able to include that file in your project and include the plugin in your grapesjs init config:
grapesjs.init({ ..., plugins: ['html-block'] })
After doing that, you should see a new "HTML Code" block. Drag and drop it somewhere, select the element, and you should see a "code" button in the toolbar. Click the code button and you should get a modal that lets you edit the HTML content.
Let me know if you run into any issues.
@chiqui3d Change the isComponent function to this to prevent the initial internal html from getting parsed by grapesjs into components:
isComponent: function(el) {
if (el.hasAttribute && el.hasAttribute("data-html-code")) {
return {
type: 'html-code',
content: el.innerHTML,
components: []
};
}
}
The other code I posted should prevent grapesjs from parsing the html after editing through the modal. The key to both is that you need to set the internal html into the content property instead of components.
I believe this issue has been resolved and could be closed based on the first comment here: https://github.com/ryandeba/grapesjs-html-block/issues/1. @NorthstarTech could you confirm or reply with additional details if you want to keep this issue open?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1472
[QUESTIONS] Custom Code block and JS
Wondering if there is a limitation or is it actually possible to create a block that allows the user of the editor to write custom javascri...
Issue #1709
[QUESTION] Is it possible to affect child component's styling through parent component's style manager?
Hello there! Awesome project and thanks for your contribution. I would like to know if it is possible to change the styling of a child comp...
Issue #482
Default asset manager in custom component
I am in process to create custom component for below template and we want to have user enter text,link,hover text and select image and want...
Issue #1334
How to import previous saved templates in new template.
@artf I have saved some templates created by grapejs and want to use/import it in new template as a section / block. I do not want import a...
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.