Froala - Customize the Editor

2025/09/09 3:17 PM

Environment

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()

Tags:
Page Builder

Answers

2025/09/09 5:33 PM

I'm not sure what is causing your issue, but take a look at the Kentico Community Portal which has a custom Froala configuration deployed to production.

using Kentico.Community.Portal.Admin;
using Kentico.Xperience.Admin.Base.Forms;

[assembly: RegisterRichTextEditorConfiguration(
    identifier: CustomRichTextEditorConfiguration.IDENTIFIER,
    configurationType: typeof(CustomRichTextEditorConfiguration),
    displayName: "Kentico Community")]

namespace Kentico.Community.Portal.Admin;

public class CustomRichTextEditorConfiguration : RichTextEditorConfiguration
{
    private const string ConfigurationPath = "Froala/RichTextEditorConfig.json";

    public const string IDENTIFIER = "Kentico.Community.Portal.RichText";

    public CustomRichTextEditorConfiguration() : base(ConfigurationPath)
    {
    }
}
2025/09/09 7:19 PM

Thanks Sean, I did check the Kentico Community Portal. True, it has a custom Froala configuration but never used in any Widgets.

At this point I'm curious if anyone actually used custom Froala configuration in Widget for RichTextEditorComponent.

I've tried all possible paths:
Froala/RichTextEditorConfig.json
XperienceAdmin/Froala/RichTextEditorConfig.json

/Froala/RichTextEditorConfig.json
/XperienceAdmin/Froala/RichTextEditorConfig.json

../Froala/RichTextEditorConfig.json
../XperienceAdmin/Froala/RichTextEditorConfig.json

~/Froala/RichTextEditorConfig.json

Froala\\RichTextEditorConfig.json
XperienceAdmin\\Froala\RichTextEditorConfig.json

Froala.RichTextEditorConfig.json
XperienceAdmin.Froala.RichTextEditorConfig.json

RichTextEditorConfig.json

I even tried placing the RichTextEditorConfig.json file in the physical output directory (e.g., bin/Debug/net8.0/Froala/) and reference it as a content file in the .csproj . The .json file shows just fine under the bin folder but still no luck.

<ItemGroup>
  <Content Include="Froala/RichTextEditorConfig.json">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </Content>
</ItemGroup>

To response this discussion, you have to login first.