How to get HTML of the editor with Grapes JS attributes

[Agobin]

Hello there,

I would like to get the HTML content of the grapes JS editor with the grapes JS attributes of the components. When I load the editor, I add grapes' data attributes to the components e.g:

editor.setComponents('<h1 id="header_one" data-gjs-droppable="false">Hello world</h1>').

When I get the HTML content to save by calling editor.getHtml(), I would like to get the components with their attributes. E.g:

Calling editor.getHtml() should return '<h1 id="header_one" data-gjs-droppable="false">Hello world</h1>'

Or when I get the HTML element of a component/model, it should also contain the grapes data attributes. E.g:

let model = editor.getWrapper().find("#header_one")
model.getEl() => '<h1 id="header_one" data-gjs-droppable="false">Hello world</h1>'

And if the model has any children, the data-gjs-* attributes of the children should also be in their respective HTML elements.
Is there any way to achieve this?

Thank you in advance.

[artf]

component.toHTML allows you to pass attributes option as a function in order to add dynamically custom attributes (in this way you're able to attach model properties).

[assadnazar]

What about

editor.getComponents().config.components

I guess it will do the job

[artf]

mmm I'm not sure I'm following you 🤔 what do you mean?

[assadnazar]

See OP is saying that editor.getHtml() returns cleaned html (without grapejs data attributes. right?) but what he wants is html with data attributes like data-gjs-editable etc. So I am saying that editor.getComponents().confi.components witll return html with the required data attributes. I hope you understand now

[artf]

Actually, editor.getHtml() supports the same component.toHTML options, so @Agobin you can do this:

editor.getHtml({
 attributes(component, attributes) {
   if (component.get('droppable')) {
     attributes['data-gjs-droppable']= component.get('droppable');
   }
   return attributes;
 },
});

[Agobin]

Thank you all very much, this worked.

[Ju99ernaut]

You can probably use:

// to get everything in the editor
editor.getWrapper().getEl().innerHTML
// to get specific component
component.getEl().outerHTML

Although I'm not sure why you would load from html when you can load the JSON format? 🤔

[artf]

yeah... but... I'd never recommend relying on the HTML of the Component's view. The view could be totally different from the model and it doesn't print all the component properties