Component – Markdown Editor

A minimal editor to create markdown content.Download + DemoView DemoDownload ComponentHow to
Use this component to write markdown content.
You can initialize the editor using the MdEditor object:
var mdEditor = document.getElementsByClassName(‘md-edito…


This content originally appeared on CodyHouse and was authored by CodyHouse

A minimal editor to create markdown content.Markdown Editor

Download + Demo

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


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2022-03-15T14:14:55+00:00) Component – Markdown Editor. Retrieved from https://www.scien.cx/2022/03/15/component-markdown-editor/

MLA
" » Component – Markdown Editor." CodyHouse | Sciencx - Tuesday March 15, 2022, https://www.scien.cx/2022/03/15/component-markdown-editor/
HARVARD
CodyHouse | Sciencx Tuesday March 15, 2022 » Component – Markdown Editor., viewed ,<https://www.scien.cx/2022/03/15/component-markdown-editor/>
VANCOUVER
CodyHouse | Sciencx - » Component – Markdown Editor. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/15/component-markdown-editor/
CHICAGO
" » Component – Markdown Editor." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2022/03/15/component-markdown-editor/
IEEE
" » Component – Markdown Editor." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2022/03/15/component-markdown-editor/. [Accessed: ]
rf:citation
» Component – Markdown Editor | CodyHouse | Sciencx | https://www.scien.cx/2022/03/15/component-markdown-editor/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts