html view; custom command in toolbar and OnInput event

[Stanislav Gordenko]

I have 3 questions about Blazor RTE.

First, html mode shows html-tags not <>, but &lt;&gt;. Is it possible to convert it or it id bug?

Whem user edits text in my project I could offer him some templates depending on user input. It could be done like Gmail offers finishing of word when typing. Alternatively and simpler it could be custom context or top toolbar item with autocomplete dropdown list.

Have you the method to add any custom items to toolbar? 

Is there any event like OnInput in TextBox to react on each user input?

[Pandiyaraj Muniyandi]

Hi Stanislav, 

 

Greetings from Syncfusion support. 

 

Query 1: First, html mode shows html-tags not <>, but &lt;&gt;. Is it possible to convert it or it id bug? 

 

Can you confirm, whether you’re configured EnableHtmlEncode property as true in your sample?. Also you’re getting mentioned output in View Source mode or default editing mode ? 

 

If possible, provide issue reproducing sample, which help us to provide the solution at earliest. 

 

Query 2: When user edits text in my project I could offer him some templates depending on user input. It could be done like Gmail offers finishing of word when typing. Alternatively and simpler it could be custom context or top toolbar item with autocomplete dropdown list. 

 

We couldn’t get clear requirement about this query, could you explain more details with some screenshot or sample? 

 

Query 3: Have you the method to add any custom items to toolbar?  

 

You can add custom toolbar into RichTextEditor Toolbar, refer below documentation link
https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar/?no-cache=1#custom-tool 

 

Query 4: Is there any event like OnInput in TextBox to react on each user input? 

 

Yes, we have Input event in TextBox Blazor component, refer below documentation link for usage
https://blazor.syncfusion.com/documentation/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value/ 

 

Regards, 

Pandiyaraj 

[Stanislav Gordenko]

Hallo Pandiyaraj,

1. Yes, I did. Here is my code:

        <SfInPlaceEditor Mode="RenderMode.Popup" Type="InputType.Text" Value="@(StringHelper.Empty)" CssClass="hidden-inline-editor"

                         TValue="string" ShowButtons="true" ActionOnBlur="ActionBlur.Ignore" SubmitOnEnter="false" HtmlAttributes="@(new Dictionary<string, object>() { { "data-underline", "false" } })">

            <InPlaceEditorEvents TValue="string" OnActionBegin="ActionBegin" BeginEdit="OnBeginEdit" />

            <InPlaceEditorPopupSettings Title="@(StringLocalizer["Enter template and culture values for key"])" Model="new { Position = Position.LeftTop }" />

            <InPlaceEditorTemplates>

                <Template>

                    <form>

                        <div class="form-row mb-2 font-weight-bolder">

                            @KeyValue

                        </div>

                        <div class="form-row my-2">

                            @if (IsHtml)

                            {

                                <SfRichTextEditor @ref="RichTextEditor" EditorMode="EditorMode.HTML" @bind-Value="@Template" Placeholder="@(StringLocalizer["Template for {0}", KeyValue])"

                                                  EnableResize="true" UndoRedoSteps="50" ShowCharCount="true" EnableHtmlEncode="true">

                                    <RichTextEditorToolbarSettings Items="@(new object[] {"Bold", "Italic", "SubScript", "SuperScript",

                                                                                    "LowerCase", "UpperCase", "|",

                                                                                    "Formats", "Alignments", "OrderedList", "UnorderedList",

                                                                                    "Outdent", "Indent", "|", "CreateTable",

                                                                                    "CreateLink", "Image", "|", "ClearFormat",

                                                                                    "SourceCode",  "|", "Undo", "Redo"})"

                                                                   EnableFloating="false" Type="ToolbarType.Expand" />

                                    <RichTextEditorQuickToolbarSettings Image="@(new object[] {"Replace", "Align", "Caption", "Remove",

                                                                    "InsertLink", "OpenImageLink", "-", "EditImageLink",

                                                                    "RemoveImageLink", "Display", "AltText", "Dimension"})"

                                                                        Link="@(new object[] { "Open", "Edit", "UnLink" })" />

                                    <RichTextEditorPasteCleanupSettings PlainText="true" KeepFormat="false" />

                                    <RichTextEditorImageSettings AllowedTypes="@(new string[] { ".png", ".jpg", ".svg" })" Display="inline" SaveUrl="/api/File/SaveRTEImages" Path="../Content/PageImages/"

                                                                 Resize="true" ResizeByPercent="true" MaxWidth="500px" MaxHeight="500px" />

                                    <RichTextEditorEvents ValueChange="OnChange" OnActionComplete="OnActionComplete" Created="OnCreated" />

                                </SfRichTextEditor>

                            }

                            else

                            {

                                <SfTextBox Multiline="true" ShowClearButton="true" FloatLabelType="FloatLabelType.Always" Placeholder="@(StringLocalizer["Template for {0}", KeyValue])"

                                Value="@(Template)" Input="@(args => OnTextInput(args))" CssClass="inline-editor-textarea" />

                            }

                        </div>

                        @if (Values != null)

                        {

                            @foreach (Culture culture in ServerStorage.AllCultures)

                            {

                                if (ServerStorage.InterpreterCultures.Contains(culture.Id))

                                {

                                    if (EditDivContent != null)

                                    {

                                        <div class="form-group my-2">

                                            <label for="divedit-@(culture.Id)">@(culture.Name)</label>

                                            <div id="divedit-@(culture.Id)" class="div-textarea" onshow="ExpandArea(this)" oninput="ExpandArea(this)">

                                                @EditDivContent[Field + "_" + culture.Id]

                                            </div>

                                        </div>

                                    }

                                }

                            }

                        }

                    </form>

                </Template>

            </InPlaceEditorTemplates>

        </SfInPlaceEditor>

2. I would like to make something like Google Smart Compose, but based on my own context. Here is the description:

https://support.google.com/mail/answer/9116836?co=GENIE.Platform%3DDesktop&hl=en

3. Thank you, I will try it.

4. Yes, I found OnInput event in TextBox already. I asked if you have it in ReachTextEditor?

[Indrajith Srinivasan]

Hi Stanislav, 

 

Thanks for the update,

Query 1: “First, html mode shows html-tags not <>, but <>. Is it possible to convert it or it id bug? ” 

 

In order to show the “<>” with the HTML preview of the Rich Text Editor, disable the EnableHtmlEncode by setting false. You can enable it, only if you want to see the Html encoded format. Also, if you want to show the source code of the editor initially, you can call the ShowSourceCode() method. 

 

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ShowSourceCode 

 

Query 2: “I would like to make something like Google Smart Compose, but based on my own context.” 

 

We have further validated on the reported query and have considered “Option to achieve Google smart compose feature in Rich Text Editor” as a feature request from our end and logged the report for the same, and the feature will be included with any of our upcoming releases.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/14870/ 

 

Query 3: “Is there any event like OnInput in TextBox to react on each user input? ” 

 

We don’t have any such event with Rich Text Editor. Instead, you can bind the Change event for the editor and set the SaveInterval property as 1 for the Rich Text Editor to trigger the change event for each text entered. 

 

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_SaveInterval 

 

Regards, 

Indrajith