Skip to content

Commit 64b4eaa

Browse files
revanthKrishnanrevanthKrishnan
authored
Merge pull request #4672 from syncfusion-content/997581-auto-core
997581: Markdown auto format documentation
2 parents d56fae6 + b91b3ef commit 64b4eaa

File tree

6 files changed

+138
-8
lines changed

6 files changed

+138
-8
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: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
layout: post
3-
title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion
3+
title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion
44
description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Text formatting and Structure
77
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control
11+
# Text Formatting in the ##Platform_Name## Rich Text Editor Control
1212

1313
## Basic text styling
1414

@@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis
247247

248248
Please refer to the below video for visual behavior and interaction examples:
249249

250-
![Rich Text Editor list editing behaviour](../images/list-editing.gif)
250+
![Rich Text Editor list editing behaviour](../../images/list-editing.gif)
251251

252252
## Increase and decrease indent
253253

@@ -626,4 +626,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
626626
{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
627627
{% endhighlight %}
628628
{% endtabs %}
629+
{% endif %}
630+
631+
## Markdown Auto Format
632+
633+
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.
634+
635+
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.
636+
637+
|Commands|Syntax Example| Description |
638+
|--------|------------------------------------------|------------|
639+
| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. |
640+
| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. |
641+
| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. |
642+
| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. |
643+
| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. |
644+
| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. |
645+
| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. |
646+
| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. |
647+
| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` |
648+
| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` |
649+
| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` |
650+
| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. |
651+
| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | Creates a code block by starting the line with \`\`\` |
652+
| Ordered List | `1.` First<br>`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. |
653+
| Unordered List | `*` First<br> `*` second | Creates a bulleted list by starting lines with `*` or `-`. |
654+
| Check List | `[]` Task<br>`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.|
655+
| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.|
656+
657+
658+
### How Markdown auto-formatting works
659+
660+
#### Inline Formats
661+
Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**.
662+
**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`.
663+
664+
#### Block Formats
665+
Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**.
666+
**Example:** Typing `# Title` will render as a heading only after you type the space following `#`.
667+
668+
{% if page.publishingplatform == "aspnet-core" %}
669+
670+
{% tabs %}
671+
{% highlight cshtml tabtitle="CSHTML" %}
672+
{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %}
673+
{% endhighlight %}
674+
{% highlight c# tabtitle="Controller.cs" %}
675+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
676+
{% endhighlight %}
677+
{% endtabs %}
678+
679+
{% elsif page.publishingplatform == "aspnet-mvc" %}
680+
681+
{% tabs %}
682+
{% highlight razor tabtitle="CSHTML" %}
683+
{% include code-snippet/rich-text-editor/markdown-autoformat/razor %}
684+
{% endhighlight %}
685+
{% highlight c# tabtitle="Controller.cs" %}
686+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
687+
{% endhighlight %}
688+
{% endtabs %}
629689
{% endif %}

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

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
layout: post
3-
title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion
3+
title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion
44
description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Text formatting and Structure
77
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control
11+
# Text Formatting in the ##Platform_Name## Rich Text Editor Control
1212

1313
## Basic text styling
1414

@@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis
247247

248248
Please refer to the below video for visual behavior and interaction examples:
249249

250-
![Rich Text Editor list editing behaviour](../images/list-editing.gif)
250+
![Rich Text Editor list editing behaviour](../../images/list-editing.gif)
251251

252252
## Increase and decrease indent
253253

@@ -496,7 +496,7 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action.
496496

497497
## Format painter
498498

499-
The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property.
499+
The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
500500

501501
### Configuring format painter tool in the toolbar
502502

@@ -517,7 +517,7 @@ The following code example shows how to add the format painter tool in the Rich
517517

518518
### Customizing copy and paste format
519519

520-
You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property.
520+
You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
521521

522522
The [allowedFormats](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality.
523523

@@ -626,4 +626,64 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
626626
{% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %}
627627
{% endhighlight %}
628628
{% endtabs %}
629+
{% endif %}
630+
631+
## Markdown Auto Format
632+
633+
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.
634+
635+
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.
636+
637+
|Commands|Syntax Example| Description |
638+
|--------|------------------------------------------|------------|
639+
| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. |
640+
| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. |
641+
| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. |
642+
| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. |
643+
| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. |
644+
| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. |
645+
| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. |
646+
| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. |
647+
| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` |
648+
| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` |
649+
| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` |
650+
| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. |
651+
| Code block (Multi Line) | \`\`\`<br>Multi line code text<br>Multi line code text<br>\`\`\` | Creates a code block by starting the line with \`\`\` |
652+
| Ordered List | `1.` First<br>`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. |
653+
| Unordered List | `*` First<br> `*` second | Creates a bulleted list by starting lines with `*` or `-`. |
654+
| Check List | `[]` Task<br>`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.|
655+
| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.|
656+
657+
658+
### How Markdown auto-formatting works
659+
660+
#### Inline Formats
661+
Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**.
662+
**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`.
663+
664+
#### Block Formats
665+
Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**.
666+
**Example:** Typing `# Title` will render as a heading only after you type the space following `#`.
667+
668+
{% if page.publishingplatform == "aspnet-core" %}
669+
670+
{% tabs %}
671+
{% highlight cshtml tabtitle="CSHTML" %}
672+
{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %}
673+
{% endhighlight %}
674+
{% highlight c# tabtitle="Controller.cs" %}
675+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
676+
{% endhighlight %}
677+
{% endtabs %}
678+
679+
{% elsif page.publishingplatform == "aspnet-mvc" %}
680+
681+
{% tabs %}
682+
{% highlight razor tabtitle="CSHTML" %}
683+
{% include code-snippet/rich-text-editor/markdown-autoformat/razor %}
684+
{% endhighlight %}
685+
{% highlight c# tabtitle="Controller.cs" %}
686+
{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %}
687+
{% endhighlight %}
688+
{% endtabs %}
629689
{% endif %}

‎ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif‎

-3.85 MB
Loading

0 commit comments

Comments
 (0)