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()
Answers
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)
{
}
}
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.