Easy MarkDown Editor

v2.7.0

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


Links

GitHub NPM

Settings

The default editor


    new EasyMDE({
        autoDownloadFontAwesome: false,
        element: document.getElementById('mde-demo'),
        initialValue: '# EasyMDE \n Go 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`.'
    });
    

Autosaving


    new EasyMDE({
        autoDownloadFontAwesome: false,
        autosave: {
            enabled: true,
            delay: 1000,
            uniqueId: 'mde-autosave-demo'
        },
        element: document.getElementById('mde-autosave-demo'),
        initialValue: '## Autosave \n This 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 \n Here 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",
            }],
            element: document.getElementById('mde-custom-toolbar-demo'),
            initialValue: '## Custom Toolbar \n Custom functions, icons and buttons can be defined for the toolbar.'
        });