Make the whole canvas a Vue / React element

Question

Hi All, More of a general question of if anyone has managed to make the whole canvas (or in fact the wrapper) a Vue element, meaning that you could drag some a custom div like '' and it renders correctly? I've attempted this, I made the wrapper the vue element (el), and it did work when 'importing' HTML code, but it prevents the drag and drop system from working, I presume because now it's a virtual DOM. I did see this post: https://github.com/artf/grapesjs/issues/275 but it went...

adamwpe · Accepted Answer

Thanks @noogen for your detailed reply. Yh, think you are right and stick with components - I'm not too sure if the ToHtml if the right solution is for me or not, because I don't want to manage two types of system, on rending correctly within the editor, and one in production, using the tags. So, I'm now loading in a new script 'widgets.js' and then running a function which is within it 'vueloadcontact_form()', with a required parameter - which seems to work quite nicely :) I now need to work o...

noogen · Answer

My answer is to best stick with custom scripts. I've done custom components using lodash template here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. A string is expected from thetoHtml method - https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/traits.js#L126 - so you're not going to be able to have Virtual Dom. The toHtml method is use to generate the HTML for both displaying in the editor and what you get when calling editor.genHtml() m...

Make the whole canvas a Vue / React element

Question

Answers (2)

Related Questions and Answers

Test drag and drop with Cypress

Can I develop my own stylemanager and bind the properties conveniently?

How to change gjs-ckeditor-format component

ID changes when importing html or passing html in components prop in config.

Paid Plugins That Match This Issue

Browse Plugin Categories