- Installation Guides
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
- Froala Docs
- /
- Plugins
- /
- Markdown Plugin
Markdown plugin
Plugins are fully functional during your trial once you've added your trial key to the setup.
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
