A component that inserts editable HTML

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?

ryandeba · Accepted Answer

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...

ryandeba · Answer

@chiqui3d Change the isComponent function to this to prevent the initial internal html from getting parsed by grapesjs into 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.

ryandeba · Answer

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?

A component that inserts editable HTML

Question

Answers (3)

Related Questions and Answers

Custom Code block and JS

Is it possible to affect child component's styling through parent component's style manager?

Default asset manager in custom component

How to import previous saved templates in new template.

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories