appsettingsjson richtexteditor customconfig templates - Umbraco 9

Ryan Faurskov 3 posts 73 karma points

Sep 24, 2021 @ 12:02

appsettings.json - RichTextEditor - CustomConfig - templates

Hi

How to add templates in the RichTextEditor/CustomConfig section in appsettings.json?

In v8 it was a array of objects but in v9 it's a key value pairs of strings.

V8 enter image description here

V9 enter image description here

Anyone else run into this and found a solution?

//Ryan

Copy Link

Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq

Sep 24, 2021 @ 13:26

I haven't tried yet, but have you tried escaping it?

Copy Link

Ryan Faurskov 3 posts 73 karma points

Sep 24, 2021 @ 13:40

I tried this but it didn't work

"CustomConfig": {
          "Templates" : "[{ \"title\": \"Infobox Blue\", \"description\": \"A box with highlighted background color\", \"url\": \"../App_Plugins/RTE/infobox-blue.html\" }]"
        },

Copy Link

Ryan Faurskov 3 posts 73 karma points

Sep 24, 2021 @ 13:43

Ahh templates with lowercase =)

Thx

"CustomConfig": {
      "templates" : "[{ \"title\": \"Infobox Blue\", \"description\": \"A box with highlighted background color\", \"url\": \"../App_Plugins/RTE/infobox-blue.html\" }]"
    },

Copy Link

Joe Harvey 34 posts 174 karma points

Aug 08, 2022 @ 10:23

I was struggling to work out how to implement something similar for style_formats in Umbraco v9 and v10 etc, which in v8 tinyMceConfig.config XML was as below:

<customConfig>
    <config key="style_formats">
    [
      {
          "title": "Common",
          "items": [
              {
                  "title": "Paragraph",
                  "block": "p"
              }
          ]
      }
    ]
  </config>
</customConfig>

I tried the seemingly logical approach of putting that JSON directly in the new appsettings.json' e.g.:

"RichTextEditor": {
    "CustomConfig": {
      "style_formats":  [
      {
          "title": "Common",
          "items": [
              {
                  "title": "Paragraph",
                  "block": "p"
              }
          ]
      }
    ]
  }
}

However, that threw:

An error occurred Cannot create instance of type 'System.String' because it is missing a public parameterless constructor.

with references to Umbraco.Cms.Web.BackOffice.PropertyEditors.RichTextPreValueController.GetConfiguration() and Umbraco.Cms.Core.Models.ContentEditing.RichTextEditorConfiguration which, having inspected the v10 core code, I can see only accepts a dictioanary of strings for CustomConfig:

[DataMember(Name = "customConfig")]
public IDictionary<string,string>? CustomConfig { get; set; }

I then found this article and can confirm that the suggestion of escaping the JSON works in the case of style_formats too, e.g.:

  "RichTextEditor": {
    "CustomConfig": {
      "style_formats": "[{\"title\": \"Images\",\"items\": [{\"title\": \"Image Left\",\"selector\": \"img\",\"classes\": \"image-left\"},{\"title\": \"Image Centre\",\"selector\": \"img\",\"classes\": \"image-centre\"},{\"title\": \"Image Right\",\"selector\": \"img\",\"classes\": \"image-right\"}]}]"
    }
  }

This seems like absolute madness to me?

Have we seriously made the jump form XML based config files in v8 (with embedded JSON within the XML data) to JSON based config files in v9+, only to require difficult to form/read/update, single-line, encoded JSON for some settings? Surely the entire CustomConfig section could just allow for freeform JSON which is then parsed into Umbraco.Cms.Core.Models.ContentEditing.RichTextEditorConfiguration and any unrecognised keys and/or settings discarded?

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Sep 27, 2022 @ 16:42

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

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

Copy Link

Brendan Rice 538 posts 1102 karma points

Mar 27, 2024 @ 22:41

I took Huw's brilliant idea and adapted it for Umbraco 13:

In program.cs right after this:

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

Put this:

// Load and update Umbraco RichTextEditor configurations
var configPath = Path.Combine(builder.Environment.ContentRootPath, "RTE-style-formats.json");
if (File.Exists(configPath))
{
    var jsonContent = File.ReadAllText(configPath);
    var obj = JsonSerializer.Deserialize<object>(jsonContent);
    var jsonString = JsonSerializer.Serialize(obj, new JsonSerializerOptions { WriteIndented = false });

    // Update the in-memory configuration
    builder.Configuration["Umbraco:CMS:RichTextEditor:CustomConfig:style_formats"] = jsonString;
}

Here the example json file that sits at the root of the web project:

[
    {
        "title":"Headers","items":[ 
            {"title":"Heading 1","block":"h1"}, 
            {"title":"Heading 2","block":"h2"}, 
            {"title":"Heading 3","block":"h3"}, 
            {"title":"Heading 4","block":"h4"}, 
            {"title":"Heading 5","block":"h5"}
        ]
    },
    {
        "title":"Text","items":[ 
            {"title":"Intro Paragraph","block":"strong"}, 
            {"title":"Paragraph","block":"p"}
        ]
    }
]

Copy Link

is working on a reply...

Flag this post as spam?

appsettings.json - RichTextEditor - CustomConfig - templates