Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason D 66 posts 218 karma points
    Jul 20, 2020 @ 20:11
    Jason D
    0

    Customizing TinyMCE per documentation doesn't wokr.

    I'm on 8.6.3, and can't seem to get a custom TinyMCE setting to work. I've followed the documentation. I simply want to do this (image caption enabling) https://www.tiny.cloud/docs-4x/plugins/image/#image_caption !!

  • Nik 1593 posts 7151 karma points MVP 6x c-trib
    Jul 20, 2020 @ 21:13
    Nik
    0

    Hi Jason,

    I have a feeling this might not work as I think Umbraco uses a custom control for adding images due to having to access the Umbraco media library.

    I could be wrong though, but thought I'd flag this to you just in case.

    Thanks

    Nik

  • Jason D 66 posts 218 karma points
    Jul 20, 2020 @ 21:15
    Jason D
    0

    I appreciate the note, and if I follow what you're saying then I hope that's not the case, because the image processing shouldn't be affected by having a <figure><figcaption ></figure> tags added as it's an HTML5 standard, like <article />, etc.

  • Ken Schnell 35 posts 147 karma points
    Jul 21, 2020 @ 07:09
    Ken Schnell
    0

    Are you using the Image plugIn

    and in your tinyMCEconfig file you have the plugin registered and the command line registered. Pseudo markup here:

    Your CSS should go into the Text Editor there is a specific place it gets added - just like when you do formatting - this is in the documentation on line. But when you configure the Tiny in the Editor GUI, there is the option to add the classes .

    There is also some custom things you can do via the config file. TinyMCE Configuration

    So look at that link and then you can add this in the appropriate place - look at formatters ..

    figure.image {
        display: inline-block;
        border: 1px solid gray;
        margin: 0 2px 0 1px;
        background: #f5f2f0;
    }
    
    figure.align-left {
        float: left;
    }
    
    figure.align-right {
        float: right;
    }
    
    figure.image img {
        margin: 8px 8px 0 8px;
    }
    
    figure.image figcaption {
        margin: 6px 8px 6px 8px;
        text-align: center;
    }
    
  • Jason D 66 posts 218 karma points
    Jul 21, 2020 @ 16:19
    Jason D
    0

    Edited:
    - Deleted browser cache - Added one number higher to ClientDependency - Ensured IE Express stopped - Closed Visual Studio (2019 pro)

    Re-ran (without debugging) and now "figure, figcaption" are valid elements via the TinyMceConifg.config

    Still not sure if this will get overwritten in an Umbraco upgrade though...

Please Sign in or register to post replies

Write your reply to:

Draft