That new TinyMCE RTE addon... no CSS?

I really like that shiny new TinyMCE RTE implementation, but I can't see how to add custom classes to objects/images, or manage custom CSS like I can with the old editor.

I see in the System Settings I can set things like the image class list, and link class list, but it's not clear what format it wants them in and no matter what I've tried, no new options have appeared in the toolbar or the various editing popups.

I'd really like to use the new editor, but it seems I'll be stuck with the old one till I can sort this out.

Anyone else using the new one and have similar issues?

Quote from: davidsmith at Oct 23, 2015, 11:01 AM

in the System Settings I can set things like the image class list, and link class list, but it's not clear what format it wants them in

The TinyMCE-RTE is a little light on documentation, and you have to work it out from the links in MODX system settings to Tiny's online documentation.

In the case of the image and link class lists, the format is a JSON object like this:



If you do that in system settings, the title texts will show in the class-setting dialog in the editor, and when selected, the applicable value will be applied to the class attribute of the respective image or link.

Voice of experience: To save yourself a bit of frustration, run your JSON through a lint checker (here's one: jsonlint.com/) before placing it in the system setting. If you're like me, you'll save yourself some frustration.

Lastly, for another modern TinyMCE option, you may want to check out TinyMCE Wrapper (http://modx.com/extras/package/tinymcewrapper). Try both that and TinyMCE-RTE, and pick whichever suits you.

Thanks for the quick, and comprehensive response. However, while I think I understand, my trouble begins with the general lack of what I think you're referring to when you say "the class-setting dialog in the editor". I've been unable to find a control that enables the setting of classes, and I'm fairly sure I've tried the format you suggest above with no effect at all.

Shouldn't class-setting be included in the insert/edit image popup, along with "style"? Otherwise I imagined it might appear under format, or require an additional control or plugin added to the editor in the system settings.

Oh, no, had it wrong. I didn't have "title" etc. in quotes, only the values of each parameter. Had I used the code exactly as you put above it would have worked, and the "Class" dropdown would have appeared in the image edit popup as it has now.

Thank you very much indeed.

FYI, copying the code from the Tiny documentation was the root of my specific issue. I suppose that code isn't in JSON format, but something a similar.

As a follow-up question, what about the CSS editing dialog? It's in the old editor but I can't find any evidence in the current Tiny documentation at all.

Quote from: davidsmith at Oct 23, 2015, 05:15 PM

Oh, no, had it wrong. I didn't have "title" etc. in quotes, only the values of each parameter. FYI, copying the code from the Tiny documentation was the root of my specific issue. I suppose that code isn't in JSON format, but something a similar.

Yup. Went through exactly the same thing. Lint checking to the rescue.

Cheers

Quote from: davidsmith at Oct 23, 2015, 05:21 PM

As a follow-up question, what about the CSS editing dialog? It's in the old editor but I can't find any evidence in the current Tiny documentation at all.

Don't quite follow. Can you clarify a bit?

In the original TinyMCE editor there's a button for "Edit CSS Style" which produces a fairly comprehensive, tabbed dialog providing granular control over almost anything you'd want, from text styling to box model, etc. The icon has "AA" on it, appearing at the right hand end of the second row.

I'm also interested in using relative font sizes, in ems or more likely percentage, but it seems font size formats haven't been included in the current version. I wonder if I'm missing something. I also have this thing customised, and I like the layout. It'd be a shame to have to switch again now.

Quote from: davidsmith at Oct 23, 2015, 05:38 PM

In the original TinyMCE editor there's a button for "Edit CSS Style" which produces a fairly comprehensive, tabbed dialog providing granular control over almost anything you'd want, from text styling to box model, etc.

Ah. I see now. My use case for TinyMCE (or any other RTE) is quite the opposite of that, and finds me radically restricting the manual styling editors can use with the RTE, so they don't/can't override site-wide CSS on a page(resource)-by-page basis.

Hence, I'd never used that feature, and removed it from the available buttons. It appears (thanks, Google), however, that it was not included in the 4.x version of TinyMCE: http://www.tinymce.com/develop/bugtracker_view.php?id=6864

If that's a deal breaker for your use-case, I understand. For what it's worth, on the other hand, Tiny 4.0, however, removes some serious-to-severe spurious code insertion side-effects (spans with font sizes, line-heights, etc.) caused by using Tiny with recent versions of Chrome and Safari.This was not at all exclusive to MODX; it was a TinyMCE 3.x and later versions of Chrome & Safari "thing".

Perhaps it's worth being more specific about my styling requirements. I can understand your perspective, and even agree with it in principle. But as there are bits missing from the toolset I simply wondered if having that total CSS control back would be a way to fill in the gaps. But now that you mention it, I would prefer to have very specific controls and remain rid of the noise of all the others I'll likely never need, or shouldn't use manually in the editor in the first place.

Right now I only envision two more tools I'd like to have available. I'd like to be able to set a font size in %, and insert images at custom relative widths (%, or perhaps even ems).

I added the font size dropdown but it defaults to all the pt options and the plugin appears not to expose any settings that might allow the customisation of font size values, unlike the original TinyMCE. In fact, TinyMCE Wrapper doesn't appear to have any system settings at all. The only way I appear to be able to control it is using the plugin property set, but having attempted to disable the editor for the [[*description]] field for all resources I find that it makes no difference, even in the default property set, so at present I'm at a loss as to how I can exert any control over this editor at all.