Skip to main content

Styling overrides and customisation

Normally, customising TinyMCE's appearance means creating a new theme, compiled in LESS. For most cases that works (and is the recommended option, because it allows TinyMCE to support it), but for Deserted Chateau it isn't enough.

The problem - TinyMCE requires themes to be compiled in advance, and LESS requires us to have known values for each variable at compile time (we can't override the values later using Less.js, as they've been compiled into their absolute values and do not have variable references anymore). This conflicts with Deserted Chateau's theme functionality. Therefore we directly override various CSS values instead, and inject CSS stylesheets into the editor's iFrame to override the default styling as needed.

CSS Overrides: non-inline editor instances

Overrides are applied in a few places:

  • A modified version of default-tox.css is loaded, with variables needing overwriting using the !important keyword.

  • The Deserted Chateau CSS stylesheets (for the user's theme) are injected into the head of the editor iFrame, in order to ensure it has access to the necessary CSS variables, as is the modified default-tox.css stylesheet.

  • A set of default classes are injected into the editor iFrame from the dc-tinymce-classes.css stylesheet. This is mainly for user convenience, to ensure that e.g. images do not exceed 100% of the editor space.

  • If the user changes theme on the page, the injected stylesheets are replaced with the stylesheets for the new theme.

CSS Overrides: inline editor instances

Unlike non-inline editors, TinyMCE inline editors inherit their CSS directly from the page they're on (and any content_css you add to them can potentially override elements outside the editor, since it's not self-contained in an iFrame).

An identifying class must be added to all elements inside the editor at submission time before getting the editor's contents and adding them to the database, for example:

// Adds the 'dc-tinymce-inline-element' class to all elements inside the TinyMCE editor area.
// We can then use this to safely assign or override CSS for the editor contents without
// overriding other page styling.
editorInstance.dom.addClass(editorInstance.dom.select('*'), 'dc-tinymce-inline-element');

CSS Overrides for specific use cases

In some places, we override specific areas of the CSS just for a given editor or set of editors.

In the user profile pages, such as Commission Info and About, the border around the read-only editor used to display that user's commission info or about page is deliberately overridden with an invisible one to give a more seamless appearance, whereas when the user is editing that information, the editing editor has the border around it as normal.

The ugly "white flash"

Customising TinyMCE the normal way means it still retains the awkward "big white flash" on loading, due to a design consideration in TinyMCE from version 6 onwards. More info is here: https://github.com/tinymce/tinymce/issues/9190#issuecomment-1826989991

Back to top