nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

in-context-edit TinyMCE style

Bowker

I've implemented in-context-edit on a component (textarea field type) and when i click on it, TinyMCE starts up (as expected), but it's not using the right style sheet. Any guess how to specify a specific CSS style sheet to use for a component while using in-context-edit?

Also the list of styles available in the drop down are some of the styles defined on the page but not all of them.

This is an HTML component (not xsl).

Find more posts tagged with

Comments

Bowker

Found one thing that helps. The TinyMCE edit window contains a body tag with a class of "mceContentBody".

The issue is TinyMCE creates a new body tag. Our stylesheet puts a color on the background and text-align:center on the body tag. This was showing up in the context edit window.

However, the TinyMCE body tag has a class of mceContentBody on it. Therefore I could correct styles defined by defining .mceContentBody in the page's style sheet to correct the issue.