Start trial
PricingContact Us
Log InStart For Free

How to add Markdown Plugin to your TinyMCE Editor

July 25th, 2024

2 min read

How to add the markdown plugin to TinyMCE

Written by

Mrina Sugosh

Category

How-to Use TinyMCE

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:

world of wysiwygPlugins
byMrina Sugosh

Mrina Sugosh is currently the Developer Relations Manager for TinyMCE - one of the industry's leading WYSIWYG rich text editors. She has over five years of professional work experience in full-stack development, cloud computing, AI, software development and product evangelism. A passionate educator of developers, Mrina actively contributes to the industry as an advisory board member for DevNetwork, regularly speaks at industry-leading conferences and engages in developer education during her spare time. She earned her bachelor's degree in Computer Science from University of California Berkeley and is currently pursuing a master’s degree in Management at University of Illinois Urbana-Champaign.

Related Articles

  • How-to Use TinyMCEOct 16th, 2024

    Enhance TinyMCE Revision History with Custom CSS Styles - Complete Guide Part 4

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.