Ju99ernaut
commented
3 years ago I'm not sure if such hooks exist per component but you can try to take advantage to the toHtml property of a component. It's already been discussed elsewhere so you search it in the issues as there are quite a few.
artf
Much grateful to you for this library.
Background: I am building an editor where I intend to define most of the components from an existing set of Vuejs components which I have developed earlier and use in my applications. Most of these are UI based simple and complex components. For example, I have simple vuejs components named su-form, su-field, su-label, su-input, su-radios, su-buttons, su-validations and complex vuejs components using the simple components like su-login-form, su-registration-form etc. As you may guess, su-form or su-field and other such components has slots where I add other components to create a useful component with a business use case. For example, I insert su-input, su-label, su-button inside su-form's slots to create a proper useful form. Each of these simple components when rendered has a number of HTML DOM elements to take care of various needs. For example, su-input is not just one element, but it also has elements to show respective label, validation error(s) and hint.
My intent is to create grapejs components and block from these simple vuejs components, which I am able achieve to some extent so far. My grapesjs component models' tagNames are vuejs component names (like "su-form"). But I am using a custom processor to render and mount the vuejs components and use the element's ($el) outerHTML to define the model's component. The plan is to make some of these rendered elements styleable. I am loosing all reactivity, but will take this part later.
Now, where I am majorly stuck is when I am saving/storing, it's saving the rendered HTML of the whole editor, which is obvious. What I want is this: if my component can listen to an event which will kind of say this component will be saved/stored (kind of before-save/store) the event parameter provide me what is going to be saved for this component only (HTML, CSS, JSON) and allow me to tweak these, I could replace the HTML and JSON etc. to the original vuejs components (instead of the rendered HTML). My actual page (not editor) has a parent vuejs component which can render these vue-compoents. In that way I can have best of the both worlds.
In another way, the solution can be to have two sets of models for one component, one for the editor and another for the actual page. But I am not sure, if that's possible here.
Please let me know if there's a way which I am missing.
Also, please let me know if this is the right place to discuss this and similar aspects. I actually have a few more queries for which I search for but could not yet find answers.
Thanks in advance.