Editor Options

This page lists every option new MDEditor(config) accepts, its default, and how it actually takes effect.

Construction

const editor = new MDEditor({
    id: "editor",
    defaultContent: "# Hello",
    hotKey: true,
    autosave: true,
    preventRefresh: false,
    tabPin: false,
    style: { mode: "auto", fill: true, showRow: true },
    event: { save: (text) => {}, upload: async () => ({ href: "", alt: "" }) }
});

Behavior Options

Option	Type	Default	Description
`id`	`string`	None	Container element ID; if not found, a detached `<section>` is created; get it from `editor.body` and insert it yourself
`defaultContent`	`string`	`""`	Initial Markdown, trimmed first; cleared after the first `init()` consumes it
`hotKey`	`boolean`	`true`	Enables formatting shortcuts; undo, save, Tab and other editing keys are unaffected; see Keyboard Shortcuts
`autosave`	`boolean`	`true`	Updates the preview after input; when `false`, only `save()` updates it and the toolbar gains a "save and preview" button
`preventRefresh`	`boolean`	`false`	When truthy, registers a `beforeunload` guard and blocks `F5` and `Cmd/Ctrl+R` on the whole document
`tabPin`	`boolean` \| `0`/`1`	`false`	Keeps the toolbar visible; the toolbar's pin button can toggle it later
`wrap`	`boolean` \| `0`/`1`	`true`	Word wrap; in v1.11.6 `false`/`0` is overridden by `\|\| 1`, so wrap always starts on and can only be turned off from the toolbar
`event.save`	`function(text)`	None	Save callback receiving the editor's plain text; when set to `null`, `save()` returns `false` immediately
`event.upload`	`async function()`	None	When present, the toolbar shows an image upload button; see Editor Toolbar

Style Options

Option	Default	Description
`style.mode`	`"auto"`	`"auto"` / `"light"` / `"dark"`, case-insensitive; see Theming
`style.fill`	`true`	Written to `data-fill` so the container fills its parent
`style.fontFamily`	`"'Roboto Mono', monospace"`	Editor font
`style.showRow`	`true`	Written to `data-row` to show line numbers
`style.placeholder.text`	`"Type here ..."`	Hint shown when the last row is empty
`style.placeholder.color`	`"#bfbfbf"`	Hint color
`style.focus.backgroundColor`	`"#0000ff1a"`	Background of the current row
`style.focus.color`	`"#0000ffff"`	Text and caret color of the current row

Font, placeholder and focus colors are inserted into <head> as a <style> element using the global .pd-md-editor selector. With several editors on one page, the last one created overrides the earlier ones.

Instance Properties

Property	Type	Description
`body`	`HTMLElement`	The editor container (`contentEditable`); each row is a `<div>`
`text`	`string` (read-only)	Rows' `innerText` joined with `\n`, excluding the toolbar
`viewer`	`MDViewer`	The bound viewer; set automatically by `MDViewer`'s `sync.editor`
`deployKey`	`string`	Used only by the deploy feature on nanomd.pardn.io

Deprecated top-level options (mode, fillMode, placeholder, ...) are listed in Deprecations.