Rendering third party components in grapessj editor
Question
Hello,
we'd like to render third party controls. This is a general question and we wan't to know whether we are going into the right direction. To render the controls we are required to use a third party technology (Vue, React, or similar frameworks). Both of the frameworks have one common problem: they are lagging the ability to render components at runtime.
The problem with Vue e.g. is that it removes the wrapper node and its children. It would be easily possible to recreate the html structure. However, backbone doesn't seem to like that one and the model is lost and therefore the editor stops working correctly.
Alternatively the components could be rendered in the render function in their component. But Vue might not be capable to do so.
I have not tested grapes with react yet but there is a chance that react might be capable of compiling templates at runtime.
What would you suggest? Do you have an approach that we might have missed?
As second question I'd like to know whether it is possible to hook onto events from the editor from inside a component. I'd like to execute some code, when the canvas:drop event is fired. Goal is it to have a work around for absolute positioning with drag and drop and resizing in form of a block until the roadmap feature is implemented.
Thanks in advance for your reply.
Answers (3)
Vue compiles at runtime if you use the version with compiler. Exactly like this component https://github.com/alexjoverm/v-runtime-template
As second question I'd like to know whether it is possible to hook onto events from the editor from inside a component
Yeah, you can access the editor model from components via this.em
someMethodInComponent() {
const { em } = this;
em.on('some-event', ...);
em.once('some-event', ...);
em.trigger('some-event');
// ...
}
Hi, thanks for the answer.
Vue compiles at runtime if you use the version with compiler. Exactly like this component https://github.com/alexjoverm/v-runtime-template
The problem with Vue is that there is not really a method that allows me to put a string in as parameter and get html as an output. I have asked this question on StackOverflow and hopefully I will get an answer in near time.
Yeah, you can access the editor model from components via this.em
š
The problem with Vue is that there is not really a method that allows me to put a string in as parameter and get html as an output. I have asked this question on StackOverflow and hopefully I will get an answer in near time.
yeah but you can always create an element and mount the Vue instance at runtime and then get its HTML content
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1875
[QUESTION] ID changes when importing html or passing html in components prop in config.
Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...
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 #1817
Change HTML content while block is render in editor
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this bl...
Issue #1493
[QUESTION] render() works on the first time but not on subsequent calls
Hello, I've created a custom component that shows images using background-image on a <div> instead of using an <img> element. It's mostly w...
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.