Issue #2303Opened October 2, 2019by megarg2 reactions

Updating toHTML of a new custom component

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)

megarg• October 3, 20191 reactions
Code SnippetTEXT
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-coates• November 12, 20191 reactions

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;
pouyamiralayi• October 2, 20190 reactions

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.

Issue #1114

[BUG] Custom HTML output not firing on reload

I am using the toHtml and isComponent properties for a custom component to allow for custom HTML output. This appears to be working when th...

2 answersUpdated September 17, 2019

Issue #1144

[Question]: Custom property to change multiple settings

Is there a way to extend a current property or create a new one to change multiple properties? I have a component in which I would like to...

3 answersUpdated September 17, 2019

Issue #1587

How to distinguish events for custom components

Hi, I have an issue with events. I would like to distinguish events wwhen a component is loaded using 'fromElement' config from when it's l...

2 answersUpdated November 17, 2019

Issue #3218

How to add new HTML element with inline styles?

I would like to add a new HTML element, with inline styles, around the rte.selection(). With the following example, the HTML is OK, but pro...

3 answersUpdated January 6, 2021

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders