Creating Rich Text Form Component

Frank Rizzuto asked on May 13, 2025 19:00

Hello,

I have been trying to display a rich text component for a user form. As of now it does display on the edit page view but not on the page itself. The docs only seem to mention displaying the html content to the user and not the editor. Using Kentico 13 for context.

Properties file:

   public class RichTextProperties : FormComponentProperties<string>
{
    public RichTextProperties() : base(FieldDataType.Text, size: 4000)
    {
    }


    [EditingComponent(Kentico.Components.Web.Mvc.FormComponents.RichTextComponent.IDENTIFIER, Label = "Content")]
    public override string DefaultValue
    {
        get;
        set;
    }        
    }


    //The RichTextComponent.cshtml file

    @if (Context.Kentico().PageBuilder().EditMode) {
      Html.Kentico().RichTextEditor(nameof(Model.Properties.DefaultValue)); 
    } else {
     @Html.Kentico().RichTextEditorFor(m => m.Value, htmlAttributes, configurationName: "simple")
  }

I'd appreciate it if anyone could point me to the right direction on this.

form builder form components

Recent Answers

Rahul Kumawat answered on May 14, 2025 18:27 (last edited on May 14, 2025 18:31)

You created a form component using RichTextComponent, and it displays correctly in the form builder (edit page view) but not on the front-end (page).

The key issue lies in this line:

@Html.Kentico().RichTextEditorFor(m => m.Value, htmlAttributes, configurationName: "simple") This line renders the Rich Text Editor (the editing UI) — but you don’t want an editor on the live site. You want to render the HTML content, i.e., the saved string stored in the DefaultValue.

Solution: Differentiate View vs. Editor In your RichTextComponent.cshtml, update your Razor like this:

@model Kentico.Components.Web.Mvc.FormComponents.FormComponentViewModel<string>

@{
    var htmlAttributes = new Dictionary<string, object>();
}

@if (Context.Kentico().PageBuilder().EditMode)
{
    @Html.Kentico().RichTextEditorFor(m => m.Value, htmlAttributes, configurationName: "simple")
}
else
{
    // Render the HTML content as-is
    @Html.Raw(Model.Value)
}

0 votesVote for this answer Mark as a Correct answer

Frank Rizzuto answered on May 14, 2025 19:20

Actually I do want the rich text editor to show on the live site, not just the admin view. For that, I was just trying to use the @Html.Kentico().RichTextEditorFor(m => m.Value, htmlAttributes, configurationName: "simple") but I suspect that I am missing something. Do I need to include Froala scripts on my _RichTextComponent.cshtml

0 votesVote for this answer Mark as a Correct answer