# Editor Options

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

## Construction

```javascript
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](/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](/editor-toolbar) |

## Style Options

| Option | Default | Description |
|---|---|---|
| `style.mode` | `"auto"` | `"auto"` / `"light"` / `"dark"`, case-insensitive; see [Theming](/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](/deprecations).