Easy MarkDown Editor


A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

A fork of SimpleMDE


GitHub NPM


The default editor

    new EasyMDE({
        autoDownloadFontAwesome: false,
        element: document.getElementById('mde-demo'),
        initialValue: '# EasyMDE \nGo ahead, play around with the editor! Be sure to check out **bold**, *italic* and ~~strikethrough~~ styling, [links](https://google.com) and all the other features. You can type the Markdown syntax, use the toolbar, or use shortcuts like `ctrl-b` or `cmd-b`.'


    new EasyMDE({
        autoDownloadFontAwesome: false,
        autosave: {
            enabled: true,
            delay: 1000,
            uniqueId: 'mde-autosave-demo'
        element: document.getElementById('mde-autosave-demo'),
        initialValue: '## Autosave \nThis editor automatically saves its contents every second!'

Toolbar customization

    new EasyMDE({
        autoDownloadFontAwesome: false,
        showIcons: ['strikethrough', 'code', 'table', 'redo', 'heading', 'undo', 'heading-bigger', 'heading-smaller', 'heading-1', 'heading-2', 'heading-3', 'clean-block', 'horizontal-rule'],
        element: document.getElementById('mde-toolbar-demo'),
        initialValue: '## Toolbar \nHere you can see all the buttons available for the toolbar.'

Custom toolbar functions

        new EasyMDE({
            autoDownloadFontAwesome: false,
            toolbar: [{
                name: "bold",
                action: EasyMDE.toggleBold,
                className: "fa fa-bolt",
                title: "Bold",
            }, '|', { // Separator
                name: "alert",
                action: (editor) => {
                    alert('This is from a custom button action!');
                    // Custom functions have access to the `editor` instance.
                className: "fa fa-star",
                title: "A Custom Button",
            }, '|', {
                name: "link",
                action: 'https://github.com/Ionaru/easy-markdown-editor',
                className: "fa fab fa-github",
                title: "A Custom Link",
            }, '|', {
                name: "Dropdown",
                className: "fa fas fa-arrow-down",
                title: "A dropdown menu",
                children: [{
                    name: 'Left',
                    className: "fa fas fa-arrow-left",
                    action: () => alert('Left'),
                }, {
                    name: 'Right',
                    className: "fa fas fa-arrow-right",
                    action: () => alert('Right'),
                }, {
                    name: 'Up',
                    className: "fa fas fa-arrow-up",
                    action: () => alert('Up'),
            element: document.getElementById('mde-custom-toolbar-demo'),
            initialValue: '## Custom Toolbar \nCustom functions, icons and buttons can be defined for the toolbar.'