New Froala Editor v4.5.2 is here – Learn More
Markdown plugin
Format words & phrases in our rich text editor using code shortcuts through predefined markdown syntax.
When in markdown mode, the Froala Editor provides an easy split screen view so users can see the changes in real-time.
Users can markdown Heading, Bold Text ,Italic, Blockquote, Ordered list , Unordered list, Code, Fenced code block, Horizontal rule, Link , Image, Table, Footnote , Strikethrough and Task list.
The list of Froala Markdown Syntax:
| Element | Markdown Syntax (Code) |
| Heading | # H1 ## H2 ### H3 |
| Heading ID | ### My Great Heading {#custom-id} |
| Bold | **bold text** |
| Italic | *italicized text* |
| Strikethrough | ~~The world is flat.~~ |
| Blockquote | > blockquote |
| Ordered List | 1. First item 2. Second item 3. Third item |
| Unordered List | - First item - Second item - Third item |
| emphasis | * item |
| Code | `code` |
| Fenced Code Block | ``` { “firstName”: “John”, “lastName”: “Smith”, “age”: 25 } ``` |
| Horizontal Rule | --- |
| Link | [title](<https://www.example.com> "title") |
| Image |  |
| Table | | Syntax | Description | | --- | ---| | Header | Title | | Paragraph | Text | |
| Footnote | Here’s a sentence with a footnote. [^1] [^1]: This is the footnote. |
| Definition List | term : definition |
| Task List | - [x] Write the press release - [ ] Update the website - [ ] Contact the media |
For example, to denote a heading, users can add a hashtag before the word (e.g. #Heading1, #Heading2). Or to italicize text, *italic text*. Users can also markdown Bold Text, Blockquotes, Ordered or Unordered lists, Code blocks, Images, Task lists, and many more!
Plugin methods:
| markdown.isEnabled () returns: boolean | Find if markdown mode is active. |
| markdown.toggle () returns: – | Toggle between the markdown and text view. |
| markdown.refresh ($btn) returns: Array | Check if the markdown is enabled and set the state of the markdown button.
Type: DOM Object |
Add Plugin to your code:
Plugin name: markdown
Toolbar button:
markdown
Plugin Stylesheet:
../css/plugins/markdown.min.css
Or from CDN
https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/markdown.min.css
Plugin JS Script:
../js/plugins/markdown.min.js
Or from CDN
https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/markdown.min.js