Markdown Editor

A minimal editor to create markdown content.

Dependencies

• Tooltip

How to

Use this component to write markdown content.

You can initialize the editor using the MdEditor object:

var mdEditor = document.getElementsByClassName('md-editor')[0]; // your markdown editor element
new MdEditor(mdEditor);

Note that in the markdown-editor.js, we do not initialize the MdEditor object. 

Editor Actions #

By default, the editor comes with the following list of actions:

MdEditor.defaults = [
    {
      action: 'heading',
      content: '###content',
      newLine: false
    },
    {
      action: 'code',
      content: '`content`',
      newLine: false
    },
    {
      action: 'link',
      content: '[content](url)',
      newLine: false
    },
    {
      action: 'blockquote',
      content: '> content',
      newLine: true
    },
    {
      action: 'bold',
      content: '**content**',
      newLine: false
    },
    {
      action: 'italic',
      content: '_content_',
      newLine: false
    },
    {
      action: 'uList',
      content: '- Item 1\n- Item 2\n- Item 3',
      newLine: true
    },
    {
      action: 'oList',
      content: '1. Item 1\n2. Item 2\n3. Item 3',
      newLine: true
    },
    {
      action: 'tList',
      content: '- [ ] Item 1\n- [x] Item 2\n- [ ] Item 3',
      newLine: true
    }
  ];

Each element of the list is composed of:

• action: this is equal to the data-md-action attribute of the .md-editor__btn button element;
• content: this is the content to insert in the textarea; the keyword 'content' will be replaced by the selected text (if any);
• newLine: true if a new line needs to be inserted before the new content.

You can create your custom actions list and pass it to the MdEditor object during initialization (this will replace the default actions):

var customActions = [
  {
    action: 'heading',
    content: '###content',
    newLine: false
  },
  {
    action: 'code',
    content: '`content`',
    newLine: false
  },
  {
    action: 'link',
    content: '[content](url)',
    newLine: false
  }
];

new MdEditor(mdEditor, customActions);

Categories

• Forms > Form Elements
• Forms > Plugins

Bug report & feedback

Component Github page ↗