Home

Awesome

🍩 OH-MD

"Oh-md" - simplest md editor. Demo

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:

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.

<details> <summary>Initialization example.</summary> <p> <pre> const editor = new Editor(element, { params: { counter: false, autosave: 5, wordwrap: { paramVisible: false, active: true }, doubleReturn: { modificator: 'shiftKey', active: true } }, classes: { container: ['myAwesomeContainer'], area: ['myAwesomeArea'], controls: ['myAwesomeControls'], params: ['myAwesomeControls'], }, controls: [ { control: 'bold', hotkey: { default: { modificator: 'ctrlKey', key: 'b', }, mac: { modificator: 'metaKey', key: 'b', }, }, }, { control: 'italic', hotkey: { default: { modificator: 'ctrlKey', key: 'i', }, mac: { modificator: 'metaKey', key: 'i', }, }, }, { control: 'heading', hotkey: { default: { modificator: 'ctrlKey', key: 'h', }, mac: { modificator: 'metaKey', key: 'h', }, }, }, { control: 'strike', hotkey: { default: { modificator: 'ctrlKey', key: 'd', }, mac: { modificator: 'metaKey', key: 'd', }, }, }, { control: 'separator', }, { control: 'ordered_list', hotkey: { default: { modificator: 'ctrlKey', key: 'o', }, mac: { modificator: 'metaKey', key: 'o', }, }, }, { control: 'unordered_list', hotkey: { default: { modificator: 'ctrlKey', key: 'u', }, mac: { modificator: 'metaKey', key: 'u', }, }, }, { control: 'separator', }, { control: 'quote', hotkey: { default: { modificator: 'ctrlKey', key: '\'', }, mac: { modificator: 'metaKey', key: '\'', }, }, }, { control: 'code', hotkey: { default: { modificator: 'ctrlKey', key: 'k', }, mac: { modificator: 'metaKey', key: 'k', }, }, }, { control: 'link', hotkey: { default: { modificator: 'ctrlKey', key: 'l', }, mac: { modificator: 'metaKey', key: 'l', }, }, }, { control: 'image', hotkey: { default: { modificator: 'ctrlKey', key: 'g', }, mac: { modificator: 'metaKey', key: 'g', }, }, }, { control: 'separator', }, { control: 'preview', hotkey: { default: { modificator: 'ctrlKey', key: 'm', }, mac: { modificator: 'metaKey', key: 'm', }, }, }, { control: 'fullscreen', hotkey: { default: { modificator: 'ctrlKey', key: 'f', }, mac: { modificator: 'metaKey', key: 'f', }, }, }, ] });

editor.init();

editor.text = '# Header here\n\nSome text';

console.log(editor.text); console.log(editor.html); </pre>

</p> </details>

Methods

Editor provide small api: