Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified blazor/rich-text-editor/images/list-editing.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnableMarkdownAutoFormat="true">
<h3><span style="font-size: x-large;"><b>Auto Formatting - Write Faster, Format Smarter</b></span></h3><p><span style="font-size: inherit;">Boost your productivity with Auto Formatting, a powerful feature that lets you style content instantly using simple, familiar Markdown-style shortcuts. No need to reach for the toolbar - just type and watch your content transform in real time.</span></p><div style="font-family: &quot;Segoe UI&quot;; font-size: 14px; font-style: normal; line-height: 20px;"><p style="font-weight: 400;">The following Markdown shortcuts can be used:</p><ul style=""><li style="font-weight: 400;">Use <code>_</code> or <code>*</code> around text for <em>italic formatting</em>.</li><li style="">Use <code style="font-weight: 400;">__</code> or <code style="font-weight: 400;">**</code> around text for <b>bold f</b>ormatting.</li></ul></div>
</SfRichTextEditor>
43 changes: 41 additions & 2 deletions blazor/rich-text-editor/tools/text-formatting.md
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action.

![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-horizontal-line.png)

# Format Painter in Blazor Rich Text Editor
## Format Painter in Blazor Rich Text Editor

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 via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the Rich Text Editor[FormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.

Expand Down Expand Up @@ -368,4 +368,43 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
{% endhighlight %}
{% endtabs %}

![Blazor RichTextEditor with Clear Format](../images/blazor-richtexteditor-using-clear-format.gif)
![Blazor RichTextEditor with Clear Format](../images/blazor-richtexteditor-using-clear-format.gif)

## Markdown Auto Format

The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the `EnableMarkdownAutoFormat` property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency.

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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to show the what are the syntax support in our RTE

CK Editor - https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the content as per comments


Use the `EnableMarkdownAutoFormat` tool in the editor below to see the feature in action.

## Inline Formatting

The following inline formatting options are available:

- Bold – Use `**text**` or `__text__`.
- Italic – Use `*text*` or `_text_`.
- Code – Use `text`.
- Strikethrough – Use `~~text~~`.

## Block formatting

The following block formatting options are available:

- **Bulleted list** – Start a line with `*` or `-` followed by a space.
- **Numbered list** – Start a line with `1.` followed by a space.
- **To-do list** – Start a line with `[ ]` or `[x]` followed by a space to insert an unchecked or checked list item, respectively.
- **Headings** – Start a line with `#`, `##`, or `###` followed by a space to create Heading 1, Heading 2, or Heading 3. You can use up to six levels of headings
- **Block quote** – Start a line with `>` followed by a space.
- **Code block** – Start a line with ` ``` ` followed by a space.
- **Horizontal line** – Start a line with `---` followed by a space.

{% tabs %}
{% highlight razor %}

{% include_relative code-snippet/markdown-auto-format.razor %}

{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSWBtRLLeUPqQj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}