How to implement markdown editor with TinyMCE?

Question

I want to add a markdown editor for users to post their answers into my page. I've found TinyMCE but there is a problem with it: I don't know how to implement markdown editor with TinyMCE.

Is there anybody who has experience with this? Please show me how to setup a markdown editor with it.

Anamorphoscope

I'm curious what is your use case for which markdown is better than html? – Footworn

Answer 1

It looks like the Text Pattern Plugin can do this:

This plugin matches special patterns in the text and applies formats or executed commands on these patterns.

…

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: 'textpattern',
  textpattern_patterns: [
     {start: '*', end: '*', format: 'italic'},
     {start: '**', end: '**', format: 'bold'},
     {start: '#', format: 'h1'},
     {start: '##', format: 'h2'},
     {start: '###', format: 'h3'},
     {start: '####', format: 'h4'},
     {start: '#####', format: 'h5'},
     {start: '######', format: 'h6'},
     {start: '1. ', cmd: 'InsertOrderedList'},
     {start: '* ', cmd: 'InsertUnorderedList'},
     {start: '- ', cmd: 'InsertUnorderedList'}
  ]
});

Note that the plugins key here fixes a typo in the upstream documentation, which uses plugin instead.

Faradize

Note that this will just replace the patterns with equivalent HTML. It doesn't allow editing Markdown or saving Markdown text. – Cattalo

Answer 2

TinyMCE does not currently support a markdown mode with their editor, however I just recently was in the situation where I needed a markdown editor and wanted to use tinymce for it.

You will have to add a markdown package to your project. I recommend MarkdownIt, which I found from this list of recommendations. You can use any one of the recommendations from the link, just change the MarkdownIt usage with your markdown library in the code examples below.

I do not recommend Chris' approach because it's not very user friendly - the user needs the ability to save text with markdown in it and expect it to render the proper element when it is rendered. To have to press space or enter after each element to watch it change into a WYSIWYG style element is not user friendly. As such, if you take this approach you should actually remove the textpattern plugin and the textpattern_patterns configuration.

What you will want to do is to configure the setup function in your tiny config to listen to change events, and then pass the content through your markdown parser before returning the value to whatever needs it. You will also want to set menubar, toolbar, and statusbar to false.

var editorHandlerTimeout;
var MarkdownIt = require('markdown-it')
tinymce.init({
    el: 'el',
    menubar: false,
    toolbar: false,
    statusbar: false,
    setup: function (editor) {
        editor.on('paste change input undo redo', function() {
            // the timeout is to throttle how often this runs while typing
            clearTimeout(vm.editorHandlerTimeout);
            vm.editorHandlerTimeout = setTimeout(function () {
                var md = new MarkdownIt() // or any other markdown library
                var contentFromEditor = editor.getContent()
                
                //MarkdownIt adds its own paragraph tags, so strip the ones from tinymce
                if (contentFromEditor.startsWith('<p>'))
                    contentFromEditor = contentFromEditor.substring(3)
                if (contentFromEditor.endsWith('</p>'))
                    contentFromEditor = contentFromEditor.substring(0, contentFromEditor.length - 4)
                 
                var contentFromMdIt = md.render(contentFromEditor)
                
                // markdown-it inserts the html encoded values for these (this might be a bug), so we will want to replace them since we will be rendering as html
                contentFromMdIt = contentFromMdIt.replace(/&gt;/g, '>')
                                                 .replace(/&lt;/g, '<')
                                                 .replace(/&amp;/g, '&')
                
                // time to do something with your rendered markdown text

                // im in vuejs, so I emit the result as 'input' which allows my markdown editor to work as a v-model
                vm.$emit('input', contentFromMdIt)
            })
        })
    })
})

Also, it is highly recommended to add a preview to your markdown editor, as the majority of users are unfamiliar with markdown. Make the preview feature simple and accessible, and just render their output as html so they can see what is happening.

Firearm

Answer 3

Updated 2024 Solution for TinyMCE v5, v6, v7+

Short Answer: Tinymce does not support markdown yet. You have to implement it yourself by using HTML to MD parser and MD to HTML parser.

While passing the value to editor, parse the markdown to HTML with a library like markdown-it and parse back the HTML output from tinymce editor value to markdown using turndown library.

Here is an implementation that uses both these libraries with TinyMCE.

The only problem is user can not edit the markdown with source code. If you need a complete markdown editor using tinymce editor, I recommend using my opensource plugin supercode. It works for the latest version v5, v6 and v7 of TinyMCE.

You can checkout the demo of markdown implementation using supercode plugin here.

Adolfo

Answer 4

Seems TinyMCE has a Markdown plugin for their editor now

https://github.com/vaidhyanathan93/Markdownfortinymce/blob/master/markdown/plugin.js

https://www.tiny.cloud/labs/markdown/

Tiny Markdown is a markdown syntax plugin for TinyMCE, providing flexible rich text and markdown content creation options for authors, and also provides robust, reliable markdown output for developer projects.

Inquisitionist

the plugin seem not to be available to all users ? or I'm wrong – Interrelated

That page doesn't exist now (404), but I have found what was there: a proof of concept: > This particular plugin was an early proof of concept for markdown > in tiny and isn't something we can ship as it stands. We do not have > a release currently planned, but your interest does make it more > likely that this will become one of the plugins we offer in the future. > (...) Markdown support is on the roadmap. > tiny.cloud/roadmap From here: github.com/tinymce/tinymce/issues/6534 – Sennacherib

I updated the answer with a plugin.js ... may not be production ready, but you can at least take a look – Inquisitionist