Froala - Customize the Editor

Environment

• Xperience by Kentico version: [30.8.0]

• .NET version: [8|9]

• Execution environment: [SaaS|Private cloud (Azure/AWS/Virtual machine)]

• Link to relevant Xperience by Kentico documentation: https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration#define-editor-configurations

I'm trying to customize the Rich Text Editor for a widget so I can limit the set of buttons and formatting options.
For example by default, the RichTextEditorComponent used on custom widget only offers basic text formatting (bold, italic, paragraph, code view). I want to add more options like image, links..

I followed the documentation and used the AI but for some reasons I keep getting the same error message: "Configuration on path Froala/RichTextEditorConfig.json could not be found. Make sure configuration exists or if the path does not contain invalid characters."

I tried all kind of paths possible without luck.

My Froala folder is under the Admin project: XperienceAdmin/Froala

Froala folder holds CustomRichTextEditorConfiguration.cs and RichTextEditorConfig.json

This is my CustomRichTextEditorConfiguration.cs

[assembly: RegisterRichTextEditorConfiguration(
    CustomRichTextEditorConfiguration.IDENTIFIER,
    typeof(CustomRichTextEditorConfiguration),
    CustomRichTextEditorConfiguration.DISPLAY_NAME)]
namespace Admin.Froala;
public class CustomRichTextEditorConfiguration : RichTextEditorConfiguration
{
    private const string CONFIGURATION_PATH = "Froala/RichTextEditorConfig.json";
    public const string IDENTIFIER = "MVC.RichText";
    public const string DISPLAY_NAME = "My Custom Rich Text";
    public CustomRichTextEditorConfiguration()
        : base(CONFIGURATION_PATH)
    {
    }
}

And this is my RichTextEditorConfig.json

{
  "imageDefaultWidth": 0,
  "imageResize": true,
  "imageUpload": false,
  "imagePaste": false,
  "imageDefaultMargin": null,
  "imageMove": true,
  "imageAddNewLine": false,
  "toolbarButtons": [
    "bold",
    "italic",
    "underline",
    "paragraphFormat",
    "formatOL",
    "formatUL",
    "outdent",
    "indent",
    "alignLeft",
    "alignCenter",
    "alignRight",
    "html",
    "insertAsset",
    "insertLinkDropDown"
  ],
  "imageEditButtons": [
    "imageAlt",
    "imageAlign",
    "imageDisplay",
    "imageSize",
    "imageRemove"
  ],

  "customPlugins": [
    {
      "pluginName": "@kentico/xperience-admin-base/Asset"
    },
    {
      "pluginName": "@kentico/xperience-admin-base/Link"
    },
    {
      "pluginName": "@kentico-community/portal-web-admin/CodeSyntaxHighlighter"
    }
  ]
}

I embedded the configuration JSON in an assembly via the EmbeddedResource element on the Admin project XperienceAdmin.csproj

<ItemGroup>
  <EmbeddedResource Include="Froala/RichTextEditorConfig.json" />
</ItemGroup>

And then I assigned the custom configuration for the RichTextEditorComponent on my widget properties:

[RichTextEditorComponent(ConfigurationName = "MVC.RichText", Label = "Summary", Order = 2)]

I rebuilt the project.

All seems good and according to the documentation but I still get the same error: Configuration on path Froala/RichTextEditorConfig.json could not be found.

Exception type: System.InvalidOperationException
Stack trace:
at Kentico.Xperience.Admin.Base.Forms.RichTextEditorConfiguration.GetConfigurationJson()
at Kentico.Xperience.Admin.Base.Forms.RichTextEditorConfigurationProvider.GetConfigurationByNameInternal(String configurationName)
at Kentico.Xperience.Admin.Base.Forms.RichTextEditorConfigurationProvider.GetConfigurationByName(String configurationName)
at Kentico.Xperience.Admin.Base.Forms.RichTextEditorComponent.ConfigureClientProperties(RichTextEditorClientProperties clientProperties)
at Kentico.Xperience.Admin.Base.Forms.FormComponent`3.GetClientProperties()
at Kentico.Xperience.Admin.Base.Forms.FormComponent`3.Kentico.Xperience.Admin.Base.Forms.IFormItem.GetClientProperties()
at Kentico.Xperience.Admin.Base.Forms.FormItemExtensions.<>c.<<GetClientProperties>b__4_0>d.MoveNext()