Copied to clipboard

Flag this post as spam?

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


  • Andy 9 posts 99 karma points
    Aug 29, 2023 @ 10:43
    Andy
    0

    Fullscreen option in Umbraco 12 RTE

    Hi, quick question on the Umbraco RichText editor. I've spent some time googling but cant seem to find an answer anywhere.

    Its kind of frustrating using this with large amounts of content, since the toolbar doesnt stick to the windows meaning you constantly have to scroll up and down to access it. In Umbraco 12, I was able to add the fullscreen button to the toolbar, but clicking it seems to break the layout of the page and the editor doesnt actually go fullscreen (gif below). 

    fullscreen issue in RTE

    In previous versions of umbraco, I was able to do some css to make the toolbar stick as the editor scrolls and make the fullscreen option work properly. I'm trying to apply these changes to my Umbraco 12 installation, but it got me thinking, is this the intended behaviour? I feel like i'm missing something stupid? 

    Thanks!

  • Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib
    Aug 29, 2023 @ 11:27
    Marc Goodson
    0

    Hi Andy

    It's probalby worth raising this as a bug, as pretty sure full screen did work (perhaps with the extra CSS rule to make the toolbar stay on top!)

    I wonder if it's related to this one: https://github.com/umbraco/Umbraco-CMS/issues/14405 regadring missing commands?

    but in the meantime, have you tried switching to 'distraction free' mode ?(there is a dropdown on the configuration for the RTE, you can switch Classic to Distraction Free), it's not perfect but keeps the toolbar options in context as you are typing, so can also be annoying, but might be less annoying that the scroll up thing ...

    regards

    marc

  • Andy 9 posts 99 karma points
    Aug 29, 2023 @ 12:10
    Andy
    0

    Hi Marc,

    Thanks for this! Yeah I'll report a bug, just wanted to make sure I wasn't missing something obvious.

    Distraction free mode is a good workaround which I haven't tried before, I think that will fix my problem for now.

    Thanks again!

  • Nick Hoang 51 posts 180 karma points
    Oct 26, 2023 @ 16:44
    Nick Hoang
    1

    Hi Andy, I'm using Umbraco 10.6.1 but don't see your issue but adding fullscreen command isn't a quick thing because lack of document so I list some instructions below for someone need help:

    1/ Add these settings in the appsettings.json file, under Umbraco > CMS section:

    "RichTextEditor": {
        "Plugins": [
          "fullscreen"
        ],
        "Commands": [
          {
            "Alias": "fullscreen",
            "Name": "Fullscreen",
            "Mode": "All"
          }
        ]
      }
    

    2/ Rebuild the solution and login to the CMS -> edit the rich text editor data type -> tick to the Fullscreen option on the bottom of command list

    3/ Add this css to fix one minor issue that the toolbar in fullscreen mode isn't on the top of screen:

    umb-editor-tab-bar ~ div .umb-rte .mce-top-part { top: inherit; }
    

    Done.

    Hope it help.

    Cheers, Nick

Please Sign in or register to post replies

Write your reply to:

Draft