Oh-md NPM | npm.io

🍩 OH-MD

"Oh-md" - simplest md editor.

oh-md preview

Installation

You can install editor via npm or use css and js directly from unpkg.com.

Using npm

npm install --save oh-md

Using unkpg.com

Insert css file in your <head>:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/oh-md@latest/style.min.css"/>

Before closing </body> add js file:

<script type="text/javascript" src="https://unpkg.com/oh-md@latest/index.min.js"></script>

Initialization

In your html:

<body>
    ...
    <textarea id="textarea" name="myAwesomeTextArea></textarea>
    ...
</body>

In your js:

const element = document.getElementById('textarea');
const settings = {};
const editor = new Editor(element, settings);

editor.init();

Settings

Settings obejct can be provided as the second argument into editor instance, and contain optional nested objects: params, classes and controls.

params:

counter: true - Show symbol counter.
autosave: 30 - If name or id attribute is provided to element, value will be stored to local storage in specified interval (seconds).
wordwrap: { paramVisible: true, active: true } - Show word wrap button (paramVisible) and set activity status (active).
doubleReturn: { modificator: 'shiftKey', active: true } - In case of active param is sets to true, click on Enter button inserts double end of line (\n\n). By press modificator key and Enter button it'll insert single end of line (\n).

classes:

Append the list of class names to the "logical block" of an editor.

container: ['someClassName'],
area: ['someClassName'],
controls: ['someClassName'],
params: ['someClassName'],

controls:

An array of controls should contain objects of type Control with this following structure:

{
    control: 'italic',
    hotkey?: {
        default: {
            modificator: 'ctrlKey',
            key: 'i',
        },
        mac: {
            modificator: 'metaKey',
            key: 'i',
        },
    },
}

List of possible controls: bold, italic, strike, code, ordered_list, unordered_list, quote, heading, fullscreen, preview, image, link. separator control can be used as a delimiter to separate controls by groups. modificator can be ctrlKey or altKey, or shiftKey or metaKey.