Displaying Content inside tinyMCE with the "whole" CSS of the Template

[olivdee]

I was wondering why there is no core support for showing the content inside the tinyMCE editor, styled with the CSS of the whole bunch of classes used by the template.

What I mean:

• In order to keep it simple, lets assume, one is using the unchanged Cassiopeia Template (Bootstrap 5 etc.)
• It would be great if one could actually SEE the content inside tinyMCE styled with the classes he is adding/using. This would be for example important, if using tinyMCE-Templates (snippets), located inside *cassiopeia\html\tinymce* with some code like this <div class=card""><h1 class="text-danger">HEADING</h1><p>Text</p></div>
• I would expect this is doable, if I add the full path of the used css of the template (that is for example https://mywebsite.com/media/templates/site/cassiopeia/css/template.min.css) inside the tinyMCE-Plugin setting Custom CSS Classes and set prior to this Template CSS Classes to OFF

This is not working though.
Does it make it sense to include this feature?
Or is there already a workaround for this?
Or am I doing something wrong?

[brianteeman]

There are two ways to do this.

1. Add the css to the editor.css file in your template. This is the preferred method as you will be able to limit the css to the relevant css for content
2. Add the full path to your template css file in the custom css field

[olivdee]

Thank you for the info. I am aware of (1) and was using it in the last 10 years with Joomla, but on content heavy sites with editors adding content while the website is beeing developed, option (2) would come in handy.

This is troubling somehow... By full path you mean "https://www.domainname.tld/whateverpathinhere"? Because in the fields label/description (Custom CSS Classes) it says "...(for example, media/templates/site/cassiopeia/css/). Or enter a full URL path to the custom CSS file...." and the example is not a full path.

Are those two different possibilities of adding a path or does it HAVE TO BE ALWAYS a full path?

In the latter case, changing the example to "https//DOMAIN.TLD/media/templates/site/cassiopeia/css/ would make sense, but then why "Or enter..." - so both should work?

Anyway this is not working for me. so I thought it is not supported to add a path to the templates css. Maybe some caching issue? Will check later when I am on the testPC and report back.

[dgrammatiko]

Does it make it sense to include this feature?

I've tried to do that with: #35669 but there were objections

Or is there already a workaround for this?

Yes try this: https://wysiwyg.dgrammatiko.dev

[olivdee]

@dgrammatiko

Thanks! I just installed your wysiwyg plugin, and copied the mentioned files into my child templates folder.

Still I am puzzled on the "FULL PATH" mention... Where is the difference and why normal path OR full path? What is the explanation? I think I am not the only one confused by this info.

But: WOW! Your plugin is just working as I imagined - thanks for the great work!
It is not only applying the frontend templates css to tinyMCE (from cassiopeia-mother incl. bootstrap etc.), it is also applying the user.css from my cassiopeia child template! No tweaking, coding etc. just by following the instructions on your "Documentation" page, which is adding the neccessary files to the child template.

2 Questions:

1. What happens though, if I want to use a complete different CSS Framework? And maybe not even Child Templates? Is there a documentation how to adjust/what to adjust in order to achieve this with the plugin?

2. A bit of an off-topic, because I read through #35669:
   You mention onBeforeCompileHead in [4.1][POC][RFC] Make tinyMCE a true WYSIWYG editor #35669 (comment) - do I understand this correctly, could for example this way, the behaviour of tinyMCE inside Joomla be changed, for example to default enable "Show blocks"?