How do you Alter Default Rich Text Editor Froala Configuration?

2024/12/22 12:18 AM

I've read documentation on editing the rich text editor and registering your own configuration, but in all the examples you assign your custom configuration to the Widget Property, but how do you modify the default Rich Text widget? Or can you? I may be missing a spot or step in it...

Environment

Answers

2024/12/23 5:55 PM

You can't set a single configuration for all instances of Froala across the entire application. There are multiple versions of the configuration and each are used for different areas of the product. For example, emails, the Page Builder rich text widget, and consents all have different configurations for Froala.

You can modify the built-in rich text widget by extending it, but that only allows you to add properties or behavior.

Since you can't disable built-in widgets globally, I'd recommend using some technique to apply restrictions to editable areas to replace the use of the built-in rich text widget with a custom one that uses your custom configuration.

2025/01/02 7:52 PM
Answer

Hmm...Extending the widget won't do me much good, as there isn't a property in there, so the solution of "Hide the original and build your own" isn't ideal, especially if you already have a lot of widgets using it.

However, it gave me a good idea...Perhaps if I overwrite the view of the rich text widget, that would work! The Html.Kentico().RichTextEditor() method has the configuration as an optional parameter!

/Views/Shared/Kentico/Widgets/RichText/_RichTextWidget.cshtml 

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Components.Web.Mvc.Widgets.Internal

@model ComponentViewModel<RichTextWidgetProperties>


@if (Context.Kentico().PageBuilder().EditMode)
{
    Html.Kentico().RichTextEditor(nameof(Model.Properties.Content), configurationName: "MyConfigurationHere");
}
else
{
    <div class="fr-view">
        @Html.Raw(Html.Kentico().ResolveRichText(Model.Properties.Content))
    </div>
}

To answer this question, you have to login first.