"Oh-md" - simplest md editor. Demo
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>
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 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 <textarea> 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.
Initialization example.
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);
Editor provide small api:
-
editor.html- getter, return current textarea value as html. -
editor.text- getter, return current textarea value as text. -
editor.text- setter, sets new textarea value. -
editor.disabled- getter, return disabled status of the editor instance. -
editor.disabled- setter, sets disabled status for the editor instance.