Search code examples
tinymcemarkdown

How to implement markdown editor with TinyMCE?

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.

Solution

  • 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.