Skip to content

Commit c14b201

Browse files
sf4442sf4442
committed
997581: Markdown auto format documentation
1 parent d56fae6 commit c14b201

File tree

5 files changed

+130
-164
lines changed

5 files changed

+130
-164
lines changed

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/markdown-autoformat/controller.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
public class HomeController : Controller
2+
{
3+
public ActionResult Index()
4+
{
5+
ViewBag.value = @"<h3>Markdown Auto-Format</h3><p>The Markdown Auto-Format feature automatically converts Markdown syntax into clean, semantic HTML within the Rich Text Editor. This capability streamlines content creation by allowing you to write using familiar Markdown patterns while ensuring consistent HTML output.</p><p>When enabled, the editor supports both <b>inline formatting</b> (such as bold and italic) and <b>block-level elements</b> (such as headings and lists). As you type, Markdown syntax is instantly transformed into its corresponding HTML tags, delivering a smooth and efficient editing experience.</p><p>It also supports <b>checklists</b> and <b>to-do lists,</b> allowing you to create interactive task lists using simple Markdown syntax.</p>";
6+
return View();
7+
}
8+
}

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/markdown-autoformat/razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@Html.EJS().RichTextEditor("markdownAutoformat").Value(ViewBag.value).Render()

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/markdown-autoformat/tagHelper‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ejs-richtexteditor id="editor" value="@ViewBag.value"></ejs-richtexteditor>

‎ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md‎

Lines changed: 60 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -200,55 +200,6 @@ The following example demonstrates how to customize the bullet format lists in t
200200
{% endtabs %}
201201
{% endif %}
202202

203-
### Checklist
204-
205-
The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution.
206-
207-
#### Inserting a checklist
208-
209-
You can embed interactive task lists directly within the Rich Text Editor. Here’s how you can insert a Checklist:
210-
- **Using the Toolbar**: Click the Checklist button in the editor toolbar, usually represented by a checkbox icon.
211-
- **Using the Shortcut**: Press `Ctrl+Shift+9` (or `Cmd+Shift+9` on macOS) to insert a Checklist at your cursor’s position.
212-
- **Converting Existing Lists**: Select an existing bullet or numbered list and click the Checklist button to convert it into an interactive checklist.
213-
- **Toggling Checklist Items**: You can toggle the state of checklist items between checked and unchecked by clicking the checkbox. If you prefer using the keyboard, press `Ctrl+Enter` (or `Cmd+Enter` on macOS) to toggle the check marks based on your selection or cursor position in the editor.
214-
215-
#### Configuring Checklist
216-
217-
To enable the Checklist feature in your editor, add the `Checklist` toolbar item to the `ToolbarSettings.Items` property. This feature supports customizable behavior and can be easily integrated into your Rich Text Editor toolbar for quick access.
218-
219-
Below is an example of how to configure the Checklist in the Rich Text Editor:
220-
221-
{% if page.publishingplatform == "aspnet-core" %}
222-
223-
{% tabs %}
224-
{% highlight cshtml tabtitle="CSHTML" %}
225-
{% include code-snippet/rich-text-editor/checklist-cs1/tagHelper %}
226-
{% endhighlight %}
227-
{% highlight c# tabtitle="Controller.cs" %}
228-
{% include code-snippet/rich-text-editor/checklist-cs1/controller.cs %}
229-
{% endhighlight %}
230-
{% endtabs %}
231-
232-
{% elsif page.publishingplatform == "aspnet-mvc" %}
233-
234-
{% tabs %}
235-
{% highlight razor tabtitle="CSHTML" %}
236-
{% include code-snippet/rich-text-editor/checklist-cs1/razor %}
237-
{% endhighlight %}
238-
{% highlight c# tabtitle="Controller.cs" %}
239-
{% include code-snippet/rich-text-editor/checklist-cs1/controller.cs %}
240-
{% endhighlight %}
241-
{% endtabs %}
242-
{% endif %}
243-
244-
## Nested list creation using Tab key
245-
246-
In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one.
247-
248-
Please refer to the below video for visual behavior and interaction examples:
249-
250-
![Rich Text Editor list editing behaviour](../images/list-editing.gif)
251-
252203
## Increase and decrease indent
253204

254205
The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.
@@ -430,39 +381,6 @@ Use the `Blockquote` tool in the editor below to see the feature in action.
430381

431382
> In a markdown editor, blockquotes are represented using the `>` symbol.
432383
433-
### Nested blockquotes
434-
435-
The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another.
436-
437-
While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways:
438-
439-
1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly.
440-
2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property.
441-
3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option.
442-
443-
{% if page.publishingplatform == "aspnet-core" %}
444-
445-
{% tabs %}
446-
{% highlight cshtml tabtitle="CSHTML" %}
447-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %}
448-
{% endhighlight %}
449-
{% highlight c# tabtitle="Controller.cs" %}
450-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %}
451-
{% endhighlight %}
452-
{% endtabs %}
453-
454-
{% elsif page.publishingplatform == "aspnet-mvc" %}
455-
456-
{% tabs %}
457-
{% highlight razor tabtitle="CSHTML" %}
458-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %}
459-
{% endhighlight %}
460-
{% highlight c# tabtitle="Controller.cs" %}
461-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %}
462-
{% endhighlight %}
463-
{% endtabs %}
464-
{% endif %}
465-
466384
## Horizontal line
467385

468386
The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.
@@ -626,4 +544,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
626544
{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
627545
{% endhighlight %}
628546
{% endtabs %}
547+
{% endif %}
548+
549+
## Markdown Auto Format
550+
551+
The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableMarkdownAutoformat) property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency.
552+
553+
By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience.
554+
555+
|Commands|Syntax Example| Description |
556+
|--------|------------------------------------------|------------|
557+
| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. |
558+
| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. |
559+
| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. |
560+
| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. |
561+
| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. |
562+
| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. |
563+
| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. |
564+
| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. |
565+
| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` |
566+
| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` |
567+
| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` |
568+
| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. |
569+
| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | Creates a code block by starting the line with \`\`\` |
570+
| Ordered List | `1.` First<br>`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. |
571+
| Unordered List | `*` First<br> `*` second | Creates a bulleted list by starting lines with `*` or `-`. |
572+
| Check List | `[]` Task<br>`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.|
573+
| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.|
574+
575+
576+
### How Markdown auto-formatting works
577+
578+
#### Inline Formats
579+
Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**.
580+
**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`.
581+
582+
#### Block Formats
583+
Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**.
584+
**Example:** Typing `# Title` will render as a heading only after you type the space following `#`.
585+
586+
{% if page.publishingplatform == "aspnet-core" %}
587+
588+
{% tabs %}
589+
{% highlight cshtml tabtitle="CSHTML" %}
590+
{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/tagHelper %}
591+
{% endhighlight %}
592+
{% highlight c# tabtitle="Controller.cs" %}
593+
{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/controller.cs %}
594+
{% endhighlight %}
595+
{% endtabs %}
596+
597+
{% elsif page.publishingplatform == "aspnet-mvc" %}
598+
599+
{% tabs %}
600+
{% highlight razor tabtitle="CSHTML" %}
601+
{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/razor %}
602+
{% endhighlight %}
603+
{% highlight c# tabtitle="Controller.cs" %}
604+
{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/controller.cs %}
605+
{% endhighlight %}
606+
{% endtabs %}
629607
{% endif %}

‎ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md‎

Lines changed: 60 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -200,55 +200,6 @@ The following example demonstrates how to customize the bullet format lists in t
200200
{% endtabs %}
201201
{% endif %}
202202

203-
### Checklist
204-
205-
The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution.
206-
207-
#### Inserting a checklist
208-
209-
You can embed interactive task lists directly within the Rich Text Editor. Here’s how you can insert a Checklist:
210-
- **Using the Toolbar**: Click the Checklist button in the editor toolbar, usually represented by a checkbox icon.
211-
- **Using the Shortcut**: Press `Ctrl+Shift+9` (or `Cmd+Shift+9` on macOS) to insert a Checklist at your cursor’s position.
212-
- **Converting Existing Lists**: Select an existing bullet or numbered list and click the Checklist button to convert it into an interactive checklist.
213-
- **Toggling Checklist Items**: You can toggle the state of checklist items between checked and unchecked by clicking the checkbox. If you prefer using the keyboard, press `Ctrl+Enter` (or `Cmd+Enter` on macOS) to toggle the check marks based on your selection or cursor position in the editor.
214-
215-
#### Configuring Checklist
216-
217-
To enable the Checklist feature in your editor, add the `Checklist` toolbar item to the `e-richtexteditor-toolbarsettings.items` property. This feature supports customizable behavior and can be easily integrated into your Rich Text Editor toolbar for quick access.
218-
219-
Below is an example of how to configure the Checklist in the Rich Text Editor:
220-
221-
{% if page.publishingplatform == "aspnet-core" %}
222-
223-
{% tabs %}
224-
{% highlight cshtml tabtitle="CSHTML" %}
225-
{% include code-snippet/rich-text-editor/checklist-cs1/tagHelper %}
226-
{% endhighlight %}
227-
{% highlight c# tabtitle="Controller.cs" %}
228-
{% include code-snippet/rich-text-editor/checklist-cs1/controller.cs %}
229-
{% endhighlight %}
230-
{% endtabs %}
231-
232-
{% elsif page.publishingplatform == "aspnet-mvc" %}
233-
234-
{% tabs %}
235-
{% highlight razor tabtitle="CSHTML" %}
236-
{% include code-snippet/rich-text-editor/checklist-cs1/razor %}
237-
{% endhighlight %}
238-
{% highlight c# tabtitle="Controller.cs" %}
239-
{% include code-snippet/rich-text-editor/checklist-cs1/controller.cs %}
240-
{% endhighlight %}
241-
{% endtabs %}
242-
{% endif %}
243-
244-
## Nested list creation using Tab key
245-
246-
In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one.
247-
248-
Please refer to the below video for visual behavior and interaction examples:
249-
250-
![Rich Text Editor list editing behaviour](../images/list-editing.gif)
251-
252203
## Increase and decrease indent
253204

254205
The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.
@@ -430,39 +381,6 @@ Use the `Blockquote` tool in the editor below to see the feature in action.
430381

431382
> In a markdown editor, blockquotes are represented using the `>` symbol.
432383
433-
### Nested blockquotes
434-
435-
The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another.
436-
437-
While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways:
438-
439-
1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly.
440-
2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property.
441-
3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option.
442-
443-
{% if page.publishingplatform == "aspnet-core" %}
444-
445-
{% tabs %}
446-
{% highlight cshtml tabtitle="CSHTML" %}
447-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/tagHelper %}
448-
{% endhighlight %}
449-
{% highlight c# tabtitle="Controller.cs" %}
450-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %}
451-
{% endhighlight %}
452-
{% endtabs %}
453-
454-
{% elsif page.publishingplatform == "aspnet-mvc" %}
455-
456-
{% tabs %}
457-
{% highlight razor tabtitle="CSHTML" %}
458-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/razor %}
459-
{% endhighlight %}
460-
{% highlight c# tabtitle="Controller.cs" %}
461-
{% include code-snippet/rich-text-editor/nested-quotation-formatting/controller.cs %}
462-
{% endhighlight %}
463-
{% endtabs %}
464-
{% endif %}
465-
466384
## Horizontal line
467385

468386
The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.
@@ -626,4 +544,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
626544
{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
627545
{% endhighlight %}
628546
{% endtabs %}
547+
{% endif %}
548+
549+
## Markdown Auto Format
550+
551+
The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableMarkdownAutoformat) property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency.
552+
553+
By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience.
554+
555+
|Commands|Syntax Example| Description |
556+
|--------|------------------------------------------|------------|
557+
| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. |
558+
| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. |
559+
| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. |
560+
| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. |
561+
| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. |
562+
| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. |
563+
| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. |
564+
| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. |
565+
| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` |
566+
| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` |
567+
| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` |
568+
| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. |
569+
| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | Creates a code block by starting the line with \`\`\` |
570+
| Ordered List | `1.` First<br>`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. |
571+
| Unordered List | `*` First<br> `*` second | Creates a bulleted list by starting lines with `*` or `-`. |
572+
| Check List | `[]` Task<br>`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.|
573+
| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.|
574+
575+
576+
### How Markdown auto-formatting works
577+
578+
#### Inline Formats
579+
Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**.
580+
**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`.
581+
582+
#### Block Formats
583+
Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**.
584+
**Example:** Typing `# Title` will render as a heading only after you type the space following `#`.
585+
586+
{% if page.publishingplatform == "aspnet-core" %}
587+
588+
{% tabs %}
589+
{% highlight cshtml tabtitle="CSHTML" %}
590+
{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %}
591+
{% endhighlight %}
592+
{% highlight c# tabtitle="Controller.cs" %}
593+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
594+
{% endhighlight %}
595+
{% endtabs %}
596+
597+
{% elsif page.publishingplatform == "aspnet-mvc" %}
598+
599+
{% tabs %}
600+
{% highlight razor tabtitle="CSHTML" %}
601+
{% include code-snippet/rich-text-editor/markdown-autoformat/razor %}
602+
{% endhighlight %}
603+
{% highlight c# tabtitle="Controller.cs" %}
604+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
605+
{% endhighlight %}
606+
{% endtabs %}
629607
{% endif %}

0 commit comments

Comments
 (0)