CSS styles bug out

[Hurmeli]

If you add styles in the css box in the module settings, things don't quite work out yet. Some style examples below. In this case I'm trying to add the style to an UL element, which proved to be impossible.

.uk-column-1-2 { } Class will get assigned to li element, no way to target ul

ul.uk-column-1-2 { } It will create a new ul li around the existing ul element, which is not something anyone would want

I would assume that if you have ul.uk-column-1-2, tinymce would only allow assigning it to an UL element, not anything else. But it will happily assign it to P element or anything else you happen to have selected and will enclose that element to an UL LI instead.

Note that I'm using the editor in inline mode if it matters.

[ryancramerdesign]

@Hurmeli Thanks, I can duplicate that. Currently its setup to insert or convert the element, so that's why it appears to be adding the uk-column-1-2 class to a P element, but actually it's converting it to a UL.uk-column-1-2. But no doubt that's not a desirable behavior in this instance, as you want the UL to exist first. I have pushed an update to disable the insert/convert behavior for UL, OL, and some other block formats, so that they now only apply if the selected element is of the specified type already. Do you find this fixes the issue there too?

[Hurmeli]

Thanks Ryan, After your fix as long as the style is written as ul.uk-column-1-2, it seems to work fine.

There was a text editor I used in the past (perhaps JCE for Joomla), that added a "breadcrumb" of elements. So if you clicked li element, you could select the ul element instead by using the breadcrumbs. I suppose there's nothing like this in TinyMCE?

Sometimes it would be handy to only have class without specifying the element. Although I suppose ul and ol and maybe tables are the biggest problems when it comes to this.

[Hurmeli]

A follow up question, although I can open a new ticket if you think it necessary.

How do you add styles that affect the editor, but don't show up in the styles menu?

Example: table.uk-table.uk-table-divider.uk-table-justify is how you would add a new style for a table. But to actually make the style visible in the editor you'll have to add bunch of tr and td styles which will then appear in the editor menu making it look very confusing.

I just noticed that some uikit styling like uk-table-striped seems to be included in the editor. The comment still stands though.

[ryancramerdesign]

@Hurmeli

How do you add styles that affect the editor, but don't show up in the styles menu?

On the module configuration screen there is a setting for "Content style". If you select "Custom" you can specify your own content.css file, which is what determines the styles are used for your editor content. Maybe it would be worthwhile for me to also add an option where you can specify additional CSS (in a textarea input) without having to specify a .css file?

There was a text editor I used in the past (perhaps JCE for Joomla), that added a "breadcrumb" of elements. So if you clicked li element, you could select the ul element instead by using the breadcrumbs. I suppose there's nothing like this in TinyMCE?

That sounds like the elementpath option for the statusbar. This is enabled by default, but like CKEditor, TinyMCE does not display a status bar for its inline editor mode. So you'd have to use the regular editor in order to see/use the statusbar and elementpath.

Sometimes it would be handy to only have class without specifying the element. Although I suppose ul and ol and maybe tables are the biggest problems when it comes to this.

You can if you want to, but InputfieldTinyMCE uses the element to determine whether it's dealing with inline vs. block level and how that should affect whether it styles an existing element or inserts a new one. This is an add-on by the Inputfield though and not part of TinyMCE. It convert your CSS rules to content_style and style_formats automatically (and inline <style> tags in inline mode), so you may be able to achieve some of what you are looking for by specifying those content_style and style_formats on your own in the custom settings JSON instead of with the Inputfield's simplified CSS option. Example (see the JS tab).

Example: table.uk-table.uk-table-divider.uk-table-justify is how you would add a new style for a table. But to actually make the style visible in the editor you'll have to add bunch of tr and td styles which will then appear in the editor menu making it look very confusing.

If you are using "inline mode" with AdminThemeUikit then there's a good chance it'll still work. That's because inline mode outputs directly in the page editor markup, where uikit.css is also loaded. Whereas regular editor uses an iframe instead.

I just noticed that some uikit styling like uk-table-striped seems to be included in the editor.

I think this is only because you are using inline mode and AdminThemeUikit, so those classes are automatically recognized in that environment combination.

[Hurmeli]

Thanks for clarifying Ryan. I'll mark this closed for now. Overall TinyMCE looks like a better editor compared to CK, simply from the way it handles styles with the menu system.