Copied to clipboard

Flag this post as spam?

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


  • Julien Kulker 60 posts 325 karma points c-trib
    Aug 12, 2021 @ 09:23
    Julien Kulker
    0

    tinyMce.config Where to find it in Umbraco 9

    Hi all,

    I would like to add some custom configuration to the tinyMCe editor. In Umbraco 8 there is a file config file called tinyMCe. In Umbraco 9 this file doesn't exist.

    So how does it work now in Umbraco 9?

  • Sebastiaan Janssen 5017 posts 15332 karma points MVP admin hq
    Aug 12, 2021 @ 09:48
    Sebastiaan Janssen
    101

    You can explore the configuration options in your appsettings.json file, most IDEs (Rider, VS, VSCode) should give you autocomplete for all the settings like this:

    enter image description here

  • Julien Kulker 60 posts 325 karma points c-trib
    Aug 13, 2021 @ 11:25
    Julien Kulker
    1

    yeah problem is now i can't find the proper documentantion for the customconfig section

  • Sebastiaan Janssen 5017 posts 15332 karma points MVP admin hq
    Aug 13, 2021 @ 11:47
    Sebastiaan Janssen
    0

    Yeah, we never really had a lot of documentation for it to begin with! 😅

    https://our.umbraco.com/Documentation/Reference/Config/tinyMceConfig/index-v7#customconfig

    So only key/value pairs can be put in there.

    I assume it should look like this:

    "RichTextEditor": {
            "CustomConfig": {
              "entity_encoding": "raw",
              "something": "something"
            }
          }
    

    Once you have figured out the notation, it would be awesome if you could help update the docs, if you have some spare time! 🤞

  • ShannonC 6 posts 78 karma points
    Sep 03, 2021 @ 14:40
    ShannonC
    0

    Good morning, Is there some sort of caching that needs to be cleared out for making these settings changes in appsettings? I have yet to be successful with anything. Current code:

    "RichTextEditor": {
        "Plugins": ["textcolor"],
        "CustomConfig": {
          "cleanup ": "false"
        }
    
  • Julien Kulker 60 posts 325 karma points c-trib
    Aug 13, 2021 @ 11:57
    Julien Kulker
    0

    Hi Sebastiaan,

    thank you for your fast reply. Yeah that is what it says. Can only contain a key string value.

    but the old possibilities where like this:

    enter image description here

  • Sebastiaan Janssen 5017 posts 15332 karma points MVP admin hq
    Aug 13, 2021 @ 12:21
    Sebastiaan Janssen
    101

    Oh, nuts! I had forgotten about this.. It probably still works exactly like that but you will need to escape the inner json.

    [\r\n {\r\n \"title\": \"Checkmark List\",\r\n \"selector\": \"ul\",\r\n \"classes\": \"richt-text--checkmarks\"\r\n }\r\n]

    Not sure if the \r\n will work well, they're not really necessary anyway, so then it would become :

    [{ \"title\": \"Checkmark List\", \"selector\": \"ul\", \"classes\": \"richt-text--checkmarks\" }]

  • Sebastiaan Janssen 5017 posts 15332 karma points MVP admin hq
    Aug 17, 2021 @ 08:07
    Sebastiaan Janssen
    0

    Did that help at all Julien?

  • Mahdi Shahbazi 4 posts 79 karma points
    Oct 14, 2021 @ 12:00
    Mahdi Shahbazi
    4

    I configured it like this in appsettings.json and works fine:

    "Umbraco": {
            "CMS": {
               "RichTextEditor": {
                "CustomConfig": {
                  "style_formats": "[{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]}]"
                }
              },
            }
          }
    
  • Alexander Wagner 17 posts 125 karma points
    Mar 10, 2022 @ 12:23
    Alexander Wagner
    2

    Is there a way to do this programmatically? The readability is awful if you have a more complex json-string.

  • Jesse Andrews 183 posts 704 karma points c-trib
    May 19, 2022 @ 18:08
    Jesse Andrews
    1

    I agree with Alexander that this configuration isn't as user friendly as it could be. One possible solution would be to move control of this to the Grid/Rich text editor data types. The settings wouldn't be global, which is a potential downside (though it could fall back to using the value from appsettings.json), but it would make it possible to have different format options for different instances of the rich text editor. I've posted a feature request for this change here.

  • Mark McDonald 2 posts 73 karma points
    Aug 05, 2022 @ 19:09
    Mark McDonald
    1

    Has anyone found a way to do this NOT in appsettings.json? That is just looking unmanageable.

  • Blake Clerke 106 posts 351 karma points
    Sep 23, 2022 @ 08:29
    Blake Clerke
    1

    The docs have been updated to show an example of creating custom formats for the dropdown list in v9+. Also added a tip for making it a bit easier to edit. :) https://our.umbraco.com/Documentation/Reference/Configuration/RichTextEditorSettings/#custom-config

  • Mark McDonald 2 posts 73 karma points
    Sep 23, 2022 @ 08:35
    Mark McDonald
    0

    I've managed to find a bit of a process which is helping reduce some of the pain for me (as we tend to have dozens of custom styles defined for editors).

    I've create a separate style_formats.json file in my solution where I can write the json normally, then I use a couple of online tools; one to remove extra spaces and put it on a single line, and one to encode it.

    https://codebeautify.org/remove-extra-spaces

    https://codebeautify.org/json-escape-unescape

    This then gives me the styles in a format I can add to the appsettings.json and also means I can keep the original format checked in to source control to edit and reapply the process as needed.

  • Huw Reddick 841 posts 2869 karma points
    Sep 23, 2022 @ 11:29
    Huw Reddick
    0

    I use a similar approach but do the formatting etc in Notepad++

  • Huw Reddick 841 posts 2869 karma points
    Sep 27, 2022 @ 09:16
    Huw Reddick
    0

    I found a new way of doing this in Visual studio

    using this extension https://github.com/SimpleSandman/JsonFormatter you can minify the json and then do a replace on the "

    I store my style_format in a json file enter image description here

    And use the extension to minfy it, enter image description here

    I then just do a replace on the " and paste the result into my appsettings file

  • Huw Reddick 841 posts 2869 karma points
    Sep 27, 2022 @ 16:40
    Huw Reddick
    1

    I have now set mine to do this automatically, some instructions and code in the link below

    https://umbraco.themediawizards.co.uk/the-grimoire/formatting-for-richtexteditor-config/

  • Alexander Wagner 17 posts 125 karma points
    Oct 03, 2022 @ 10:31
    Alexander Wagner
    0

    Great work Huw! Works like a charm.

Please Sign in or register to post replies

Write your reply to:

Draft