TinyMDE

TinyMDE is a simple markdown editor with syntax highlighting and a tiny footprint. It has NO dependencies and it provides powerful features designed to improve the writing experiences on the web.

Features:

• Tiny footprint.
• Written in plain JavaScript.
• Syntax highlighting.
• Markdown toggle.
• Keyboard shortcuts.
• Inline image uploads (drag/drop)
• Tabs to space.
• New list items.
• Extensible.

Getting started:

TBC.

Configuration:

| Param | Description | Default | |:----------|:-------------|:------| | showToolbar | Shows the default toolbar. | true | | showWordCount | Shows the word count (default toolbar required). | true | | toggleToolbar | Hides the toolbar when the user starts typing (reappears when the mouse moves). | false |

The configuration object should be passed to the constructor function:

const tinymde = new TinyMDE({
    showToolbar: false
});

API:

setContent(content: string)

This function overrides the text in the editor. It's often used when the editor first initializes. For example:

tinymde.setContent("**Hello World!**");

Note that any HTML tags will be escaped and rendered as plain text.

getContent()

This function retrieves the content from the editor as plain text.

tinymde.setContent("**TinyMDE**");
tinymde.getContent(); // returns **TinyMDE** 

executeCommand(command: string, value: string | number | optional)

This function executes a command. It's often used for implementing a custom UI.

tinymde.executeCommand("header", 2); // makes current selection heading 2

Supported commands:

• bold
• italic
• strikethrough
• header
• unordered-list
• ordered-list
• blockquote
• link
• image

addEventListener(event: string, callback: function)

This function lets you listen to editor events. Currently implemented:

• on-change - the callback is invoked when the document changes.

tinymde.addEventListener("on-change", (content) => {
    // ...
});

registerShortcut(keys: string, modifiers: string, callback: function)

This function lets you register custom keyboard shortcuts. It accepts keys and modifiers separated by a comma and a callback.

A common use-case for a custom shortcut is saving the text. Suppose you want to trigger a save function when the user presses ctrl + s:

tinymde.registerShortcut("s", "ctrl", (event) => {
    event.preventDefault();
    const content = tinymde.getContent();
    // save the content
});

Supported modifiers:

• shift
• alt
• ctrl

destory()

This function deletes the HTML element TinyMDE injects, and reset the shortcut helper.

If you're using TinyMDE in the context of a single page application, you should call this function when the page/component that initialized it is destroyed:

useEffect(() => {
    tinyMDE = new TinyMDE("#tinymde");
    tinyMDE.setContent(content);
    return () => tinyMDE.current.destroy();
}, []);