Bugs in the RichText editor

[Peter Elek]

Dear Syncfusion,

While using the SfRichTextEditor, I noticed a few bugs. When EditorMode is set to 'EditorMode.Markdown', the preview button does not work. Additionally, it is not possible to paste images using Ctrl+V, as it is in the case of EditorMode='EditorMode.HTML'.

Looking forward to your prompt response.

Peter Elek

[Vinitha Jeyakumar]

Hi Peter Elek,

Query 1. "When EditorMode is set to 'EditorMode.Markdown', the preview button does not work"

We would like to inform you that, by default preview toolbar is not available with the Markdown editor. but if you want to use the preview button within your toolbar to view the content. You can use custom toolbar and using a third-party plugin. Please check the attached sample and code below,

Code snippet:

     @if (!IsPreview)

    {

        <SfRichTextEditor Height="250px" EditorMode="EditorMode.Markdown" SaveInterval="1" @bind-Value="@MarkdownValue">

            <RichTextEditorToolbarSettings Items="@Tools">

                <RichTextEditorCustomToolbarItems>

                    <RichTextEditorCustomToolbarItem Name="Preview">

                        <Template>

                            <button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="PreviewClick">

                                <span class="e-btn-icon e-md-preview e-icons"></span>

                            </button>

                        </Template>

                    </RichTextEditorCustomToolbarItem>

                </RichTextEditorCustomToolbarItems>

            </RichTextEditorToolbarSettings>

            <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" />

            <RichTextEditorEvents ValueChange="@OnValueChange" />

        </SfRichTextEditor>

    }

    else

    {

        <SfRichTextEditor Readonly="true" @bind-Value="@HtmlValue">

            <RichTextEditorToolbarSettings Items="@Items">

                <RichTextEditorCustomToolbarItems>

                    <RichTextEditorCustomToolbarItem Name="code">

                        <Template>

                            <button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="CodeClick">

                                <span class="e-btn-icon e-preview e-icons"></span>

                            </button>

                        </Template>

                    </RichTextEditorCustomToolbarItem>

                </RichTextEditorCustomToolbarItems>

            </RichTextEditorToolbarSettings>

        </SfRichTextEditor>

    }

@code {

    private bool IsPreview { get; set; }

    private string HtmlValue { get; set; }

    private MarkdownPipeline Pipeline { get; set; }

   

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()

    {

        new ToolbarItemModel() { Name = "code", TooltipText = "Code View" },

    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()

    {

       ....

         .......

        new ToolbarItemModel() { Name = "Preview", TooltipText = "Preview" },

        

    };

    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>()

    {

        { "OL", "1., 2., 3." }

    };

    protected override void OnInitialized()

    {

        Pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();

        this.HtmlValue = Markdig.Markdown.ToHtml(MarkdownValue, Pipeline);

        base.OnInitialized();

    }

    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)

    {

        if (args.Value == null)

        {

            this.HtmlValue = null;

        }

        else

        {

            this.HtmlValue = Markdig.Markdown.ToHtml(args.Value, Pipeline);

        }

    }

    private void PreviewClick()

    {

        this.IsPreview = true;

    }

    private void CodeClick()

    {

        this.IsPreview = false;

    }

Demos: https://blazor.syncfusion.com/demos/rich-text-editor/markdown-overview?theme=fluent

Sample attached below,

Query 2. "it is not possible to paste images using Ctrl+V, as it is in the case of EditorMode='EditorMode.HTML'"

We don't have the support to paste the images into the Markdown Editor using the ctrl + V command.

Regards,

Vinitha

Attachment: RTE_Server_6b334643.zip

[Peter Elek]

Hi Vinitha,

Thank you for the response to my first question. For the second one, I'm sending a code snippet. For some reason, in Markdown, we don't enter the AfterPasteCleanupHandler after pressing Ctrl+V.

<div class="conmentrol-section">

    @if (!IsPreview)

    {

        <SfRichTextEditor Height="250px" EditorMode="EditorMode.Markdown" SaveInterval="1" @bind-Value="@MarkdownValue">

            <RichTextEditorToolbarSettings Items="@Tools">

                <RichTextEditorCustomToolbarItems>

                    <RichTextEditorCustomToolbarItem Name="Preview">

                        <Template>

                            <button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="PreviewClick">

                                <span class="e-btn-icon e-md-preview e-icons"></span>

                            </button>

                        </Template>

                    </RichTextEditorCustomToolbarItem>

                </RichTextEditorCustomToolbarItems>

            </RichTextEditorToolbarSettings>

            <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" />

            <RichTextEditorEvents ValueChange="@OnValueChange" AfterPasteCleanup="@AfterPasteCleanupHandler" />

        </SfRichTextEditor>

    }

    else

    {

        <SfRichTextEditor Readonly="true" @bind-Value="@HtmlValue">

            <RichTextEditorToolbarSettings Items="@Items">

                <RichTextEditorCustomToolbarItems>

                    <RichTextEditorCustomToolbarItem Name="code">

                        <Template>

                            <button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn" @onclick="CodeClick">

                                <span class="e-btn-icon e-preview e-icons"></span>

                            </button>

                        </Template>

                    </RichTextEditorCustomToolbarItem>

                </RichTextEditorCustomToolbarItems>

            </RichTextEditorToolbarSettings>

        </SfRichTextEditor>

    }

</div>

@code {

    private bool IsPreview { get; set; }

    private string HtmlValue { get; set; }

    private MarkdownPipeline Pipeline { get; set; }

    private string MarkdownValue { get; set; } = @"The sample is added to showcase **markdown editing**.

Type or edit the content and apply formatting to view markdown formatted content.

We can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/rich-text-editor/markdown-custom-format).

The third-party library **Marked** is used in this sample to convert markdown into HTML content.";

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()

    {

        new ToolbarItemModel() { Name = "code", TooltipText = "Code View" },

    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()

    {

        new ToolbarItemModel() { Name = "Preview", TooltipText = "Preview" },

        new ToolbarItemModel() { Command = ToolbarCommand.Bold },

        new ToolbarItemModel() { Command = ToolbarCommand.Italic },

        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Command = ToolbarCommand.Formats },

        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },

        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },

        new ToolbarItemModel() { Command = ToolbarCommand.Image },

        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Command = ToolbarCommand.Undo },

        new ToolbarItemModel() { Command = ToolbarCommand.Redo }

    };

    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>()

    {

        { "OL", "1., 2., 3." }

    };

    protected override void OnInitialized()

    {

        Pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();

        this.HtmlValue = Markdig.Markdown.ToHtml(MarkdownValue, Pipeline);

        base.OnInitialized();

    }

    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)

    {

        if (args.Value == null)

        {

            this.HtmlValue = null;

        }

        else

        {

            this.HtmlValue = Markdig.Markdown.ToHtml(args.Value, Pipeline);

        }

    }

    private void PreviewClick()

    {

        this.IsPreview = true;

    }

    private void CodeClick()

    {

        this.IsPreview = false;

    }

    public void AfterPasteCleanupHandler(PasteCleanupArgs args)

    {

        // Here you can customize your code

    }

}

<style>

    .e-content td,

    .e-content th {

        border: 1px solid #bdbdbd;

        padding: 0 5px;

    }

    .e-icon-btn .e-md-preview::before {

        content: '\e7de';

    }

    .e-icon-btn .e-preview::before {

        content: '\e80e';

    }

</style>

[Vinitha Jeyakumar]

Hi Peter Elek,

We would like to inform you that we don't have support for pasteCleanupSettings with the Markdown editor. Hence, the AfterPasteCleanupHandler will not get triggered when you paste any content into the Editor.

Regards,

Vinitha