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.

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.

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.

Answer 3

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.