Grapesjs: exclude components from final html

[AH1N1]

Is there any ready solution to exclude some components from final html? Or any other mechanism that makes component exist only in view?

[ryandeba]

Hi @AH1N1,

By "final html", do you mean the value returned from editor.getHtml()? And are you referring to a custom component? If the answer to both of those questions is yes, then you should just be able to override the toHTML method of your custom component to return nothing. The code to do that would be something like this:

var defaultType = editor.DomComponents.getType("default");
editor.DomComponents.addType("someCustomComponent", {
    model: defaultType.model.extend({
        toHTML: function() {
            return ""; // return an empty string instead of the default toHTML behaviour
        }
    }, {
        isComponent: function(el){
            // add custom isComponent logic here
        }
    }),
    view: defaultType.view
});

If you had something else in mind, let me know some additional details and I can try to assist further.

BTW - @artf what do you think about making the HTML/Html capitalization consistent between editor.getHtml() and component.toHTML()? I don't have a preference on which style to go with, but I think it would make more sense to change them to either editor.getHtml() / component.toHtml() or editor.getHTML() / component.toHTML().

[AH1N1]

Thank you :) That's what i needed

[AH1N1]

Unfortunately it doesn't work. I overrided toHTML method like in your example but it seem to have no influence on the code got from editor.getHtml() method. I set some debug in my overrided toHTML and it turned out it's never used. @ryandeba are you sure editor.getHtml() runs toHTML() method ?

[ryandeba]

@AH1N1 Here's a working code example: https://jsfiddle.net/tt32z2uz/2/. Open up you browser console and you should see this logged out: <div>here's some normal content</div><div>...more normal content</div>.

Does that give you what you need to debug your code? If not, can you provide a live code example of your implementation?

Some possible reasons I can think of why this might not be working for you:

• The isComponent method is not correctly identifying your custom component
• The editor instance has already parsed out the components before your custom component type is registered (like from using fromElement: true)

[artf]

Thanks Ryan for the complete overview, I'd say it's exactly as it should be implemented.

what do you think about making the HTML/Html capitalization consistent between editor.getHtml() and component.toHTML()? I don't have a preference on which style to go with, but I think it would make more sense to change them to either editor.getHtml() / component.toHtml() or editor.getHTML() / component.toHTML()

Really good question but probably it's too much opinionable for an exact answer 😂
Probably I'd prefer xxxHtml format but I've chosen toHTML to be compliant with the standard toJSON. I'd like to collect more feedbacks/opinions

[afotey]

@ryandeba @artf This is a good solution. What about if I wanted to return just the ID of a div as entered using the Component Settings panel?

For instance, let's say I create a form by dragging and dropping some form elements into the editor, then assign IDs to said elements via the Component Settings panel.

Is there a way to have the export be ONLY those IDs and NOT any of the accompanying HTML/CSS?

[artf]

Hi @afotey

What about if I wanted to return just the ID of a div as entered using the Component Settings panel?

Id assigned from component settings goes directly inside attributes therefore you can use this

const comp = editor.getSelected();
const id = comp.getAttributes()['id'];

Is there a way to have the export be ONLY those IDs and NOT any of the accompanying HTML/CSS?

You get other ids when your component has some style. If you use classes you should not see any of those

[afotey]

Thanks for your response.

I'm not sure how to implement this, though. Apologies for my ignorance here...

I see in the jsfiddle example @ryandeba provided on how you can mask the exported HTML of the bespoke "<my-component>" tag, but what about specifically showing JUST the ID of a dynamic element I would drag onto the editor?

More specifically:

• I create some rows with multiple columns in them (I figured out how to add more than three columns and have it be a basic block component BTW!)
• I drag some form elements (textarea, input field, etc.) into the columns
• Only the rows and columns have the ability to be given IDs, so I give the first row an ID of "1", the first column in that row and ID of "2", the second column an ID of "3", etc.
• I repeat the process with a second set of rows and columns, this row's ID = 2, the first column's ID=1, second column's ID=2, third column's ID=3...
• I repeat with a third row, Row ID=3, 1st col ID = 1, 2nd col ID=2, 3rd col ID=3...
• And so on and so forth...
• Upon export, how do I return just these IDs (i.e., 1,1 1,2 1,3 1,4 then 2,1 2,2 2,3 2,4 then 3,1 3,2 3,3 3,4 ...)?

I just backed this application on Open Collective BTW! I hope it helps!

[artf]

Hi @afotey I think you might do something like this:

model: defaultType.model.extend({
        toHTML: function() {
            if (['1', '2', '3', ...].indexOf(this.getId()) >= 0) {
                return defaultType.model.prototype.toHTML.apply(this);
            } else {
                return "";
            }
        }
    }
...

I just backed this application on Open Collective BTW! I hope it helps!

Thank you, really appreciated 😘

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.