Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 635
Bùi Quang Tuấn Avatar asked Aug 07 '16 17:08

Bùi Quang Tuấn


People also ask

Does TinyMCE support 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.

How do you get data from TinyMCE text editor?

The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.


1 Answers

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
  plugin: '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'}
  ]
});
like image 152
Chris Avatar answered Oct 02 '22 21:10

Chris