Issue: TinyMCE relies on a separate stylesheet to the rest of moodle. The current inplementation is not WYSIWYG as a result.

Steps to reproduce:

• set TinyMCE as editor
• In editor, create element styled by theme (h1, banner, button, p, or boostrap component)
• Expected: editor shows what text area will look like when saved
• Observed: editor shows a plain version with minimal styling

Versions affected:
All tested versions 4.1 -> 4.5.2
Themes: Classic, Boost, Boost-Union

Proof of concept fix:

I edited tiny's config to rely on site themes instead of editor themes.
public branch is here for review: https://github.com/pd431/moodle

changes are minimal: https://github.com/moodle/moodle/compare/main...pd431:moodle:main

This is probably not the right approach (override editor_theme with site_theme) and the better approach probably involves modifying /lib/classes/output/theme_config.php to make any needed changes on top of the site style, rather than a plain base.

Related issues:
https://tracker.moodle.org/browse/MDL-82831
https://tracker.moodle.org/browse/MDL-79120
https://tracker.moodle.org/browse/MDL-81984

Problems with status quo:

• Base editor theme is broken. simple elements like btn-primary have the wrong text color making them unreadable and unacessible in edit mode
• Inconsistent boostrap colors
• No respect of brand colors or theme
• No possibility to edit content using components supported by the theme

This means choosing TinyMCE as the editor in moodle will create confusion with academics and students, encourage them to force apply colors to fix content in the editor, or be confused as to why they can't get what they see in the editor.

It's really important to note this isn't just a problem of "if you didn't customise your theme so much you'd be fine" but a generalised issue for all themes. Atto also worked properly so may force institutions to stay on the obsolete editor.

 (Classic theme, fig 1, label in normal view, fig2 tinyMCE without patch, fig3 tinymce with patch)

(Boost Union with custom SCSS and brand color: fig 4 normal view, fig 5 tinyMCE unpatched, fig 6 tinymce with patch)