No Wrapper on elements inside Rich Text Editor

Develop, Build & Integrate CMS Development
1

Hey everyone,

Due to a particular workflow we follow, we have a need to ensure that elements IN the rich text editor (default module) are not wrapped.
For example when embedding an iFrame - Hubspot added two divs around the iframe along with 3-4 classes and some in-line styling - all of which affect the styling of the embed.
Example of the iframe embed:

<div class="hs-responsive-embed-wrapper hs-responsive-embed" style="width: 100%; height: auto; position: relative; overflow: hidden; padding: 0px; min-width: 256px; margin: 0px auto; display: block;">
<div class="hs-responsive-embed-inner-wrapper" style="position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; margin: 0;"><iframe class="hs-responsive-embed-iframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"... ></iframe></div>
</div>

I’ve added some JS to override the styling, however there are still a handful of elements that have such wrapper added to them in the Rich Text Editor. I would like to prevent such wrapping to happen in the first place.
What I’ve tried:
- Adding “no_wrapper = True” to the module. To no avail. + this would prevent the Rich Text module itself from have wrappers, correct? And not the elements inside the rich text module.
- Using the raw HTML module, at the cost of our contraint below. So this is a no go.

- Added custom JS to mitigate styling of those wrappers

- Removed styling of the HS wrapper classes in the main.css. However this affect the classes globally - this is not what is intended. And it doesnt prevent the div wrappers and in-line styling that are added.

Constaints

  1. It is neccessary that we use the Rich Text Editor due to WYSIWYG capabilities with the possibility for content-creators to edit content on-the-fly, without the need of custom modules.
    1. We do not want to use the Raw HTML module
  2. We want to do this without having to create a custom module, unless there is a custom module build that can prevent the wrapping inside a Rich Text Editor.

I do appreciate any help that I can get. Thanks so much. Have a great day!

2

Hello @mkt_capptions
I’ve checked all the possibilities what i can suggest is you can create a custom JavaScript function that runs when an element is inserted into the Rich Text Editor. This function can check if the element is being wrapped by the Rich Text Editor, and if it is, it can remove the wrapper.