Add Image Caption capability to the `umbMediaPicker` custom TinyMce plugin

I recently upgraded to 8.6.3 due to another different issue. I’ve noticed now, that I need to allow “image_captions” in the TinyMCE, doesn’t pick-up and actually work. Example:

<customConfig><config key="image_caption">true</config></customConfig>

And maybe a related issue, is that “editor styles” work, as far as setting a class to a tag (ie., “p.caption” adds “class=‘caption’” to

tag correctly), but the actual css styling doesn’t seem to show or render.

It may be related?

Umbraco version

I am seeing this issue on Umbraco version: 8.6.3

Reproduction

If you’re filing a bug, please describe how to reproduce it. Include as much relevant information as possible, such as:

Bug summary

In the back-office “Settings > Stylesheets > Text Editors > editor_stylesheet.css”: does not carry over or render the styling on the front end, but it does preview in the editor_stylesheet.css edit mode.

In "tinyMceConfig.config:

<customConfig><config key="image_caption">true</config></customConfig>

does not allow <figure><img /><figcaption/></figure> as the TinyMCE documents to do.

Specifics

Latest versions of Edge (Chromium), Google Chrome, and Firefox Developer

Steps to reproduce

Preferred step: “Umbraco Project > config > tinyMceConfig.config”

• Add <config key="image_caption">true</config> within <customConfig /> section.
• Save and build
• Start without debugging
• Visit back-office content page with RTE control
• Add image and then text

Second step as work around for caption: “Settings > Text Editors > editor_stylesheet.css”

• Add a style
• Name “Caption Figure”
• Selector to “p.figure”
• Styles: “margin: 0; display: block;, text-align: center; font-size: .9em;”
• Visit back-office content page with RTE control
• Add image and then text
• Highlight image and text
• Select “Format > Caption Figure”

Expected result

To show Style instance preview in RTE and front-end of the page, as well as the styles in F12 dev view.

Actual result

No RTE preview or front-end rendering of added Style instance.

[nul800sebastiaan]

Does that get overwritten when updating Umbraco?

No I don’t think so, when upgrading via NuGet you get asked if config files should be overwritten and you should answer “No to all” to that.

I don’t know about image_caption, the TinyMCE configuration is unnecessarily difficult for legacy reasons and we’d love to improve that. If you can help in any way, then I’ve written down some background and ideas on this issue: https://github.com/umbraco/Umbraco-CMS/issues/7993

It is notoriously hard to do anything specialized in the Umbraco implementation of Tiny. Adding easier config might help but I am also afraid that the image picker that we made for tiny might need to support what you’re trying to do as well. I am not sure though, I am not familiar enough with this.

I’ll be happy if you or someone else who comes along wants to help do something about it but it might be a bit of a tough nut to crack! 😅

[nul800sebastiaan]

Hi there @deladroid - does this mean it worked in an older Umbraco version? Which version did this work in?

Also, did you try to bump the version in ClientDependency.config after making these changes (just make the version 1 higher than before). We pretty aggressively cache the Tiny config so in order to bust the cache the version number often needs changing.