Is there a way to remove or change the .wysiwyg-container div/class?

[ajplopez]

I have a WYSIWYG and it's called "Text" and I output it like this: @Content.Html("Text")

This is great because it renders the HTML and adds in that nice edit icon so the user can edit the Text directly.

However, this renders a

around the markup. This is a problem for me because I use Tailwind CSS Typography plugin and it expects a

wrapped around it.

Typically I include other things like Title (for headings) so I would typically wrap the whole block and other things inside of it. For example:

 <div class="prose 2xl:prose-xl 2xl:prose-p:leading-normal 2xl:prose-h2:!text-4xl">
            <h2>@content.String("Title")</h2>
             @Content.Html("Text")
          </div>

1. Is there a way I can stop the rendering of that div entirely and still have the HTML edit control?
2. Alternatively, can I swap out or add to the wysiwyg-container class?

[iJungleboy]

The data.Html(...) does a lot more, incl. image-resizing and similar. For this to work reliably, it must have the div with class=wysiwyg-container.

You have 3 options

1. put another div around it

2. recommended give it another container - to which it will add the class-wysiwyg, something like

@using ToSic.Razor.Blade // https://razor-blade.net/
@{
   // use RazorBlade to create a custom container
   // https://razor-blade.net/api/ToSic.Razor.Html5.Div.html
   var container = Tag.Div().Class("prose 2xl:prose-xl 2xl:prose-p:leading-normal 2xl:prose-h2:!text-4xl");
}

@Content.Html("Text", container: container)

4. use basic string manipulation, something like:

@Html.Raw(Content.Html(...).ToString().Replace("wysiwyg-container", "wysiwyg-container prose 2xl:prose-xl 2xl:prose-p:leading-normal 2xl:prose-h2:!text-4xl"))

[ajplopez]

That works great! Thanks so much. I think I'll need to reconsider how I set things up a tiny bit but this should work well in most cases. Thanks a ton.