⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳

Projects

Progress value is 30%

Markdown Editor

A minimal editor to create markdown content.

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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);

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.