Save file only clear text without html tags

[Aron Ko]

Hello, please advise me. Why when I save a text file from RichTextEditor, it adds html tags to the file? Is there any way to remove this and save only clear text without html tags? Thank you.

<SfRichTextEditor Placeholder="Type something" CssClass="fancy-textarea" ShowCharCount="true" MaxLength="200" @bind-Value="@InputText" @ref="RteObj">

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

    <RichTextEditorEvents ValueChange="@ValueChangeHandlerAsync">

    </RichTextEditorEvents>

    <RichTextEditorToolbarSettings EnableFloating="false" Items="@ToolBarLists.ProjectProperties.ToolBarItems" Type="ToolbarType.MultiRow">

        <RichTextEditorCustomToolbarItems>

            <RichTextEditorCustomToolbarItem Name="Symbol">

                <Template>

                    @* Some Button*@

                </Template>

            </RichTextEditorCustomToolbarItem>

        </RichTextEditorCustomToolbarItems>

    </RichTextEditorToolbarSettings>

</SfRichTextEditor>

@code{

[Inject]

private RichTextToolBarList ToolBarLists { get; set; }

SfRichTextEditor RteObj;

private string FilePath { get; } = "C:\\Some Way\\editorContent.txt";

private string InputText = string.Empty;

protected override async Task OnInitializedAsync()

{

await base.OnInitializedAsync();

ToolBarLists.ToolBarList();

await LoadContentFromFileAsync();

}

private async Task ValueChangeHandlerAsync(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)

{

InputText = args.Value;

await SaveContentToFileAsync();

}

private async Task SaveContentToFileAsync()

{

await File.WriteAllTextAsync(FilePath, InputText);

}

private async Task LoadContentFromFileAsync()

{

if (File.Exists(FilePath))

{

InputText = await File.ReadAllTextAsync(FilePath);

}

}

}

[Vinothkumar Yuvaraj]

Hi Aron Ko,

We have validated your reported query, and we have a `GetTextAsync` public method to get the plain text of the Rich Text Editor. Please see the following code and the attached sample for your reference.

Code Snippet:

@using Syncfusion.Blazor.RichTextEditor

 

 

<SfRichTextEditor @ref="RteObj" @bind-Value="@InputText" >

    <RichTextEditorToolbarSettings EnableFloating="false" Items="@Tools" Type="ToolbarType.MultiRow">

  <RichTextEditorCustomToolbarItems>

  <RichTextEditorCustomToolbarItem Name="Symbol">

                <Template>

                    <button class="e-btn e-tbar-btn" @onclick="ClickHandler">

                      <div class="e-tbar-btn-text" style="font-weight: 500;">Get Value</div>

                    </button>

                </Template>

  </RichTextEditorCustomToolbarItem>

  </RichTextEditorCustomToolbarItems>

    </RichTextEditorToolbarSettings>

    <p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>

    <p><b>Key features:</b></p>

</SfRichTextEditor>

@code {

    SfRichTextEditor RteObj;

    private string InputText = string.Empty;

    public async void ClickHandler()

    {

    InputText = await RteObj.GetTextAsync();

    }

}

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

Please get back to us if you have further questions or concerns.

Regards,

Vinothkumar

Attachment: BlazorApp1_bd850cc6.zip

[Aron Ko]

Saved file

​

Hi. Thanks for helping out. This method that you provided deletes all new lines in the text editor. After pressing enter in the editor, this method deletes the new line and returns the text cursor to the old line. The built-in tools do not work also, it deletes all commands. I make a program in Blazor Hybrid that saves automatically the contents of the text editor to a text file on the local disk. After it saved I check the file and it contains HTML tags. Is it possible to save the text file without tags and still have the built-in tools work?

You have editor modes like HTML Editor and Markdown Editor at your service. I don't really need them, I need a plain text editor, and when I save a text file, the editor should not generate html tags.

Thanks.

[Vinitha Jeyakumar]

Hi Aron Ko,

Could you please clarify if you're attempting to retrieve the text value from the Editor, including the new line at the end of the content? If this isn't aligned with your requirement, kindly provide additional details regarding the issue you encountered with the GetTextAsync method in the RichTextEditor.

Regards,

Vinitha

[Aron Ko]

This is my code in Blazor Hybrid

SfRichTextEditor RteObj;

private string FilePath { get; } = "C:\\wwwroot\\AdditContent\\editorContent.txt";

private string InputText = string.Empty;

protected override async Task OnInitializedAsync()

{

await base.OnInitializedAsync();

ToolBarLists.ToolBarList();

await LoadContentFromFileAsync();

}

private async Task ValueChangeHandlerAsync(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)

{

InputText = args.Value;

InputText = await RteObj.GetTextAsync();​

await SaveContentToFileAsync();

}

private async Task SaveContentToFileAsync()

{

await File.WriteAllTextAsync(FilePath, InputText, Encoding.UTF8);

}

private async Task LoadContentFromFileAsync()

{

if (File.Exists(FilePath))

{

InputText = await File.ReadAllTextAsync(FilePath, Encoding.UTF8);

}

}

In this code, there is an event that permanently saves the contents to a file.

When I save this file without the GetTextAsync method, the editor in it generates html tags that I don't want in it.

I left the screenshot above.

Below I attach an archive showing how the editor works with the GetTextAsync method.

Attachment: This_is_how_the_text_editor_works_now_in_blazor_hybrid_63323a87.zip

[Vinitha Jeyakumar]

Hi Aron Ko,

We have tried to replicate the issue at our end, by using the code you have shared. but we didn't face any issues as you reported in the video. We have also prepared a sample for your reference.

Sample: https://blazorplayground.syncfusion.com/LtBqWWVLzVxsGKlr

We suggest you to use SaveInterval property as -1, which helps you to prevent from the change event triggering to resolve the issue at your end. if still issue persists, modify the attached sample with the issue replicating code and share with us to validate further.

Regards,

Vinitha

[Aron Ko]

Hi, I've solved it. Thanks for your help. I put this line InputText = args.Value; at the end of the method. 

[Aron Ko]

Thank you, you're the best. It works.

[Vinitha Jeyakumar]

Hi Aron Ko,

We are glad that your issue has been resolved.

Regards,

Vinitha