Preview custom div classes in TinyMCE

Hi, I was wondering if anyone has experience with getting TinyMCE to preview custom text and Div classes more accurately. Is there a way to add the styles?

I have a button/link that I would love to add.

I’m using MODX 3.

Hey @mooreh04

In System Settings, choose tinymcerte namespace

Then populate the Link Class List value with your options in JSON format:

The value might look something like this:

[{"title": "None","value": ""},{"title": "White Outline Button", "value": "btn btn-white-outline"},{"title": "Black Outline Button", "value": "btn btn-black-outline"}]

Note that the default “None” entry is required for this to work.

Once saved, you should see a new Class field when editing links:

image

You can also load your front-end CSS files into TinyMCE for previewing:

It can be a little bit hit-or-miss but might help.

Hope this helps.

1 Like

Hi @dejaya ,

Yes that is exactly what I was looking for. It turned out that I had a different extra installed which is why I couldn’t find the settings in the first place. I had TinyMCE not TinyMCE RTE installed.

Thanks very much!

1 Like

Ah yes - TinyMCE RTE is a big improvement on TinyMCE!

Glad you got it sorted :+1: