Using the new Froala Rich Text inline editor

Matt Larrabee asked on July 29, 2020 20:47

Hi, I'm trying to get the rich text inline editor from https://github.com/Kentico/ems-mvc-components working on my mvc site, I installed the nuget package and the widget seems to work, but can someone point me to directions on how to use the inline editor in my view? This is how I currently use my existing inline editor

<div class="copy-area">
<div class="content">
    @if (Context.Kentico().PageBuilder().EditMode)
    {
        Html.RenderPartial("InlineEditors/_TextEditor", new TextEditorViewModel
        {
            PropertyName = nameof(TextWidgetProperties.Text),
            Text = Model.Text
        });
    }
    else
    {
        @Html.Raw(Model.Text);
    }
</div>

Thanks for the help!

Correct Answer

Matt Larrabee answered on July 30, 2020 22:54

Hi Brenden, thanks for your help. After playing around with it for a bit I found out how to add it. I needed to include the following on the view:

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Components.Web.Mvc.InlineEditors

And then I used the inline editor in the view like:

@if (Context.Kentico().PageBuilder().EditMode)
{
    Html.Kentico().RichTextEditor(nameof(PageSectionWidgetProperties.Copy));
}
else
{
    @Html.Raw(Html.Kentico().ResolveRichText(Model.Copy))

}

Hopefully this will help someone else as well

1 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on July 29, 2020 21:04

Assuming you're using the Widget in a widget area on your page builder page, simply add this in your view.

@Html.Kentico().EditableArea("root")

If you have a WYSIWYG editor as a field in your content type, then you'd use something like you had:

@Html.Raw(Model.FieldName)

0 votesVote for this answer Mark as a Correct answer

Matt Larrabee answered on July 29, 2020 21:23

Hi Brenden, It looks like this is for adding an area that you can add widgets in to, but I have a widget on the page and I want one of the widget properties to use the new Froala inline editor so I don't have to add individual widgets for each copy section. So the widget view might be something like this

<div class="block">
   <h2>Inline Editor 1</h2>
   <div class="copy">
      Inline Editor 2
   </div>
   <div class="cta">
      Inline Editor 3
   </div>

Forgive me if I misunderstood your answer. Thanks!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on July 29, 2020 23:11

So you can do something like this then.

<div class="block">
   <h2>Inline Editor 1</h2>
   <div class="copy">
      @Html.Kentico().EditableArea("area1")
   </div>
   <div class="cta">
      @Html.Kentico().EditableArea("area2")
   </div>
</div>

This will give you 2 editable areas that will use the editor.

0 votesVote for this answer Mark as a Correct answer

Matt Larrabee answered on July 30, 2020 20:29

I may have described it wrong above. The view I shared is the a widget's view (not a page view) so I'm not able to put editable areas in the widget view

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on July 30, 2020 21:07

Ok so you want to use a widget inside a widget, correct?

0 votesVote for this answer Mark as a Correct answer

Matt Larrabee answered on July 30, 2020 21:22

I wanted to use an inlineEditor inside the widget, which they said was included with the nuget package mentioned above (so it would be an inlineEditor rich text field inside the widget)

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.