1. Home
  2. Forum
  3. Blazor
  4. Order List not working properly

Order List not working properly

Hi,
 
I am using RichTextEditor in one of my forms with EditorMode as Markdown and i found that on entering list, it seems the list order is not incrementing.


Also i would like to know is there anyway i can maximize and minimize the editor on icon click.

This is the icon am expecting

Thanks Regards, 
Smisha Alias

3 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team December 31, 2020 11:16 AM UTC

Hi Smisha, 
 
Greetings from Syncfusion support, 
 
We have validated your reported queries, 
 
Query 1: “I am using RichTextEditor in one of my forms with EditorMode as Markdown and i found that on entering list, it seems the list order is not incrementing.” 
 
In order to make the list incrementing, you need to configure the ListSyntax in the RichTextEditorMarkdownOptions tag. Check the below code blocks and live sample for reference. 
 
 
@using Syncfusion.Blazor.RichTextEditor 
 
<SfRichTextEditor EditorMode="EditorMode.Markdown" Height="340px" Placeholder="Type Something"> 
    <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" /> 
    In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
    Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
    and phrases should look different from each other. 
    Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, 
    you can apply the formatting to text. 
    We can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/home/). 
    The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content. 
 
    Markdown Table Format 
    |Heading 1|Heading 2| 
    |---------|---------| 
    |Col A1|Col A2| 
    |Col B1|Col B2| 
</SfRichTextEditor> 
 
@code { 
    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>(){ 
        { "OL", "1., 2., 3." } 
    }; 
} 
 
 
 
Query 2: “Also i would like to know is there anyway i can maximize and minimize the editor on icon click.” 
 
Yes, we have an option for it in the Rich Text Editor, by configuring the FullScreen command in the ToolbarItemModel using the RichTextEditorToolbarSettings tag. Check the below code blocks and sample for reference. 
 
 
@using Syncfusion.Blazor.RichTextEditor 
 
<SfRichTextEditor EditorMode="EditorMode.Markdown" Height="340px" Placeholder="Type Something"> 
    <RichTextEditorToolbarSettings Items="@Tools" /> 
    In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
    Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
    and phrases should look different from each other. 
    Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, 
    you can apply the formatting to text. 
    We can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/home/). 
    The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content. 
 
    Markdown Table Format 
    |Heading 1|Heading 2| 
    |---------|---------| 
    |Col A1|Col A2| 
    |Col B1|Col B2| 
</SfRichTextEditor> 
 
@code { 
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
{ 
        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.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
    }; 
} 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Marked as answer
SA Smisha Alias December 31, 2020 12:53 PM UTC

Thank you

IS Indrajith Srinivasan Syncfusion Team January 4, 2021 04:50 AM UTC

Hi Smisha, 
 
Welcome, 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Indrajith 


Loader.
Up arrow icon