Markdown offers a straightforward, text-based approach for developers and writers who need quick formatting options. The Markdown plugin for TinyMCE is especially useful, as it detects and converts pure Markdown to HTML, streamlining the content creation process by allowing users to paste Markdown directly into the editor and have it automatically formatted.
This feature is particularly beneficial for developers who prefer writing in Markdown but need the advanced formatting options of a rich text editor. Example use cases include creating technical documentation, where Markdown is commonly used for its simplicity, or writing blog posts that need to be quickly formatted and published. Read on to find out how to set up the Markdown plugin in your TinyMCE Editor.
What is the Markdown Plugin?
The Markdown Premium Plugin allows the editor to detect if pure Markdown is pasted into the TinyMCE editor instance.
During this paste event, if the editor detects Markdown has been pasted, it will:
- Attempt to convert the Markdown to HTML
- Add an undo level before the conversion to allow for undo of plain-text
The markdown plugin is available on all paid TInyMCE Cloud Plans.
Getting started with TinyMCE
First, you'll need to install TinyMCE and initialize it in your project. Reference TinyMCE's documentation on the latest installation instructions.
Here is a quick code sample showing how to initialize TinyMCE from the CDN:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="<a href="https://cdn.tiny.cloud/1/tiny-api-key/tinymce/7/tinymce.min.js">https://cdn.tiny.cloud/1/tiny-api-key/tinymce/7/tinymce.min.js</a>" referrerpolicy="origin"></script>
</head>
<body style="margin:100px;padding:0">
<script src="script.js"></script>
<textarea>
</textarea>
</body>
</html>script.js
document.addEventListener("DOMContentLoaded", function () {
tinymce.init({
selector: "textarea",
plugins: "code",
toolbar: "undo redo | code",
});
});
Adding the Markdown Plugin
To add Markdown support, include 'markdown' in the plugins initialization option:
tinymce.init({
selector: 'textarea',
plugins: 'code <strong>markdown'</strong>,
toolbar: 'undo redo | code',
});Customizing the Markdown Plugin
Markdown content can also be customized to recognize specific symbols like Copyright and Trademark. To do this, set up a key-value pair that is parsed by passing a markdown option. Here we are mapping the (C) character to the copyright symbol and (TM) to the trademark symbol:
tinymce.init({
selector: "textarea",
plugins: "code markdown",
toolbar: "undo redo | code",
markdown_symbols: {
C: "©",
TM: "™",
R: "®",
},
});
Those are all the steps to add the Markdown plugin to TinyMCE, enabling direct Markdown editing and parsing. See TinyMCE's Markdown documentation for additional details on configuration options.
TinyMCE 7
You can have a test drive of the TinyMCE community edition for Version 7 to see how the updates and improvements work within your project. For a quick walkthrough on how to install the TinyMCE Markdown plugin, watch our How-To video:
- If you have any questions, concerns or feedback, reach out to us on the TinyMCE Github
- If you’re aiming to upgrade to use Premium plugins with TinyMCE 7, sign up for a FREE API key, and then try out some of the TinyMCE Premium plugins in your project.
Want to talk to us?
When you’re ready, our sales team is here to chat about available plans to suit your app’s needs (all of which come with professional support to help with your upgrade).
You can also find us on these channels:
