Content and Files

This page shows how to read and write MDEditor content: initializing, getting the text, clearing, opening Markdown files, exporting, and the save callback.

Methods

Method	Description
`init(text?, withFocus = true, set = true)`	Rebuilds all rows from `text` (or the not-yet-used `defaultContent`); when `set` is truthy an undo entry is recorded
`text`	Read-only property returning the rows' `innerText` joined with `\n`
`clear()`	Calls `init()` to empty the editor and updates the preview
`selectAll()`	Selects all text from the first row to the last
`openfile(file)`	Reads a `File` with `FileReader`, loads it, then updates the preview; without an argument it shows `alert("請選擇檔案")`
`download(type = "md")`	Exports a file; `type` is `"md"` or `"html"`, anything else is ignored
`save()`	Runs the save flow described below
`unsave()`	Sets `data-saved` to `0` on the editor and the bound viewer
`changeMode(mode = "light")`	Switches the theme; see Theming

init() clears the container's innerHTML before rebuilding, recreating the toolbar as well. Called directly it does not update the preview; follow it with editor.viewer.init() when needed.

Opening a File

<input type="file" accept=".md" onchange="editor.openfile(this.files[0])">

The text read in is trimmed, and plain and non-breaking spaces are normalized to plain spaces. openfile() calls clear() first, so the previous content stays in the undo history.

Exporting

`type`	File name	Content
`"md"`	`NanoMD-<timestamp>.md`	`editor.text.trim()`
`"html"`	`NanoMD-<timestamp>.html`	A full HTML document: `<section class="pd-md-viewer">` wrapping the extended-mode conversion, referencing `NanoMD-output.css` on the CDN (pinned to 1.11.6), Material Symbols and code-prettify

The exported HTML does not load Mermaid, so Mermaid blocks appear as source text. The file is downloaded as an application/octet-stream Blob.

Save Flow

save() (also bound to Cmd/Ctrl+S) behaves according to autosave and event.save:

`autosave`	`event.save`	Behavior
Truthy	A function	Calls `event.save(editor.text)`
Truthy	Not set	Opens the export dialog (Markdown / HTML / Cancel)
False	A function	Updates the preview, then calls `event.save(editor.text)`
False	Not set	Only updates the preview
Either	Explicitly `null`	Returns `false` and does nothing else (with `autosave` false the preview is still updated first)

const editor = new MDEditor({
    id: "editor",
    event: {
        save: (text) => fetch("/api/save", { method: "POST", body: text })
    }
});