; el = defaultType.model.prototype.toHTML.apply(this) + el; return el; }, Thanks a lot for your support","dateCreated":"2019-10-03T05:58:04Z","upvoteCount":1,"author":{"@type":"Person","name":"megarg","url":"https://gjs.market/go?url=https%3A%2F%2Fgithub.com%2Fmegarg"},"url":"https://gjs.market/issues/2303-updating-tohtml-of-a-new-custom-component#answer-537799890","sameAs":"https://github.com/GrapesJS/grapesjs/issues/2303#issuecomment-537799890"},"suggestedAnswer":[{"@type":"Answer","text":"To get defaultType run this: var defaultType = editor.DomComponents.getType('default'); And this works too:","dateCreated":"2019-11-12T03:02:35Z","upvoteCount":1,"author":{"@type":"Person","name":"scott-coates","url":"https://gjs.market/go?url=https%3A%2F%2Fgithub.com%2Fscott-coates"},"url":"https://gjs.market/issues/2303-updating-tohtml-of-a-new-custom-component#answer-552712926","sameAs":"https://github.com/GrapesJS/grapesjs/issues/2303#issuecomment-552712926"},{"@type":"Answer","text":"Hi! did you try using `component.view.el inside your toHTML? it will give you access to the current DOM`. cheers!","dateCreated":"2019-10-02T09:50:43Z","upvoteCount":0,"author":{"@type":"Person","name":"pouyamiralayi","url":"https://gjs.market/go?url=https%3A%2F%2Fgithub.com%2Fpouyamiralayi"},"url":"https://gjs.market/issues/2303-updating-tohtml-of-a-new-custom-component#answer-537421337","sameAs":"https://github.com/GrapesJS/grapesjs/issues/2303#issuecomment-537421337"}]}}
Issue #2303💬 AnsweredOpened October 2, 2019by megarg2 reactions

Updating toHTML of a new custom component

Quick answerby megarg1

i solved this by doing below toHTML: function () { let el = <script> console.log("add script here") </script>; el = defaultType.model.prototype.toHTML.apply(this) + el; return el; }, Thanks a lot for your support

Read full answer below ↓

Question

I would like to change how the toHTML output. I would like to modify the existing html output.

I tried the "toHTML" property of component

  • it allows to return a new html element
  • but it does not allow to get existing html and then update it and return it

I tried calling toHTML inside toHTML to get access to original component html but as expected it went in an infinite loop.

Is there a way to get access to existing toHTML so that I can modify it and then return as new "toHTML:. Editor or export will use the new output.

Answers (3)

megargOctober 3, 2019

i solved this by doing below toHTML: function () { let el =<script> console.log("add script here") </script>; el = defaultType.model.prototype.toHTML.apply(this) + el; return el; },

Thanks a lot for your support

scott-coatesNovember 12, 2019

To get defaultType run this: var defaultType = editor.DomComponents.getType('default');

And this works too:

var prototype = Object.getPrototypeOf(this);
var el = prototype.__proto__.toHTML.call(this);
return el;
pouyamiralayiOctober 2, 2019

Hi! did you try using component.view.el inside your toHTML? it will give you access to the current DOM. cheers!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.