# 82editor documentation (v1.4.0)

> A light, free (MIT) WYSIWYG HTML editor for Korean sites. Zero dependencies, IME-safe Korean input, clean paste from Word, Google Docs and Hangul (HWP). Summary: https://82editor.com/llms.txt

---

# Getting started

> Put 82editor into a write form in five minutes.

Source: https://82editor.com/en/docs/getting-started/

82editor is a dependency-free JavaScript editor. A PHP or JSP board without a build step needs two CDN lines; an npm project needs one package. No license key, no sign-up, no payment.

## From the CDN

The quickest path. Keep your existing `<textarea>`: the editor takes its place, and when the form submits the HTML goes out as the textarea value.

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>

<textarea id="content" name="content"></textarea>
<script>
  Editor82.createEditor('#content', { toolbar: 'board', height: 400 });
</script>
```

## From npm

```sh
npm i @82editor/core
```

```js
import { createEditor } from '@82editor/core';
import '@82editor/core/styles.css';

const editor = createEditor('#editor', {
  placeholder: 'Write something',
  toolbar: 'board',
  height: 400,
});

editor.on('change', (html) => console.log(html));
```

## Reading and writing content

```js
const html = editor.getHTML();   // HTML to save
editor.setHTML('<p>Loaded post</p>');
editor.getText();                // plain text
editor.isEmpty();                // nothing written yet?
```

> Sanitize the HTML again on your server before saving it: requests that skip the browser can contain anything. See [Security](https://82editor.com/en/docs/security/).

## Next

- [All options](https://82editor.com/en/docs/options/)
- [Customize the toolbar](https://82editor.com/en/docs/toolbar/)
- [Upload images to your server](https://82editor.com/en/docs/image-upload/)
- [React](https://82editor.com/en/docs/react/) · [Vue](https://82editor.com/en/docs/vue/) · [Svelte](https://82editor.com/en/docs/svelte/) · [Angular](https://82editor.com/en/docs/angular/)

---

# CDN files

> Pinned and latest URLs, and what each file is.

Source: https://82editor.com/en/docs/cdn/

82editor.com serves the files itself. Versioned URLs never change, so browsers cache them for a year. Use them on production sites.

| File | What it is |
| --- | --- |
| `/cdn/v1.4.0/82editor.min.js` | For a script tag. Defines the global `Editor82`. |
| `/cdn/v1.4.0/82editor.esm.js` | A single ES module for `<script type="module">`. |
| `/cdn/v1.4.0/82editor.css` | Editor styles (light and dark themes). |
| `/cdn/latest/…` | Always the newest version, cached for an hour. For trying things out. |

## As an ES module

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<div id="editor"></div>
<script type="module">
  import { createEditor } from 'https://82editor.com/cdn/v1.4.0/82editor.esm.js';
  createEditor('#editor');
</script>
```

> You may also download the files and host them yourself. It is MIT licensed: change and redistribute freely.

---

# Textarea and forms

> Upgrade an existing form without touching the server.

Source: https://82editor.com/en/docs/textarea-form/

Pass a `<textarea>` to `createEditor` and the editor hides it and takes its place. The textarea value is kept in sync on every change and right before the form submits, so your server keeps reading the same field.

```html
<form method="post" action="/board/write">
  <input name="title" required>
  <textarea id="content" name="content"></textarea>
  <button>Post</button>
</form>
<script>
  const editor = Editor82.createEditor('#content', { toolbar: 'board' });
  document.querySelector('form').addEventListener('submit', (e) => {
    if (editor.isEmpty()) { e.preventDefault(); editor.focus(); }
  });
</script>
```

- Whatever the textarea already holds becomes the initial content (edit screens).
- The browser cannot run `required` on the editor; check `isEmpty()` as above.
- `editor.destroy()` shows the textarea again with the latest HTML.

---

# Headings

> The paragraph format menu and shortcuts for headings 1-4.

Source: https://82editor.com/en/docs/headings/

Turn paragraphs into headings to break up a long post. They are saved as `<h1>`-`<h4>`, so search engines and screen readers see the structure.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList',
});
```

## How to change a paragraph

- The `heading` menu offers Paragraph, Heading 1, Heading 2, Heading 3 and Quote. Its label shows the format at the caret.
- `Ctrl`+`Alt`+`1`-`4` for headings 1-4, `Ctrl`+`Alt`+`0` for a paragraph. Pressing the same heading key again turns it back into a paragraph.
- At the start of an empty line, type `# ` to `#### ` ([Markdown input](https://82editor.com/en/docs/markdown/)).
- `Backspace` at the very start of a heading turns it into a paragraph and keeps the text.
- `Enter` at the end of a heading starts a normal paragraph.

Heading 4 is not in the menu: use the shortcut or Markdown input. A selection over several paragraphs changes them all. Headings also work inside list items and table cells.

## Presets and phones

`heading` is on the first row of the `basic`, `board` (default) and `full` presets, not in `minimal`. It is near the front of the phone toolbar too.

## Saved HTML

```html
<h2>Getting here</h2>
<p>Put the caret …</p>
<h3>Opening hours</h3>
```

Inserting a table of contents (`toc`) gives headings an `id`; see [Bookmarks and TOC](https://82editor.com/en/docs/bookmarks/). The `a11y` check points out skipped levels, such as a heading 4 straight after a heading 2.

## API

```js
editor.exec('h2');          // heading 2 (again: back to paragraph)
editor.exec('paragraph');
editor.exec('block', 'h3'); // what the menu runs
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | toolbar item | — | Paragraph format menu: paragraph, headings 1-3, quote |
| `markdownShortcuts` | boolean | `true` | Typing `# ` makes a heading. `false` turns it off. |

---

# Fonts, sizes, line height

> Font, size (pt or px) and line-height menus, and their lists.

Source: https://82editor.com/en/docs/fonts/

Change the font and size of selected text, and the line height of paragraphs. The menu lists can be replaced to fit your site.

```js
createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold',
  fontSizes: [10, 12, 14, 18, 24],
  fontSizeUnit: 'px',
});
```

## Font (fontFamily)

The default list is Pretendard, Malgun Gothic, NanumGothic, NanumMyeongjo, Gulim, Dotum, Batang, Gungsuh, Arial, Georgia, Times New Roman and Courier New. "Default font" at the top removes the font.

Each `fontFamilies` entry is `'Menu label=CSS font-family'`. Without `=`, the first family name is the label.

```js
createEditor('#editor', {
  fontFamilies: [
    'Body=Inter, sans-serif',
    'Serif=Merriweather, Georgia, serif',
    'Courier New, monospace', // label "Courier New"
  ],
});
```

> The editor does not load web fonts. Fonts readers may not have installed must be loaded as web fonts on your view page too.

## Size (fontSize)

The default list is 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28 and 36, in `pt` (familiar to Korean word-processor users). Set `fontSizeUnit: 'px'` for pixels. Where no size is set, the box shows the rendered size in that unit.

## Line height (lineHeight)

Line height applies to whole paragraphs. The defaults are 100, 130, 150, 160, 180, 200 and 250 (%); "Default" removes it.

## With nothing selected

Picking a font or size with no selection applies it to what you type next.

## Presets

- `board` (default): `fontSize` on the first row; `fontFamily` and `lineHeight` under ⋯ more
- `full`: all three on the first row
- `basic`, `minimal`: none

## Saved HTML

```html
<p style="line-height: 180%">
  <span style="font-size: 18px">18px text</span>
  <span style="font-family: Georgia, serif">Georgia</span>
</p>
```

To match the editing area to your view page, use `contentStyle` ([Content style](https://82editor.com/en/docs/content-style/)).

## API

```js
editor.exec('fontSize', '14pt');
editor.exec('fontFamily', 'Georgia, serif');
editor.exec('lineHeight', '160%');
editor.exec('fontSize', ''); // remove
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fontFamily` | toolbar item | — | Font menu |
| `fontSize` | toolbar item | — | Size menu |
| `lineHeight` | toolbar item | — | Line height menu (per paragraph) |
| `fontFamilies` | string[] | 12 Korean-first fonts | `'Label=CSS'` or a CSS value |
| `fontSizes` | number[] | `[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36]` | Numbers in the size menu |
| `fontSizeUnit` | `'pt' \| 'px'` | `'pt'` | Size unit |
| `lineHeights` | number[] | `[100, 130, 150, 160, 180, 200, 250]` | Percent values in the line height menu |

---

# Bold, italic, underline

> Bold, italic, underline, strikethrough, sub/superscript, inline code.

Source: https://82editor.com/en/docs/text-styles/

The basic text format buttons. Select text and press one, or press it first and keep typing. Press again to turn it off.

```js
createEditor('#editor', {
  toolbar: 'bold italic underline strike | subscript superscript code',
});
```

## Buttons and shortcuts

| Toolbar name | Format | Shortcut | Saved as |
| --- | --- | --- | --- |
| `bold` | Bold | `Ctrl`+`B` | `<strong>` |
| `italic` | Italic | `Ctrl`+`I` | `<em>` |
| `underline` | Underline | `Ctrl`+`U` | `<u>` |
| `strike` | Strikethrough | `Ctrl`+`Shift`+`X` | `<s>` |
| `subscript` | Subscript | `Ctrl`+`,` | `<sub>` |
| `superscript` | Superscript | `Ctrl`+`.` | `<sup>` |
| `code` | Inline code | `Ctrl`+`E` | `<code>` |

On macOS use `⌘`. Buttons show as pressed when the caret is inside that format. Pressing `code` inside inline code removes it.

Markdown-style typing works too: `**bold**`, `*italic*`, `~~strike~~`, ``code`` ([Markdown input](https://82editor.com/en/docs/markdown/)).

## Presets and the selection toolbar

- `board` (default): bold, underline, strikethrough on the first row; italic and sub/superscript under ⋯ more. No inline code.
- `full`: bold, italic, underline, strikethrough on the first row; sub/superscript and inline code under more
- `basic`: bold, italic, underline, strikethrough. `minimal`: bold, italic, underline
- On phones only bold is on the main row; the rest is under ⋯.

The toolbar that pops up over a selection ([bubble toolbar](https://82editor.com/en/docs/bubble-toolbar/)) also has bold, italic, underline, strikethrough and inline code, even when the main toolbar doesn't.

## Saved HTML

Browser-made `<b>`, `<i>` and `<strike>` are saved as `<strong>`, `<em>` and `<s>`.

```html
<p><strong>Bold</strong>, <em>italic</em>, <u>underline</u>, <s>strikethrough</s>, H<sub>2</sub>O, <code>npm install</code></p>
```

## API

```js
editor.exec('bold');
editor.queryState('bold'); // true when the caret is in bold text
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `bold` `italic` `underline` `strike` | toolbar item | — | Bold, italic, underline, strikethrough |
| `subscript` `superscript` | toolbar item | — | Subscript, superscript |
| `code` | toolbar item | — | Inline code (multi-line: [code blocks](https://82editor.com/en/docs/code-blocks/)) |
| `bubbleToolbar` | boolean | `true` | Format toolbar over a selection |
| `markdownShortcuts` | boolean | `true` | Typing rules such as `**bold**` |

---

# Text and highlight colors

> Text color, highlight, custom palettes, recent and custom colors.

Source: https://82editor.com/en/docs/colors/

`color` sets the text color, `highlight` the background behind the text, like a marker pen. Use them to make a key sentence stand out.

```js
createEditor('#editor', {
  toolbar: 'bold | color highlight',
  colors: ['#000000', '#e03131', '#1c7ed6', '#2b8a3e', '#f08c00'],
});
```

## The palette

- "Automatic" (text) or "None" (highlight) at the top removes the color.
- Colors you use appear in a "Recent" row, up to 8 (kept in this browser's localStorage).
- "Custom" takes a hex code like `#1c7ed6` or opens the system color picker.
- The bar under the toolbar button shows the color at the caret.

The `colors` option replaces the text color palette with your site colors. The same list is used for table cell backgrounds. The highlight button uses its own 13 marker colors.

## Presets and phones

`color` and `highlight` are on the first row of `basic`, `board` and `full`. On phones the text color is on the main row and highlight is under ⋯. Both are also in the [selection toolbar](https://82editor.com/en/docs/bubble-toolbar/).

## Saved HTML

Colors are saved as `<span>` with a `style`. Browsers may write hex colors as `rgb()`.

```html
<span style="color: rgb(224, 49, 49)">October 31</span>
<span style="background-color: rgb(255, 243, 191)">Late papers …</span>
```

> Black text may be hard to read on a dark view page. Use colors sparingly, and don't let color alone carry the meaning: add bold or similar too.

## API

```js
editor.exec('color', '#e03131');
editor.exec('highlight', '#fff3bf');
editor.exec('color', ''); // remove
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | toolbar item | — | Text color |
| `highlight` | toolbar item | — | Highlight (background) color |
| `colors` | string[] | 13 built-in colors | Colors for the text color and table cell palettes (CSS colors) |

---

# Alignment and indent

> Left, center, right and justify, the align menu, indent and outdent.

Source: https://82editor.com/en/docs/alignment/

Center or right-align paragraphs and add or remove space in front of them. Alignment applies to whole paragraphs, not to words.

```js
createEditor('#editor', {
  toolbar: 'alignMenu | alignLeft alignCenter alignRight alignJustify | indent outdent',
});
```

## Alignment

| Toolbar name | Action | Shortcut |
| --- | --- | --- |
| `alignLeft` | Align left (removes alignment) | `Ctrl`+`Shift`+`L` |
| `alignCenter` | Center | `Ctrl`+`Shift`+`E` |
| `alignRight` | Align right | `Ctrl`+`Shift`+`R` |
| `alignJustify` | Justify | `Ctrl`+`Shift`+`J` |
| `alignMenu` | All four in one menu button | — |
| `alignCenterToggle` | One button that switches center and left | — |

With an image selected, left, center and right align the image instead of the paragraph ([Images](https://82editor.com/en/docs/images/)).

## Indent and outdent

- `indent` / `outdent`, shortcuts `Ctrl`+`]` / `Ctrl`+`[`
- Normal paragraphs get 40px more or less left margin per step.
- In a list, the item moves into or out of a nested list. `Tab` / `Shift`+`Tab` do the same in lists.
- Table cells are not indented.

## Presets and phones

- `board` (default) and `basic`: `alignMenu` on the first row; in `board`, indent and outdent are under ⋯ more
- `full`: four align buttons plus indent and outdent on the first row
- The phone toolbar shows a single `alignCenterToggle` button to save room.

## Saved HTML

```html
<p style="text-align: center">Centered</p>
<p style="text-align: right">Right</p>
<p style="margin-left: 40px">Indented</p>
```

## API

```js
editor.exec('alignCenter');
editor.exec('align', 'justify'); // what the menu runs: left | center | right | justify
editor.exec('indent');
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `alignLeft` `alignCenter` `alignRight` `alignJustify` | toolbar item | — | Align buttons |
| `alignMenu` | toolbar item | — | Align menu (one button) |
| `alignCenterToggle` | toolbar item | — | Toggle centering |
| `indent` `outdent` | toolbar item | — | Indent, outdent |

---

# Lists

> Bulleted and numbered lists, nesting, and list styles like a. b. c.

Source: https://82editor.com/en/docs/lists/

Bulleted and numbered lists for listing things. The `listStyle` menu changes the markers to a. b. c., i. ii. iii., Korean 가. 나. 다. and more.

```js
createEditor('#editor', {
  toolbar: 'bulletList orderedList listStyle | indent outdent',
});
```

## Making lists

- `bulletList` `Ctrl`+`Shift`+`8`, `orderedList` `Ctrl`+`Shift`+`7`. Press again to remove the list.
- At the start of an empty line, type `- `, `* ` or `+ ` for bullets, `1. ` or `1) ` for numbers.
- `Tab` nests an item one level deeper, `Shift`+`Tab` moves it out. The `indent` / `outdent` buttons do the same.
- `Enter` on an empty item ends the list.

## List style (listStyle)

Choices: ● disc, ○ circle, ■ square, 1. 2. 3., 01. 02., a. b. c., A. B. C., i. ii. iii., I. II. III., 가. 나. 다., ㄱ. ㄴ. ㄷ. A numbered style on a bulleted list turns it into a numbered list and the other way round. Outside a list, it starts a new list in that style.

`listMenu` puts bullets, numbers and checklist into one menu button, for narrow toolbars.

## Presets and phones

- `bulletList` `orderedList`: first row of `minimal`, `basic`, `board` and `full`
- `listStyle`: only under ⋯ more in `full`
- On phones bullets are on the main row; numbered lists are under ⋯.

## Saved HTML

The default markers (disc, 1. 2. 3.) are saved without a style; others use `list-style-type`. If your view page CSS resets `list-style`, the markers may not show.

```html
<ul>
  <li>ID card</li>
  <li>Photo
    <ul><li>3×4 cm</li></ul>
  </li>
</ul>
<ol style="list-style-type: lower-alpha">
  <li>Fill in the form</li>
</ol>
```

## API

```js
editor.exec('bulletList');
editor.exec('listStyle', 'lower-alpha');
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `bulletList` | toolbar item | — | Bulleted list |
| `orderedList` | toolbar item | — | Numbered list |
| `listStyle` | toolbar item | — | List style menu |
| `listMenu` | toolbar item | — | Bullets, numbers and checklist in one menu |
| `markdownShortcuts` | boolean | `true` | Typing `- ` or `1. ` starts a list |

For to-do lists see [Checklists](https://82editor.com/en/docs/checklists/).

---

# Checklists

> To-do lists with boxes you click, and showing them on your view page.

Source: https://82editor.com/en/docs/checklists/

A list with a box in front of each item, for packing lists, to-dos and check items. Click a box to tick it; ticked items turn grey and get crossed out.

```js
createEditor('#editor', {
  toolbar: 'checklist bulletList orderedList',
});
```

## Making and ticking

- The `checklist` button or `Ctrl`+`Shift`+`9`. Inside a bulleted list it turns that list into a checklist; press again to go back.
- At the start of an empty line, `[ ] ` starts an empty box and `[x] ` a ticked one.
- Click the box at the left of an item to tick or untick it. This can be undone like any edit.
- New items made with `Enter` start unticked.
- In read-only mode the boxes don't change.

## Presets

On the first row of `full`, under ⋯ more in `board` (default), not in `basic` or `minimal`. Also in the `listMenu` menu.

## Saved HTML

```html
<ul data-checklist="">
  <li data-checked="true">Book the meeting room</li>
  <li data-checked="false">Send the slides</li>
</ul>
```

The boxes are drawn with CSS. Load `82editor.css` on your view page and give the element around the post `class="e82-view"` to get the same boxes, or draw them yourself:

```css
ul[data-checklist] { list-style: none; padding-left: 4px; }
ul[data-checklist] > li::before { content: '☐ '; }
ul[data-checklist] > li[data-checked='true']::before { content: '☑ '; }
ul[data-checklist] > li[data-checked='true'] { color: #6e7781; text-decoration: line-through; }
```

> When you sanitize again on the server, allow `data-checklist` on `ul` and `data-checked` on `li` ([Security](https://82editor.com/en/docs/security/)).

As Markdown, items come out as `- [x] Book the meeting room`.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `checklist` | toolbar item | — | Make or remove a checklist |
| `listMenu` | toolbar item | — | Bullets, numbers and checklist menu |
| `markdownShortcuts` | boolean | `true` | Typing rules `[ ] ` and `[x] ` |

---

# Links

> Add, edit and remove links; new tab, nofollow and linkRel.

Source: https://82editor.com/en/docs/links/

Attach an address to text or an image. The link dialog also lets you open it in a new tab and tell search engines not to follow it (nofollow).

```js
createEditor('#editor', {
  toolbar: 'bold | link unlink',
  linkRel: 'ugc',
});
```

## Adding a link

- Select text and press the `link` button or `Ctrl`+`K`. With nothing selected, the dialog also asks for the text to show (empty: the address is used).
- An address without a scheme like `example.com` gets `https://`; `name@example.com` becomes a `mailto:` link.
- Unsafe addresses such as `javascript:` are refused with a message.
- The address box suggests bookmarks in the post (places with an `id`) for `#bookmark` links ([Bookmarks and TOC](https://82editor.com/en/docs/bookmarks/)).
- Addresses typed in the text become links after a space or `Enter` ([auto link](https://82editor.com/en/docs/auto-replace/)). A pasted address becomes a link too.

## New tab and nofollow

"Open in a new tab" adds `target="_blank"` with `rel="noopener noreferrer"`. The nofollow checkbox adds `nofollow` to `rel`. `sponsored` and `ugc` set elsewhere are kept.

## rel on every link (linkRel)

For boards written by visitors, set `linkRel: 'nofollow ugc'`. `getHTML()` adds it to every `http(s)` link. Only `nofollow`, `sponsored` and `ugc` are accepted; the content being edited is not changed.

## Editing and removing

- With the caret in a link, a small bar shows the address plus open, edit and remove buttons.
- `Ctrl`+click opens a link in a new tab; `#bookmark` links jump to that spot in the post.
- `unlink`: with just a caret it removes the whole link; with a selection, only the selected part. The text stays.
- Selecting an image and adding a link makes the whole image a link ([Images](https://82editor.com/en/docs/images/)).

## Presets and phones

`link` is on the first row of every preset and of the phone toolbar. `unlink` is in no preset: the link bar and the dialog have remove buttons. The [selection toolbar](https://82editor.com/en/docs/bubble-toolbar/) has a link button too.

## Saved HTML

```html
<a href="https://82editor.com/">82editor home page</a>
<a href="https://example.com/" target="_blank" rel="nofollow noopener noreferrer">new tab + nofollow</a>
<!-- with linkRel: 'ugc', on output -->
<a href="https://82editor.com/" rel="ugc">82editor home page</a>
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `link` | toolbar item | — | Open the link dialog |
| `unlink` | toolbar item | — | Remove a link |
| `linkRel` | string | none | rel added to every http(s) link on output: `nofollow` `sponsored` `ugc` |
| `autoLink` | boolean | `true` | Typed addresses become links |

---

# Clear and copy formatting

> Clear formatting, the format painter, and changing letter case.

Source: https://82editor.com/en/docs/format-tools/

Strip formatting from text that came from somewhere else, or copy the look of one spot onto another.

```js
createEditor('#editor', {
  toolbar: 'bold color | clearFormat formatPainter caseChange',
});
```

## Clear formatting (clearFormat)

Removes bold, italic, underline, strikethrough, sub/superscript, inline code, text and highlight colors, font and size from the selection. Shortcut `Ctrl`+`\`. Links and paragraph formats such as headings, alignment and lists stay; code blocks are left alone. It needs a selection.

## Format painter (formatPainter)

- Put the caret in the text whose look you want and press `formatPainter`. A short message confirms the copy.
- Drag over the target text, or select it with `Shift`+arrow keys: its formatting is cleared and the copied one applied.
- Copied: bold, italic, underline, strikethrough, sub/superscript, text color, highlight, size and font. Paragraph formats like alignment or line height are not.
- It applies once. Press the button again or `Esc` to cancel before applying.

## Letter case (caseChange)

Turns the selected text into UPPERCASE, lowercase or Title Case.

## Presets

- `board` (default): `clearFormat` at the end of the first row, `formatPainter` under ⋯ more, no `caseChange`
- `full`: all three under more
- The [selection toolbar](https://82editor.com/en/docs/bubble-toolbar/) has clear formatting too.

Text pasted from Word or HWP is already cleaned on paste. For plain text, paste with `Ctrl`+`Shift`+`V` ([Paste cleanup](https://82editor.com/en/docs/paste/)).

## API

```js
editor.exec('clearFormat');
editor.exec('caseChange', 'upper'); // upper | lower | title
editor.exec('formatPainter');
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `clearFormat` | toolbar item | — | Clear formatting from the selection |
| `formatPainter` | toolbar item | — | Copy formatting and paint it once |
| `caseChange` | toolbar item | — | Letter case menu |

---

# Symbols, emoji, date

> Symbol table, searchable emoji picker, and inserting the current date.

Source: https://82editor.com/en/docs/special-chars/

Insert symbols that are not on the keyboard (※ ★ ① ㎡ ₩), emoji, and the current date and time.

```js
createEditor('#editor', {
  toolbar: 'specialChars emoji datetime',
});
```

## Symbols (specialChars)

A tabbed table: symbols, arrows, math, currency, circled and parenthesized characters (① ⑴ ㉠), units (㎏ ㎡ ℃), Korean jamo, and Greek/Latin.

## Emoji (emoji)

Seven tabs (smileys, people and hands, nature, food, activities, objects, symbols) and a search box that takes English or Korean words.

## Date and time (datetime)

Inserts the date and time at the moment you press it, formatted for the editor language, e.g. `October 21, 2026 at 03:20 PM` in English.

## Presets

In `board` (default) and `full`, all three are under ⋯ more. Not in `basic` or `minimal`.

## Saved HTML

All three insert plain characters, not images or tags. Emoji look a little different on each reader's device.

```html
<p>※ Notice ★ Floor 1, area 33㎡ 🎉</p>
```

> Some replacements happen while typing, such as `(c)` → © and `->` → →. See [Auto replace](https://82editor.com/en/docs/auto-replace/).

## API

```js
editor.exec('datetime');
editor.insertText('※');
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `specialChars` | toolbar item | — | Symbol table |
| `emoji` | toolbar item | — | Emoji picker with search |
| `datetime` | toolbar item | — | Insert the current date and time |

---

# Tables

> Insert tables, add and delete rows and columns, merge cells, header rows, cell colors, column widths.

Source: https://82editor.com/en/docs/tables/

For price lists, schedules and comparisons. Pick a size from the table button, then put the caret in the table to get its editing bar above it.

```js
createEditor('#editor', {
  toolbar: 'heading | bold color | table | undo redo',
});
```

## Inserting a table

- The `table` button opens a 10 × 10 grid. Hover to choose the size and click. From the keyboard, use the arrow keys and `Enter`.
- On an empty line, type `/` and pick "Table" for a 3 × 3 table ([Slash menu](https://82editor.com/en/docs/slash-menu/)).
- Tables copied from Excel, HWP or Word keep their structure, merged cells included ([Paste cleanup](https://82editor.com/en/docs/paste/)).

## The table bar

With the caret in a table, a bar shows above it. From the left:

| Button | What it does |
| --- | --- |
| Insert row above / below | Adds an empty row. A merged cell that spans across it grows by one. |
| Insert column left / right | Adds an empty column next to the caret. |
| Delete row / Delete column | Deletes the rows or columns of the caret (or of the selected cells). Deleting all of them removes the table. |
| Merge cells | Merges two or more selected cells. Their text is joined with line breaks. |
| Split cell | Splits a merged cell back into its cells. The text stays in the first one. |
| Header row | Turns the first row into `<th scope="col">` header cells (gray, bold), or back. |
| Cell color | Background of the selected cells (or the caret cell). Includes none, custom and recent colors. |
| Borders | 1px, 2px, 3px or none, for the selected cells or the whole table. Cells without borders show a dashed guide only while editing. |
| Vertical align | Top, middle or bottom. |
| Delete table | Removes the table and leaves an empty paragraph. |

## Selecting and moving

- Drag from one cell to another to select a rectangle of cells. Merged cells widen the rectangle as needed.
- `Tab` moves to the next cell, `Shift`+`Tab` to the previous one. `Tab` in the last cell adds a row.
- Point at the right edge of a cell and drag to resize the column (30px minimum). On the first drag every column is fixed at its current width, so only the dragged one changes.

## Saved HTML

The look is stored as inline styles, so the table looks the same on a page without any extra CSS.

```html
<div data-table-wrap="" style="overflow-x: auto">
  <table style="border-collapse: collapse; width: 100%"><tbody>
    <tr><th style="border: 1px solid #d0d5dd; …; background-color: #f2f4f7; font-weight: 600" scope="col">Plan</th>…</tr>
    <tr><td style="border: 1px solid #d0d5dd; padding: 6px 8px; vertical-align: top">Basic</td>…</tr>
  </tbody></table>
</div>
```

The outer `div[data-table-wrap]` comes from `responsiveOutput` (on by default): on narrow phone screens the table scrolls sideways instead of overflowing the page. It is taken off again when the HTML is loaded back into the editor.

## From code

Every button on the table bar is an `editor.exec()` command, so your own buttons and shortcuts can do the same.

```js
editor.exec('insertTable', '4x3');   // 4 rows, 3 columns
editor.exec('rowBelow');             // rowAbove, colLeft, colRight
editor.exec('deleteRow');            // deleteCol, deleteTable
editor.exec('mergeCells');           // splitCell
editor.exec('headerRow');
editor.exec('cellColor', '#fff3bf'); // '' removes the color
editor.exec('cellVAlign', 'middle'); // top | middle | bottom
editor.exec('tableBorder', '0');     // 0 | 1 | 2 | 3 (px)
```

## Presets and phones

The `table` button is on the first row of the `basic`, `board` (default) and `full` presets, not in `minimal`. On phones the default `board` toolbar keeps one row of essentials, so the table button moves under ⋯.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `table` | toolbar item | - | Insert a table (10 × 10 size grid) |
| `colors` | string[] | 20 cell colors | When set, both the text color palette and the cell color palette use this list. Unset, cells get their own palette of mostly light colors. |
| `responsiveOutput` | boolean | true | Wrap saved tables in a sideways-scrolling box. `false` saves the bare table. |

---

# Quotes

> Block quotes and four quote styles: side line, quotation marks, gray box, bordered box.

Source: https://82editor.com/en/docs/quotes/

For quoting someone, or to make one paragraph stand out. Picking a look from the `quoteStyle` menu makes a quote and styles it in one step.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | blockquote quoteStyle | undo redo',
});
```

## Making a quote

- The `blockquote` button or `Ctrl`+`Shift`+`B` wraps the paragraph at the caret (or the selected paragraphs) in a quote. Again to remove it.
- Type `>` and a space at the start of a paragraph (`markdownShortcuts`).
- The `heading` dropdown has "Quote" too.
- `Enter` on an empty last line leaves the quote. `Backspace` on an empty first line removes it.

## Quote styles

| Value | Name | Look |
| --- | --- | --- |
| `'line'` | Side line | A line on the left. The default, so no style is added to the saved HTML. |
| `'mark'` | Quotation marks | Centered, slightly larger text. The big quotation marks are drawn by the editor CSS. |
| `'box'` | Gray box | Light gray background, rounded corners, no side line |
| `'border'` | Bordered box | Thin gray border, rounded corners |

Inside a quote the menu also offers "Remove quote". Picking a style outside a quote turns the paragraph into a quote with that style.

## Saved HTML

```html
<blockquote><p>Side-line quote</p></blockquote>
<blockquote data-quote="box" style="border-left: 0; background-color: #f1f3f5; border-radius: 8px; padding: 12px 16px">
  <p>Gray box quote</p>
</blockquote>
```

> The side line and the big quotation marks come from CSS, not inline styles. Wrap the saved HTML in `<div class="e82-view">` and load 82editor.css on the reading page to match the editor, or style `blockquote` in your own CSS.

```js
editor.exec('blockquote');           // add / remove a quote
editor.exec('quoteStyle', 'box');    // line | mark | box | border; '' removes the quote
```

## Presets

The `board` and `full` presets put `quoteStyle` under ⋯. No preset has the `blockquote` button; add it to `toolbar` yourself if you want it.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `blockquote` | toolbar item | - | Add or remove a quote (`Ctrl`+`Shift`+`B`) |
| `quoteStyle` | toolbar item | - | Pick a quote style (side line, quotation marks, gray box, bordered box) |
| `markdownShortcuts` | boolean | true | Typing shortcuts, including `> ` for a quote |

---

# Callouts

> Colored boxes: info, tip, success, warning, danger.

Source: https://82editor.com/en/docs/callouts/

For notes, tips and warnings that should stand apart from the text. Wraps paragraphs in a colored box with an icon.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | callout | undo redo',
});
```

## How to use

- Pick a kind from the `callout` menu: the paragraph at the caret (or the selected paragraphs) goes into a box with an icon in front. On an empty line you type right after the icon.
- With the caret in a box, a bar shows above its right end. Another kind changes the color and icon; the trash button removes the box and keeps the text.
- Picking the same kind again, or `Backspace` at the very start of the box, also removes it.
- On an empty line, type `/` and pick "Callout" for an info box.
- A box can hold lists, tables and other blocks, and can sit inside a collapsible section.

## Kinds

| Value | Name | Icon | Background / line |
| --- | --- | --- | --- |
| `'info'` | Info | ℹ️ | #e7f5ff / #74c0fc |
| `'tip'` | Tip | 💡 | #fff9db / #fcc419 |
| `'success'` | Success | ✅ | #ebfbee / #69db7c |
| `'warning'` | Warning | ⚠️ | #fff4e6 / #ffa94d |
| `'danger'` | Danger | 🚫 | #fff5f5 / #ff8787 |

## Saved HTML

The look is stored as inline styles, so the box shows the same on a page without CSS and in e-mail. The icon is plain text at the start of the first paragraph.

```html
<div data-callout="tip" style="background-color: #fff9db; border-left: 4px solid #fcc419; border-radius: 8px; padding: 12px 16px; margin: 0.8em 0">
  <p>💡 Landscape photos show larger.</p>
</div>
```

```js
editor.exec('callout', 'warning'); // add a box or change its kind
editor.exec('callout', '');        // remove the box
```

## Presets

Under ⋯ in the `board` and `full` presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `callout` | toolbar item | - | Add a callout, change its kind, remove it |
| `slashMenu` | boolean | true | The "Callout" entry of the `/` menu |

---

# Collapsible sections

> Sections that show a title and open on click (details).

Source: https://82editor.com/en/docs/details/

For answers, spoilers or long side notes that only some readers want. It is saved as a standard `<details>` element, so it folds and opens on any page without scripts.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | details | undo redo',
});
```

## How to use

- On an empty line, press `details`: a section goes in with its title "Show more" selected, so you can type the title right away.
- With paragraphs selected, the button folds them into a section.
- Inside a section, the button removes it: the title becomes a paragraph and the content stays. `Backspace` at the start of the title does the same.
- On an empty line, type `/` and pick "Collapsible section".

## Always open while editing

Hidden content is hard to edit, so sections stay open in the editor and clicking the title does not fold them. A section that is saved folded shows ▸ before its title.

With the caret in a section, a bar shows above its right end:

- **Start expanded**: adds `open` to the saved HTML so readers see it open. Off (folded) by default.
- **Remove collapsible section**: keeps the content without the fold.

In read-only mode (`readOnly: true` or `setReadOnly(true)`) sections fold as they will be saved, and readers can open them.

## Saved HTML

```html
<details style="border: 1px solid #d0d7de; border-radius: 8px; padding: 8px 14px; margin: 0.8em 0">
  <summary style="font-weight: 600">Show the answer</summary>
  <p>Hallasan (1,947 m)</p>
</details>
```

The default title of a new section is the UI string `detailsSummary`; change it with the `locale` option.

```js
createEditor('#editor', {
  locale: { detailsSummary: 'Read more' },
});

editor.exec('details');      // add / remove
editor.exec('detailsOpen');  // toggle "start expanded"
```

## Presets

Under ⋯ in the `board` and `full` presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `details` | toolbar item | - | Add or remove a collapsible section |
| `locale.detailsSummary` | string | 'Show more' | Title of a new section |
| `readOnly` | boolean | false | Read-only mode really folds and opens sections |

---

# Dividers and page breaks

> Horizontal lines, six divider styles, and page breaks for printing.

Source: https://82editor.com/en/docs/dividers/

Draw a line where the text changes topic, or make the next part start on a new page when printed.

```js
createEditor('#editor', {
  toolbar: 'bold | hr hrStyle pageBreak | undo redo',
});
```

## Dividers

The `hr` button inserts a plain `<hr>` at the caret. The `hrStyle` dropdown inserts one in a chosen style. On an empty line you can also type `/` and pick "Horizontal line".

| Value | Name | Saved style |
| --- | --- | --- |
| `'thin'` | Thin line | none (`<hr>`) |
| `'thick'` | Thick line | `border-top: 3px solid #adb5bd` |
| `'dashed'` | Dashed | `border-top: 2px dashed #adb5bd` |
| `'dotted'` | Dotted | `border-top: 3px dotted #adb5bd` |
| `'double'` | Double line | `border-top: 4px double #adb5bd` |
| `'short'` | Short line | `border-top: 2px solid #868e96; width: 64px; margin: 2em auto` |

Every style except thin is saved inline together with `border: 0`, so it looks the same without your CSS. The thin line follows the browser’s or your site’s `hr` style.

## Page breaks

`pageBreak` marks where printing (or saving as PDF) moves on to the next page. It is invisible on screen; while editing it shows as a dashed line labelled "PAGE BREAK". It is also in the `/` menu.

```html
<div data-page-break="" style="page-break-after: always; break-after: page"></div>
```

```js
editor.exec('hr');            // plain divider
editor.exec('hr', 'dashed');  // thin | thick | dashed | dotted | double | short
editor.exec('pageBreak');
```

## Presets

The `board` and `full` presets put `hrStyle` under ⋯. `pageBreak` is only in `full`. No preset has the `hr` button.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `hr` | toolbar item | - | Insert a plain divider |
| `hrStyle` | toolbar item | - | Insert a divider in one of six styles |
| `pageBreak` | toolbar item | - | Insert a page break for printing |

---

# Code blocks

> Code blocks that keep line breaks and indentation, with a language.

Source: https://82editor.com/en/docs/code-blocks/

For source code, config files and terminal commands, where characters and spaces must stay exactly as typed. Shown in a gray box with a monospace font.

```js
createEditor('#editor', {
  toolbar: 'heading | bold code | codeBlock | undo redo',
});
```

## How to use

- The `codeBlock` button or `Ctrl`+`Shift`+`C` turns the paragraph at the caret (or the selected paragraphs) into a code block, one line per paragraph.
- Inside a code block the button turns each line back into a paragraph. `Backspace` at the very start does too.
- `Enter` adds a line. `Enter` on an empty last line leaves the block.
- `Tab` inserts two spaces.
- On an empty line, type `/` and pick "Code block".
- The selection bubble toolbar does not show inside code blocks.

## Choosing a language

With the caret in a code block, a bar shows below it. The language you pick goes on `<code>` as `class="language-…"`. The editor does not color the code; a highlighter on the reading page (Prism, highlight.js and the like) uses that class. The bar’s close button turns the block back into paragraphs.

| Value | Language |
| --- | --- |
| (none) | Plain text |
| `html` `css` `js` `ts` `json` | HTML, CSS, JavaScript, TypeScript, JSON |
| `bash` `python` `java` `kotlin` `php` `sql` | Shell, Python, Java, Kotlin, PHP, SQL |
| `c` `cpp` `csharp` `go` `rust` `swift` `ruby` | C, C++, C#, Go, Rust, Swift, Ruby |
| `xml` `yaml` `markdown` | XML, YAML, Markdown |

## Code inside a sentence

For a word or a short command, use the `code` button (`Ctrl`+`E`). With `markdownShortcuts` on, typing ``code`` in backticks works too. Markdown ``` fences come in through [Markdown paste](https://82editor.com/en/docs/markdown/).

## Saved HTML

```html
<pre><code class="language-js">const editor = createEditor('#editor', {
  toolbar: 'board',
});</code></pre>
```

> The gray background and monospace font come from CSS, not inline styles. Wrap the saved HTML in `<div class="e82-view">` with 82editor.css on the reading page, or style `pre` in your own CSS.

```js
editor.exec('codeBlock');         // add / remove
editor.exec('codeBlock', 'php');  // add with a language
editor.exec('code');              // inline code
```

## Presets

`codeBlock` is under ⋯ in the `board` and `full` presets. `code` (inline) is only in `full`.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `codeBlock` | toolbar item | - | Add or remove a code block (`Ctrl`+`Shift`+`C`) |
| `code` | toolbar item | - | Inline code (`Ctrl`+`E`) |
| `markdownShortcuts` | boolean | true | Includes the ``code`` typing shortcut |

---

# Columns

> Two or three columns side by side; they stack on phones by themselves.

Source: https://82editor.com/en/docs/columns/

For two or three blocks side by side: a photo and its text, pros and cons. On narrow screens the columns stack without any media query.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | columns | undo redo',
});
```

## How to use

- Pick 2 or 3 columns from the `columns` menu: the paragraph at the caret (or the selected paragraphs) goes into the first column; the others start empty.
- With the caret in a column, a bar shows above the right end: switch between 2 and 3 columns, or "No columns".
- Going from 3 to 2 moves the dropped column’s content to the end of the last remaining one. Removing columns joins the content in order and drops untouched empty lines.
- While editing, each column has a dashed outline. It is not saved.

## On phones

Each column has `flex: 1 1 240px`, so when a column would get narrower than 240px they wrap under each other. No change to your CSS is needed.

## Saved HTML

```html
<div data-columns="2" style="display: flex; flex-wrap: wrap; gap: 24px; margin: 0.8em 0">
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>Pros</h3>…</div>
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>Cons</h3>…</div>
</div>
```

```js
editor.exec('columns', '3');  // three columns (creates them outside a column set)
editor.exec('columns', '');   // remove the columns
```

## Presets

Under ⋯ in the `board` and `full` presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | toolbar item | - | Make 2 or 3 columns, change the count, remove them |

---

# Bookmarks and contents

> Bookmark blocks with an id, link to them with #, and build a table of contents from headings.

Source: https://82editor.com/en/docs/bookmarks/

For links that jump to a place in a long post. A bookmark is an `id` on a block; a table of contents is a list of links to the headings’ bookmarks.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link | anchor toc | undo redo',
});
```

## Adding a bookmark

- Put the caret in a block and press `anchor`. The name field is filled with a name made from the block’s text.
- Names keep letters (Korean too), digits, `-` and `_`; spaces and symbols become `-`. A name already in use gets `-2`, `-3`….
- Apply an empty name to remove the bookmark.
- Blocks that take a bookmark: headings, paragraphs, list items, quotes, callouts, figures, tables, collapsible sections.
- While editing, bookmarked blocks show a faint `#` to their left.

## Linking to a bookmark

- The address field of the link dialog (`Ctrl`+`K`) suggests the post’s bookmarks as `#name`.
- `Ctrl`+click (`⌘`+click on a Mac) on a `#` link while editing scrolls to it inside the editor. So does the link bar’s "Open" button.

## Table of contents

The `toc` button builds a list from the post’s headings (H1–H4) and inserts it at the caret. Headings without a bookmark get one from their text. Lower levels are indented 20px each. With no headings nothing is inserted. It is also in the `/` menu.

> The list is a snapshot of the headings at that moment. After renaming or adding headings, delete it and insert it again. While editing, the list is one block and its text cannot be edited directly.

## Saved HTML

```html
<nav data-toc=""><p><strong>Contents</strong></p><ul>
  <li><a href="#install">Install</a></li>
  <li style="margin-left: 20px"><a href="#cdn">CDN</a></li>
</ul></nav>
<h2 id="install">Install</h2>
```

Ids survive the sanitizer, Korean ones included. The list title is the UI string `tocTitle`; change it with the `locale` option.

```js
createEditor('#editor', {
  locale: { tocTitle: 'In this post' },
});

editor.exec('anchor'); // open the bookmark dialog
editor.exec('toc');    // insert a table of contents
```

## Presets

`anchor` and `toc` are under ⋯ in the `board` and `full` presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `anchor` | toolbar item | - | Add, rename or remove the bookmark of the block at the caret |
| `toc` | toolbar item | - | Insert a table of contents from the headings |
| `locale.tocTitle` | string | 'Contents' | Title at the top of the list |

---

# Templates

> Insert ready-made content from a menu.

Source: https://82editor.com/en/docs/templates/

If posts often start from the same layout (notices, support replies, meeting notes), register them in the `templates` option and insert them from a menu.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | template | undo redo',
  templates: [
    {
      title: 'Notice',
      description: 'Title, date, contact',
      html: '<h2>Notice title</h2><p><strong>Date:</strong> </p><p><strong>Contact:</strong> </p>',
    },
    {
      title: 'Meeting notes',
      description: 'Attendees, agenda, decisions',
      html: '<h3>Attendees</h3><ul><li></li></ul><h3>Agenda</h3><ol><li></li></ol><h3>Decisions</h3><p></p>',
    },
  ],
});
```

## How to use

- The `template` button lists your templates; `description` shows small next to the title.
- The template’s HTML is inserted at the caret. It does not replace the post.
- With `slashMenu` on, templates are in the `/` menu too, searchable by title and description.
- With no `templates`, the menu shows only a "no matches" line.

> Template HTML goes through the allow-list sanitizer like any other content. To keep your site’s classes, register them with the `styles` option ([Styles](https://82editor.com/en/docs/styles/)) or wrap the markup in an [HTML block](https://82editor.com/en/docs/html-block/).

## From code

To insert a layout at a moment of your choosing, call `insertHTML`. To replace the whole post, `setHTML`.

```js
editor.insertHTML('<h2>Notice title</h2><p></p>');  // at the caret (sanitized)
editor.setHTML('<h2>Notice title</h2><p></p>');     // replace everything
```

## Presets

`template` is only in the `full` preset, under ⋯. With `board`, add it to `toolbar` yourself.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `templates` | { title, html, description? }[] | - | Templates shown in the menu |
| `template` | toolbar item | - | Open the template menu |
| `slashMenu` | boolean | true | List templates in the `/` menu too |

---

# HTML block

> Insert ready-made HTML (like a product page) with its classes and styles.

Source: https://82editor.com/en/docs/html-block/

For HTML you already have: a product detail page, a banner, a hand-made layout. Unlike regular content, an HTML block keeps classes and nearly every CSS property.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | htmlBlock | source | undo redo',
});
```

## How to use

- The `htmlBlock` button opens a box to paste HTML into. "Insert" puts the block at the caret.
- In the editor an HTML block is one piece: its text cannot be edited in place, and a click selects the whole block and shows its bar.
- The bar: **Edit HTML** (edit and apply in the same box, or remove), **Move up**, **Move down**, **Remove**.

## What stays and what goes

|  | Inside an HTML block | Regular content |
| --- | --- | --- |
| class | kept (up to 12 per element) | dropped (only `styles` classes stay) |
| CSS properties | nearly all kept (grid, gradients …) | allow-listed ones only |
| `section` `article` `header` `footer` `aside` `main` `center` | kept | tag removed, text kept |
| `script` `style` `form` `input` `button` `svg` … | removed with content | removed with content |
| Event attributes like `onclick` | removed | removed |
| `javascript:` URLs, CSS `url()` and `expression()` | removed | removed |
| iframes | allowed sites only (`allowedIframeHosts`) | allowed sites only |

> `<style>` tags are removed, so CSS for the classes has to live on the reading page. Check what survived with "Edit HTML" on the bar or the `source` (HTML view) item.

## Saved HTML

```html
<div data-html="">
  <section class="promo" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; …">
    …
  </section>
</div>
```

If your server sanitizes again, make sure its rules keep classes and styles inside `div[data-html]` ([Security](https://82editor.com/en/docs/security/)).

```js
editor.exec('htmlBlock'); // open the HTML block dialog
```

## Presets

`htmlBlock` is only in the `full` preset, under ⋯. It suits admin screens better than boards open to visitors.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlBlock` | toolbar item | - | Insert or edit an HTML block |
| `allowedIframeHosts` | string[] | - | Iframes inside the block also need a built-in video site, Google Maps, or a host from this list |

---

# Image upload

> Send images to your server: a function, a URL, and server examples.

Source: https://82editor.com/en/docs/image-upload/

With no setup, images are inlined as base64, which makes posts large. On production sites, upload them. Picking, dragging, pasting and images copied from other sites all go through the same path.

## 1. Pass an upload function (recommended)

```js
createEditor('#editor', {
  imageMaxSize: 10 * 1024 * 1024,
  uploadImage: async (file, { onProgress }) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/upload', { method: 'POST', body: form });
    if (!res.ok) throw new Error('Upload failed');
    const { url } = await res.json();
    return url; // the editor inserts <img src=url>
  },
});
```

## 2. Just a URL

```js
createEditor('#editor', {
  uploadUrl: '/upload',
  uploadField: 'file',
  uploadHeaders: { 'X-CSRF-Token': token },
});
// reply with { "url": "https://…/a.png" }
```

## Node (Express + multer)

```js
import express from 'express';
import multer from 'multer';

const upload = multer({ dest: 'public/files', limits: { fileSize: 10 * 1024 * 1024 } });
const app = express();
app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file?.mimetype.startsWith('image/')) return res.status(400).end();
  res.json({ url: '/files/' + req.file.filename });
});
```

## Cloudflare Workers + R2

```js
export default {
  async fetch(req, env) {
    const form = await req.formData();
    const file = form.get('file');
    if (!file || !file.type.startsWith('image/')) return new Response('bad', { status: 400 });
    const key = crypto.randomUUID() + '.' + file.type.split('/')[1];
    await env.BUCKET.put(key, file.stream(), { httpMetadata: { contentType: file.type } });
    return Response.json({ url: 'https://files.example.com/' + key });
  },
};
```

> On the server, check the file type from its first bytes rather than trusting the extension or Content-Type. Refusing SVG is safest, since it can carry scripts.

---

# Images

> Insert photos, resize by the corners, align, alt text, captions and links.

Source: https://82editor.com/en/docs/images/

Put photos in a post, then click one to change its size, placement and caption. Almost every board or blog post with pictures needs this.

```js
createEditor('#editor', {
  toolbar: 'image | alignLeft alignCenter alignRight | undo redo',
  height: 400,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## Adding photos

- The **Image** button (`image`): click the drop area or drop files on it; several at once is fine. Or type an address and alt text in the fields below it.
- Drop image files on the content, or paste a screenshot or copied picture with `Ctrl`+`V`.
- Type `/` on an empty line and look for "image" ([slash menu](https://82editor.com/en/docs/slash-menu/)).

Whichever way, a preview shows at once and is swapped for the server address when the upload ends. Without upload settings the photo goes in as base64, so set up [image upload](https://82editor.com/en/docs/image-upload/) on a real site. Shrinking and HEIC conversion are in [Resize and convert](https://82editor.com/en/docs/image-processing/).

## Resizing

A clicked photo gets four corner handles and a size label (width × height). Dragging a handle changes the width and keeps the ratio, from 24px up to the content width. Touch works too.

On the bar, **25% 50% 75% 100%** set the width relative to the content, and **1:1** goes back to the original size.

## The image bar

| Button | What it does |
| --- | --- |
| In line / wrap left / center / wrap right | In line keeps it inside the line of text. Wrap uses `float` so text flows around it. Center sets auto side margins. |
| 25% … 100%, 1:1 | Width as a share of the content, or the original size. |
| Alternative text | Sets `alt`, read by screen readers and shown when the photo can't load. |
| Add caption | Wraps the photo in `<figure>` with a `<figcaption>`. Click again to remove it. |
| Edit image | Crop, rotate, flip ([Image editor](https://82editor.com/en/docs/image-editor/)). |
| Link image | Wraps the photo in `<a>`, with new tab and nofollow options. `Ctrl`+`K` does the same. |
| Replace image | Uploads another photo in the same place and layout. |
| Delete image | Removes it; so do `Backspace` and `Delete` while it is selected. |

With a photo selected, the `alignLeft` `alignCenter` `alignRight` buttons and `Ctrl`+`Shift`+`L`/`E`/`R` act on the photo; left means "in line".

## Where it is

`image` is on the first row of the basic, board and full presets (not minimal). On phones it is first in the one-row toolbar.

## Saved HTML

```html
<figure style="margin: 0 0 1em; display: table; margin-left: auto; margin-right: auto; text-align: center">
  <img src="/files/a.jpg" alt="A forest path" style="width: 360px; height: auto; max-width: 100%" width="640" height="400">
  <figcaption style="font-size: 0.875em; color: #667085; margin-top: 6px">Caption</figcaption>
</figure>
<p><img src="/files/b.jpg" alt="" style="float: left; margin: 0 16px 8px 0; width: 160px; height: auto; max-width: 100%" width="320" height="240" loading="lazy">Text…</p>
```

Placement and size are inline styles, so the view page looks the same without the editor CSS. `responsiveOutput` (on by default) adds `max-width: 100%` and the natural `width`/`height`; `lazyImages` (on by default) adds `loading="lazy"` from the second photo on. See [Saved HTML](https://82editor.com/en/docs/saved-html/).

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `image` | toolbar item |  | Opens the image dialog. |
| `uploadImage` | (file, { onProgress }) => Promise<string> |  | Uploads a photo and resolves to its address. [Image upload](https://82editor.com/en/docs/image-upload/) |
| `uploadUrl` | string |  | POST here instead of using a function. |
| `imageAccept` | string | 'image/*,.heic,.heif' | File types that can be chosen. |
| `imageMaxSize` | number (bytes) | none | Largest photo. |
| `responsiveOutput` | boolean | true | Adds `max-width: 100%` and natural sizes when saving. |
| `lazyImages` | boolean | true | `loading="lazy"` from the second photo on. |

---

# Image editor

> Crop, rotate and flip a photo in the browser.

Source: https://82editor.com/en/docs/image-editor/

Crop and rotate a photo that is already in the post, in place. Handy for a phone photo lying on its side or an edge you don't want, without another program.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  height: 380,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## Opening it

Use the **Edit image** button on the image bar; there is no toolbar item for it. From code, run `editor.exec('imageEdit')` while a photo is selected.

## Tools

- **Crop**: drag the box to move it, drag a corner to resize it.
- **Ratio**: free, 1:1, 4:3, 3:4, 16:9. Picking one fits the largest box of that ratio inside the current one.
- **Rotate left / right**: 90 degrees at a time; the crop box resets.
- **Flip horizontally**
- **Reset**: undoes rotation, flip and crop without closing the dialog.

The real pixel size of the result shows bottom right. Turning a phone sideways or resizing the window re-fits the preview.

## Applying

**Apply** turns the result into a new file, uploads it like a new photo and swaps the address. So `uploadImage`/`uploadUrl`, `imageResize` and `imageMaxSize` all apply. JPEG, PNG and WebP keep their format, anything else becomes PNG, and the file name gets `-edit`.

After a crop or a 90° turn a pixel width is cleared; a % width stays. Placement, caption, link and alt text are kept. Undo (`Ctrl`+`Z`) brings the old photo back.

> Editing needs the photo's pixels. A photo on another site can only be edited if that server allows CORS (`Access-Control-Allow-Origin`); otherwise you get "This image cannot be edited". Photos on your own server are fine.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `imageEdit` | command |  | Opens the editor for the selected photo; the image bar has a button for it. |
| `uploadImage` / `uploadUrl` |  |  | The edited result is uploaded this way; base64 without them. |
| `imageResize` | false \| object | { maxWidth: 1600, quality: 0.85 } | Also applies to edited results. [Resize and convert](https://82editor.com/en/docs/image-processing/) |

---

# Resize and convert

> Shrink big photos before upload, WebP, iPhone HEIC, size and type limits.

Source: https://82editor.com/en/docs/image-processing/

Phone photos are often 4000px wide and several MB. Before uploading, 82editor shrinks them in the browser, can turn them into WebP, and converts iPhone HEIC photos to JPEG. That saves server space and your readers' data.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageResize: { maxWidth: 800, quality: 0.8, format: 'webp' },
  imageMaxSize: 3 * 1024 * 1024,
  imageAccept: 'image/jpeg,image/png,image/webp,.heic,.heif',
  uploadImage: async (file) => {
    console.log(file.name, file.type, Math.round(file.size / 1024) + 'KB');
    return URL.createObjectURL(file);
  },
});
```

## Shrinking (imageResize)

On by default. JPEG, PNG and WebP photos wider than `maxWidth` (1600px) are scaled down and saved again at `quality` (0.85). The original is uploaded unchanged when:

- it is already no wider than `maxWidth`
- it is not JPEG, PNG or WebP, e.g. a GIF (so animations keep moving)
- the result would be larger, or the browser can't decode it

Turn it off with `imageResize: false`.

```js
createEditor('#editor', {
  imageResize: { maxWidth: 1200, quality: 0.8 },
});
```

## Converting to WebP

With `format: 'webp'`, every JPEG and PNG is saved as WebP, even narrow ones, and the file name ends in `.webp`. If the browser can't write WebP or the result is larger, the original goes up.

## iPhone HEIC photos

Most browsers can't show HEIC/HEIF, the iPhone default. Where the browser can read them (Safari), they become JPEG at quality 0.9 before upload. Elsewhere the photo is skipped with a message asking for a JPG. HEIC files that arrive without a type are recognised by their extension.

## Size and type limits

- `imageMaxSize` is checked on the file that is actually uploaded, after shrinking, so a 10MB original that shrinks below the limit still goes in. Too large shows "The file is too large (max …)".
- `imageAccept` is both the file picker filter and the check on insert: MIME types, `image/*` or extensions like `.webp`, comma separated. Others show "Only image files can be inserted".

## Pasted base64 photos

When pasted content carries `data:` images, they are uploaded and replaced by addresses if an upload handler is set. Without one they are at least shrunk by the rules above.

> Shrinking in the browser doesn't replace checks on the server; requests can skip the editor. See the server examples in [Image upload](https://82editor.com/en/docs/image-upload/).

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `imageResize` | false \| object | on | `false` uploads originals. |
| `imageResize.maxWidth` | number | 1600 | Photos wider than this are shrunk (px). |
| `imageResize.quality` | number | 0.85 | Encoding quality (0–1). |
| `imageResize.format` | 'webp' |  | Save JPEG, PNG and WebP as WebP. |
| `imageMaxSize` | number (bytes) | none | Largest file after shrinking. |
| `imageAccept` | string | 'image/*,.heic,.heif' | Picker filter and insert check. |

---

# Photo groups

> Several photos in a 2 or 3 column grid or a swipeable slider.

Source: https://82editor.com/en/docs/gallery/

Put several photos side by side, or in a row readers swipe through. Useful for reviews, product photos and travel posts.

```js
createEditor('#editor', {
  toolbar: 'image gallery | undo redo',
  height: 420,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## Making one

Pick a layout from **Photo group** (`gallery`) on the toolbar.

- If the caret's paragraph holds two or more photos, they become one group. A linked photo goes in without its link.
- Otherwise the file picker opens and the chosen photos go in as a new group, replacing an empty paragraph or after the current one.

| Layout | Value | Looks like |
| --- | --- | --- |
| 2 columns | `'2'` | Two-column grid, photos cropped to 4:3 |
| 3 columns | `'3'` | Three-column grid, photos cropped to 1:1 |
| Slider | `'slide'` | One photo at a time, swipe sideways (scroll-snap), whole photo inside 4:3 |

## The group bar

Click a photo in a group for its bar: **2 columns / 3 columns / slider**, **alternative text**, **add photos** (at the end), **delete image**, and **ungroup** (back to one paragraph). Deleting the last photo removes the group.

## Where it is

`gallery` is in the ⋯ more menu of the board and full presets. Add it to `toolbar` yourself otherwise.

## Saved HTML

```html
<div data-gallery="2" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0.8em 0">
  <img src="/files/a.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
  <img src="/files/b.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
</div>
<div data-gallery="slide" style="display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.8em 0">…</div>
```

Grid and slider are plain inline CSS: the view page needs no script or editor CSS, and phones can swipe the slider.

From code: `editor.exec('gallery', '3')`. Inside a group, `'add'` adds photos and `''` ungroups.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `gallery` | toolbar item |  | 2 columns / 3 columns / slider; inside a group also add photos and ungroup. |
| `uploadImage` / `uploadUrl` |  |  | Photos added to groups are uploaded this way. |
| `imageAccept` | string | 'image/*,.heic,.heif' | Photo types that can be chosen. |

---

# Videos

> Embed YouTube, Vimeo, Naver TV and Kakao TV by address, 16:9 on any screen.

Source: https://82editor.com/en/docs/video/

Paste a video site address and the player goes in. Nothing is uploaded; the site's own player is embedded.

```js
createEditor('#editor', {
  toolbar: 'video embed | undo redo',
  height: 380,
});
```

## Adding a video

- Click **Video** (`video`) and paste the address. Addresses it can't read show "This video link is not supported".
- Paste a video address alone into the text: it goes in as a link and a message offers "Embed video", which turns the link into a player.
- Type `/` on an empty line and look for "video" or "youtube".
- A video address or iframe code in the **Map / embed code** dialog (`embed`) also goes in as a video.

## Supported addresses

| Site | Examples |
| --- | --- |
| YouTube | `youtube.com/watch?v=…`, `youtu.be/…`, `/shorts/…`, `/live/…`, `/embed/…`, `music.youtube.com`. `t=90` or `t=1m30s` sets the start time. |
| Vimeo | `vimeo.com/123456789`, `player.vimeo.com/video/…` |
| Naver TV | `tv.naver.com/v/…`, `/embed/…` |
| Kakao TV | `tv.kakao.com/v/…`, `…/cliplink/…` |
| Dailymotion | `dailymotion.com/video/…`, `dai.ly/…` |

## Saved HTML

```html
<div data-video="youtube" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="youtube video"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0"
    allowfullscreen allow="…" loading="lazy"></iframe>
</div>
```

The 16:9 box is inline CSS, so on the view page it shrinks to phone width too. In the editor a video is one piece: it can be deleted or moved, not edited inside.

## Allowed iframes

Only iframes from allowed sites stay. By default that is the video sites above (`www.youtube.com`, `www.youtube-nocookie.com`, `player.vimeo.com`, `tv.naver.com`, `play-tv.kakao.com`, `www.dailymotion.com`) and Google Maps. Other iframes coming in through `setHTML` or paste are dropped with a message. Allow more with `allowedIframeHosts` ([Maps and embeds](https://82editor.com/en/docs/embed/)), and match your server allow-list ([Security](https://82editor.com/en/docs/security/)).

## Where it is

`video` is on the first row of the board and full presets.

To insert from code: `editor.exec('insertVideo', 'https://youtu.be/…')`. An address it can't read does nothing.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `video` | toolbar item |  | Opens the video address dialog. |
| `insertVideo` | command |  | Inserts the video for an address at the caret. |
| `allowedIframeHosts` | string[] | [] | iframe addresses allowed besides the video sites and Google Maps. |

---

# Maps and embeds

> Google Maps and iframe codes from allowed sites; Kakao and Naver maps as link cards.

Source: https://82editor.com/en/docs/embed/

Put embed (iframe) codes from other sites in a post: a map to your shop, a survey, a booking widget. Only codes from allowed sites go in.

```js
createEditor('#editor', {
  toolbar: 'embed video | undo redo',
  height: 400,
  allowedIframeHosts: ['www.openstreetmap.org'],
});
```

## Adding one

Click **Map / embed code** (`embed`) and paste an address or an `<iframe …>` code. What happens depends on what it is:

| You paste | Result |
| --- | --- |
| A video address or video iframe | Inserted as a [video](https://82editor.com/en/docs/video/). |
| A Google Maps [Share → Embed a map] code | The map. Allowed by default. |
| A Kakao Map or Naver Map address (`map.kakao.com`, `kko.to`, `map.naver.com`, `naver.me`) | These sites refuse to be framed, so it goes in as a [link card](https://82editor.com/en/docs/link-cards/) with a message. |
| A code or https address from a site in `allowedIframeHosts` | That iframe. |
| Anything else | "This site can't be embedded", nothing inserted. |

A `height` in the iframe code is kept (between 150 and 1200px); otherwise 450px. The width always fills the content.

## Allowing sites

```js
createEditor('#editor', {
  allowedIframeHosts: [
    'www.openstreetmap.org',
    'docs.google.com/forms',   // a path limits it to addresses starting with it
  ],
});
```

Entries are host names; add `/path` to allow only addresses under that path. Only https works. The list also applies to `setHTML`, paste and the HTML source view, not just this dialog.

> Allow the same iframe addresses when you sanitize again on the server, or they disappear after saving. See [Security](https://82editor.com/en/docs/security/).

## Saved HTML

```html
<div data-embed="" style="margin: 0.8em 0">
  <iframe src="https://www.google.com/maps/embed?pb=…" style="width: 100%; height: 450px; border: 0"
    loading="lazy" allowfullscreen="" title="embed"></iframe>
</div>
```

In the editor it is one piece: click to select it, delete it, or move it with `Alt`+`Shift`+`↑`/`↓`.

## Where it is

`embed` is in the ⋯ more menu of the board and full presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `embed` | toolbar item |  | Opens the address / embed code dialog. |
| `allowedIframeHosts` | string[] | [] | Extra iframe hosts; `host/path` limits to a path. |
| `fetchLinkMeta` | (url) => Promise<LinkMeta \| null> |  | Title and picture for Kakao / Naver map cards. |

---

# Link cards

> Show an address as a card with title, description and picture (fetchLinkMeta).

Source: https://82editor.com/en/docs/link-cards/

Show an address as a box with title, description and picture. Use it to make a source, a product page or a map stand out.

```js
createEditor('#editor', {
  toolbar: 'linkCard link | undo redo',
  // a real site asks its server (see below)
  fetchLinkMeta: async (url) => ({
    title: new URL(url).hostname + ' home page',
    description: 'What the server read from the page: og:title, og:description and og:image.',
    image: 'https://picsum.photos/seed/82/400/240',
  }),
});
```

## Adding one

- Click **Link card** (`linkCard`) and enter an address; a missing `https://` is added.
- Paste an address alone into the text: it goes in as a link, and with `fetchLinkMeta` set a message offers "Show as a card", which swaps the link for a card. Kakao Map and Naver Map addresses get the offer even without `fetchLinkMeta`.
- Kakao Map and Naver Map addresses in the [Map / embed code](https://82editor.com/en/docs/embed/) dialog go in as cards.

## fetchLinkMeta: getting the details from your server

Browsers can't read pages on other sites, so your server has to fetch the title and picture. Without `fetchLinkMeta`, or when it returns `null`, the card shows only the domain.

```js
createEditor('#editor', {
  toolbar: 'board | linkCard',
  fetchLinkMeta: async (url) => {
    const res = await fetch('/api/link-meta?url=' + encodeURIComponent(url));
    return res.ok ? res.json() : null; // { title, description?, image?, siteName? }
  },
});
```

```js
// Node example: read the page's og: tags
app.get('/api/link-meta', async (req, res) => {
  const url = new URL(req.query.url);
  if (!/^https?:$/.test(url.protocol)) return res.status(400).end();
  const html = await (await fetch(url, { redirect: 'follow' })).text();
  const og = (p) => html.match(new RegExp('<meta[^>]+property=["\']og:' + p + '["\'][^>]+content=["\']([^"\']*)', 'i'))?.[1];
  res.json({
    title: og('title') ?? html.match(/<title>([^<]*)/i)?.[1] ?? url.hostname,
    description: og('description'),
    image: og('image'),
    siteName: og('site_name'),
  });
});
```

> Your server fetches addresses that users supply, so block internal ones like `localhost`, `10.x` and `192.168.x`, and limit response size and time.

## Saved HTML

```html
<div data-link-card="" style="margin: 0.8em 0">
  <a href="https://…" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 14px; …">
    <img src="https://…/og.jpg" alt="" style="width: 120px; height: 90px; object-fit: cover; …">
    <span style="display: block; min-width: 0">
      <strong style="display: block">Title</strong>
      <span style="…">Description</span>
      <span style="…">Site name</span>
    </span>
  </a>
</div>
```

Titles are cut at 120 characters and descriptions at 160. The picture is used only for `http(s)` addresses; without a site name the domain shows. Cards open in a new tab, and in the editor a card is one piece.

## Where it is

`linkCard` is in the ⋯ more menu of the board and full presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `linkCard` | toolbar item |  | Opens the dialog that makes a card from an address. |
| `fetchLinkMeta` | (url) => Promise<LinkMeta \| null> |  | Gets title, description and picture from your server; when set, pasted addresses offer a card. |
| `LinkMeta.title` | string |  | Card title; the domain when empty. |
| `LinkMeta.description` | string |  | Description (up to 160 characters). |
| `LinkMeta.image` | string |  | Picture address (http/https). |
| `LinkMeta.siteName` | string |  | Small text at the bottom; the domain when empty. |

---

# Attachments

> Upload PDF, Office or zip files and put a download button in the post.

Source: https://82editor.com/en/docs/attachments/

Put downloadable files in a post: documents for a notice, an application form. The file goes to your server and the post gets a download button with its name and size.

```js
createEditor('#editor', {
  toolbar: 'file | undo redo',
  fileMaxSize: 10 * 1024 * 1024,
  fileAccept: '.pdf,.docx,.xlsx,.zip',
  // this demo uploads nothing and returns a made-up address
  uploadFile: async (file) => 'https://example.com/files/' + encodeURIComponent(file.name),
});
```

## Adding one

Click **Attach file** (`file`) and choose files; several at once is fine. Each shows an "Uploading…" placeholder that becomes a download button when done, or disappears with a message if the upload fails.

## How files are uploaded

- With an `uploadFile` function, that is used: take the file, resolve to the download address. Report progress through `onProgress` in the second argument.
- Otherwise it POSTs to `uploadUrl` with the same `uploadField` (default `file`) and `uploadHeaders` as images; reply with `{ "url": "…" }`.
- With neither, a message says attachments need `uploadFile` or `uploadUrl`. Unlike photos, attachments are never put in the post as base64.

```js
createEditor('#editor', {
  toolbar: 'board | file',
  fileMaxSize: 20 * 1024 * 1024,
  fileAccept: '.pdf,.docx,.xlsx,.zip',
  uploadFile: async (file, { onProgress }) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/upload/attachment', { method: 'POST', body: form });
    if (!res.ok) throw new Error('Upload failed');
    return (await res.json()).url;
  },
});
```

Files over `fileMaxSize` are not uploaded and show "The file is too large (max …)". `fileAccept` filters the file picker; check types on the server as well.

Attachments fire the same `upload:start`, `upload:progress`, `upload:success` and `upload:error` events ([Events](https://82editor.com/en/docs/events/)). Their addresses are not part of `getUnusedUploads()`.

## Saved HTML

```html
<div data-file="" style="margin: 0.6em 0">
  <a href="https://…/files/application-form.pdf" download="application-form.pdf" style="display: inline-flex; …">
    📎 <strong>application-form.pdf</strong> <span style="color: #8c959f; font-size: 0.85em">48KB</span>
  </a>
</div>
```

In the editor an attachment is one piece: delete it or move it with `Alt`+`Shift`+`↑`/`↓`.

## Where it is

`file` is in the ⋯ more menu of the board and full presets.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `file` | toolbar item |  | Opens the file picker, uploads, and inserts download buttons. |
| `uploadFile` | (file, { onProgress }) => Promise<string> |  | Uploads an attachment and resolves to its download address. |
| `uploadUrl` | string |  | POST target when there is no `uploadFile` (shared with images). |
| `uploadField` | string | 'file' | Form field name for the file. |
| `uploadHeaders` | Record<string, string> |  | Headers for the POST (CSRF token …). |
| `fileMaxSize` | number (bytes) | none | Largest attachment. |
| `fileAccept` | string | any file | Picker filter, e.g. `'.pdf,.zip'`. |

---

# Image tray

> Thumbnails under the editor, reordering, restoring removed uploads, server cleanup.

Source: https://82editor.com/en/docs/image-tray/

Show a strip of thumbnails under the editor for posts with many photos: jump to a photo, change the order, bring back one you removed. The same information lets you clean up unused uploads on your server.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageTray: true,
  height: 300,
  // demo: returns a sample photo address instead of your file
  uploadImage: async (file) => 'https://picsum.photos/seed/' + Date.now() + '/640/420',
});
```

## The tray (imageTray)

With `imageTray: true`, thumbnails of the post's photos sit under the editor, above the status bar, in order. The strip hides when there are no photos.

- Click a thumbnail to scroll to that photo and select it.
- Drag a thumbnail to another spot to reorder the photos in the post. A photo with a caption or a link moves with its box.
- **✕** deletes the photo from the post.
- Photos uploaded in this session and then removed stay greyed out with a **+**; click to put one back at the caret.

## Cleaning up uploads

Deleting or replacing an uploaded photo leaves the file on your server. Clean up when saving with:

- `editor.getImages()`: addresses of the photos now in the post, without duplicates. Photos still uploading and `blob:`/`data:` addresses are left out.
- `editor.getUnusedUploads()`: addresses uploaded through `uploadImage`/`uploadUrl` while this editor was open that are no longer in the post.

```js
form.addEventListener('submit', async () => {
  const unused = editor.getUnusedUploads();
  if (unused.length) {
    await fetch('/upload/cleanup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ urls: unused }),
    });
  }
});
```

The `image:remove` event fires with `{ src }` whenever a photo leaves the post (delete, cut, replace). Undo can bring it back, so delete server files at save time with `getUnusedUploads()`, not on this event.

```js
editor.on('image:remove', ({ src }) => console.log('removed', src));
```

> On the server, check that each address really is a file this user uploaded; another post may use the same photo.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `imageTray` | boolean | false | Show the thumbnail strip under the editor. |
| `getImages()` | method |  | Array of photo addresses in the post. |
| `getUnusedUploads()` | method |  | Array of addresses uploaded this session but no longer in the post. |
| `image:remove` | event |  | `{ src }` when a photo leaves the post. |

---

# Paste cleanup

> What survives a paste from Word, Excel, HWP and Google Docs.

Source: https://82editor.com/en/docs/paste/

82editor looks at the clipboard HTML, works out where it came from, and cleans it per source. Adjust the result through the `paste` event.

| Source | Kept | Removed |
| --- | --- | --- |
| MS Word | Bold, italic, underline, colors, sizes, alignment, tables and merged cells; numbered paragraphs become real lists | `mso-*` styles, `Mso*` classes, `<o:p>`, conditional comments |
| Excel | Tables, merged cells, cell backgrounds, number alignment | Formatting leftovers |
| Hangul (HWP) | pt sizes, line height, paragraph spacing, table borders and widths | Repeated font declarations, empty spans; `file:///` images are dropped with a notice |
| Google Docs | Bold and italic (styles turned into tags), lists, links | The `docs-internal-guid` wrapper |
| Web pages | Paragraphs, headings, lists, links, images, tables | class, id, scripts, tags outside the allow-list |

## Modes

- `pasteMode: 'clean'` (default) the rules above
- `pasteMode: 'plain'` text only, always
- `pasteMode: 'keep'` sanitize but keep as much formatting as possible
- `Ctrl`+`Shift`+`V` pastes plain text in any mode

A single pasted URL becomes a link; YouTube, Vimeo, Naver TV and Kakao TV URLs offer to embed the video.

---

# Keyboard shortcuts

> Keyboard shortcuts and markdown input rules.

Source: https://82editor.com/en/docs/shortcuts/

On macOS use `⌘` instead of `Ctrl`. Press `Ctrl`+`/` in the editor to open this list.

| Keys | Action |
| --- | --- |
| `Ctrl`+`B` / `I` / `U` | Bold / italic / underline |
| `Ctrl`+`Shift`+`X` | Strikethrough |
| `Ctrl`+`K` | Link |
| `Ctrl`+`Z` / `Ctrl`+`Y` | Undo / redo |
| `Ctrl`+`Alt`+`1`-`4` | Heading 1-4 |
| `Ctrl`+`Alt`+`0` | Paragraph |
| `Ctrl`+`Shift`+`7` / `8` | Numbered / bulleted list |
| `Ctrl`+`F` / `Ctrl`+`H` | Find / replace |
| `Ctrl`+`Shift`+`V` | Paste as plain text |
| `Tab` / `Shift`+`Tab` | Indent lists, move between table cells |
| `Ctrl`+`Shift`+`9` | Checklist |
| `Ctrl`+`Shift`+`U` | HTML source |
| `Ctrl`+`Shift`+`F` | Fullscreen |

## Markdown input

| Type | Result |
| --- | --- |
| `# ` - `#### ` | Heading 1-4 |
| `- ` or `* ` | Bulleted list |
| `1. ` | Numbered list |
| `[ ] ` | Checklist |
| `> ` | Quote |
| ````` | Code block |
| `---` | Horizontal rule |
| `**x**` · `*x*` · ``x`` · `~~x~~` | Bold · italic · code · strikethrough |

---

# Markdown

> Type Markdown, paste Markdown, and read or load content as Markdown.

Source: https://82editor.com/en/docs/markdown/

Type `# `, `- ` or `**bold**` and the formatting appears as you write. You can also paste Markdown, or read and load the whole content as Markdown.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic strike code | bulletList orderedList checklist | blockquote codeBlock | markdown',
  height: 320,
});
```

## Rules while typing

At the start of a paragraph, these marks followed by a space change the block. Code blocks and rules change when you press `Enter` on that line.

| Type | Result |
| --- | --- |
| `# ` to `#### ` | Heading 1-4 |
| `- ` `* ` `+ ` | Bulleted list |
| `1. ` or `1) ` | Numbered list |
| `[] ` `[ ] ` / `[x] ` | Checklist (x starts checked) |
| `> ` | Quote |
| ````` + `Enter`, ````js` + `Enter` | Code block (with a language) |
| `---` `***` `___` + `Enter` | Horizontal rule |

Inside text, the change happens when you type the closing mark.

| Type | Result |
| --- | --- |
| `**x**` or `__x__` | Bold (`<strong>`) |
| `*x*` or `_x_` | Italic (`<em>`) |
| `~~x~~` | Strikethrough (`<s>`) |
| ``x`` | Inline code (`<code>`) |

> Rules do not run inside code blocks or inline code, nor during IME composition (Korean, Japanese, Chinese); they run on the space or mark typed after it. See [Korean input](https://82editor.com/en/docs/korean-input/).

## Pasting Markdown

Plain text that reads as Markdown (from a text editor, VS Code or a chat app) is pasted as formatting. Headings, code fences, tables, two or more list items, links and bold marks count. A message says so, and its **Paste as text** button puts the original text back instead.

- Not inside a code block, not with `Ctrl`+`Shift`+`V`, not with `pasteMode: 'plain'`.
- Clipboards that carry HTML (web pages, Word) follow [Paste cleanup](https://82editor.com/en/docs/paste/) instead.
- The `paste` event arrives with `source: 'markdown'`.

## Markdown window (markdown toolbar item)

The `markdown` button opens the content as Markdown. Copy it, or edit and apply to replace the content (undoable). In the `board` and `full` presets it sits in the ⋯ more menu.

## From code

```js
// the content as Markdown
const md = editor.getMarkdown();

// replace the content with Markdown (undoable)
editor.setMarkdown('# Notice\n\n**Maintenance** tomorrow.');

// convert without an editor
import { markdownToHtml, htmlToMarkdown } from '@82editor/core';
const html = markdownToHtml('- one\n- two');
const back = htmlToMarkdown(html);
```

Covered: headings, lists (nested and tasks), quotes, code fences, tables, rules, bold, italic, strikethrough, code, links and images. What Markdown cannot say (colors, callouts, folds, videos, photo groups, attachments, tables with merged cells) stays as HTML inside the Markdown, and `markdownToHtml` reads it back. A single newline becomes `<br>`.

> `htmlToMarkdown` uses the browser `document`; on a server you need a DOM. HTML from `markdownToHtml` is sanitized again when it goes into the editor.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `markdownShortcuts` | boolean | `true` | Markdown rules while typing. `false` turns off block and inline rules. |
| `markdownPaste` | boolean | `true` | Paste plain text that reads as Markdown as formatting. |
| `markdown` | toolbar item | — | View and edit as Markdown |
| `getMarkdown()` | method | — | The content as a Markdown string |
| `setMarkdown(md)` | method | — | Replace the content with Markdown |

---

# Slash menu

> Type / on an empty line to pick a heading, table, image and more.

Source: https://82editor.com/en/docs/slash-menu/

Type `/` on an empty line to get a list of blocks to insert. Handy when you would rather stay on the keyboard than reach for the toolbar.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList',
  templates: [
    {
      title: 'Meeting notes',
      description: 'date, people, agenda',
      html: '<h2>Meeting notes</h2><p>Date: </p><p>People: </p><ul><li>Agenda</li></ul>',
    },
  ],
});
```

## How it works

- The menu opens when the paragraph holds only `/`. A slash in the middle of text is just a slash.
- Keep typing to filter by name, English or Korean keywords (`/youtube` → video, `/spoiler` → fold) and Korean initial consonants.
- `↑` `↓` to move, `Enter` or `Tab` to insert, `Esc` to close.
- The typed `/text` is removed and the block goes in its place.
- The menu closes when more than 24 characters follow the slash or the slash is deleted.

## What is in it

Paragraph, headings 1-4, bulleted list, numbered list, checklist, quote, callout, fold (details), code block, table (3×3), image, video, divider, page break, emoji, special characters, table of contents, date and time. With the `templates` option, templates are added at the end (their descriptions are searched too).

Items show up here even when they are not on the toolbar, so a short toolbar plus the slash menu works well.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `slashMenu` | boolean | `true` | `false`: typing / opens nothing. |
| `templates` | { title, html, description? }[] | — | Templates at the end of the menu; picking one inserts its `html`. |

---

# Bubble toolbar

> A small format bar that appears above selected text.

Source: https://82editor.com/en/docs/bubble-toolbar/

Select text with the mouse and a few common buttons (bold, color, link …) appear right above it. Useful with a hidden or short toolbar.

```js
createEditor('#editor', {
  toolbar: false,
  bubbleToolbar: true,
});
```

## Buttons

Bold, italic, underline, strikethrough, inline code | text color, highlight, link, clear formatting. Formats already on the selection show as pressed. Keyboard shortcuts (`Ctrl`+`B`, `Ctrl`+`K` …) work as usual.

## When it does not show

- Touch screens (phones, tablets), so it does not fight the browser selection menu
- Inside a code block, with an image selected, or with several table cells selected
- Read-only mode and the HTML source view
- When only spaces are selected

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `bubbleToolbar` | boolean | `true` | `false` turns the bubble off. |
| `colors` | string[] | built-in palette | Text color palette. When set, the bubble highlight button uses this list too. |

---

# Auto replace and links

> (c) → ©, -> → → while typing, and typed addresses that become links.

Source: https://82editor.com/en/docs/auto-replace/

While typing, `(c)` becomes ©, `->` becomes →, and web or e-mail addresses become links after a space or `Enter`. Press `Ctrl`+`Z` right after to get back what you typed.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link unlink',
  autoReplace: {
    '1/2': '½',
    '(v)': '✓',
    '<-': '',
  },
});
```

## Built-in rules

| Type | Result |
| --- | --- |
| `(c)` `(C)` | © |
| `(r)` `(R)` | ® |
| `(tm)` `(TM)` | ™ |
| `(주)` | ㈜ |
| `->` / `<-` | → / ← |
| `=>` | ⇒ |
| `<=` / `>=` / `!=` | ≤ / ≥ / ≠ |
| ` -- ` (spaces around) |  —  |

- Nothing is replaced inside code blocks or inline code.
- Nothing is replaced inside an address being typed (`https://a.com/(c)`, `a->b@x.com`).
- Each replacement is its own undo step, so `Ctrl`+`Z` gives back the typed text.

## Adding and removing rules

An object adds to the built-in rules. An empty value turns that one rule off. `false` turns all of them off.

```js
createEditor('#editor', {
  autoReplace: {
    '(v)': '✓',  // a new rule
    '<-': '',     // turn one built-in rule off
  },
});

createEditor('#editor', { autoReplace: false }); // all off
```

## Auto links

Addresses starting with `https://`, `http://` or `www.`, and e-mail addresses, become links after a space or `Enter`. `www.` gets `https://`; e-mail gets `mailto:`.

- Korean particles glued to the domain stay outside the link: in `naver.com에서` only `naver.com` is linked.
- Trailing periods, commas and closing brackets are left out; a closing parenthesis stays when the address has its opening one (wiki links).
- Nothing happens inside an existing link or code. One undo removes the link.
- On save, `linkRel` (e.g. `'nofollow ugc'`) is added to these links too. See [Links](https://82editor.com/en/docs/links/).

```html
<p>Read more at <a href="https://www.82editor.com">www.82editor.com</a> today.</p>
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `autoReplace` | boolean \| Record<string, string> | `true` | Symbol replacements while typing. An object adds rules; an empty value turns one off. |
| `autoLink` | boolean | `true` | Typed web and e-mail addresses become links after a space or Enter |

---

# Mentions

> Type @ to find and insert a person; the search is yours.

Source: https://82editor.com/en/docs/mentions/

Type `@` and a name, pick a person from the list, and an `@name` chip goes in. For comments and team boards. Your site supplies the people through a `search` function.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link',
  mentions: {
    trigger: '@',
    search: (q) => [
      { id: 'minsu', label: 'Minsu Kim' },
      { id: 'jiyoung', label: 'Jiyoung Lee' },
      { id: 'junho', label: 'Junho Park' },
      { id: 'seoyeon', label: 'Seoyeon Choi' },
    ].filter((u) => u.label.toLowerCase().includes(q.toLowerCase())),
  },
});
```

## How it works

- It starts with `@` at the start of a line, after a space or after an opening parenthesis. An @ inside a word (`a@b`) does not.
- Right after `@`, `search('')` is called with an empty query; returning frequent contacts works well.
- The query is up to 30 characters with no spaces. With an IME, the letters still being composed are searched too.
- Up to eight results show, with the `id` as a small hint. `↑` `↓`, `Enter`/`Tab` and `Esc` work.
- An inserted mention is one piece: it can't be edited inside and is deleted as a whole. A space follows it.

## Searching on your server

`search` may return an array or a Promise. It runs on every keystroke; a late answer to an older query is dropped.

```js
createEditor('#editor', {
  mentions: {
    search: async (q) => {
      const res = await fetch('/api/members?q=' + encodeURIComponent(q));
      return res.json(); // [{ id: 'minsu', label: 'Minsu Kim' }, …]
    },
  },
});
```

## Saved HTML

```html
<p><span data-mention="minsu">@Minsu Kim</span>, please check.</p>
```

Your server reads `span[data-mention]` to know who was mentioned, for example to send notifications.

> Saved HTML can be edited by the user before it reaches you. Before notifying anyone from a `data-mention` value, check on the server that the person exists and that the writer may mention them.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `mentions` | object | — | Turns mentions on. |
| `mentions.trigger` | string | `'@'` | Character that opens the list (e.g. `'#'`) |
| `mentions.search` | (q) => MentionItem[] \| Promise | — | Gets the query, returns `{ id, label }` items. |

---

# Merge tags

> Placeholders such as {{name}} that your server fills in later, for mail and notice templates.

Source: https://82editor.com/en/docs/merge-tags/

For mail and notice templates where each reader gets their own name or order number, insert placeholders such as `{{name}}`. In the editor they are chips that can't be edited; on save they are plain text for your server to fill in.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link | mergeTag',
  mergeTags: [
    { label: 'Recipient', value: '{{name}}' },
    { label: 'Order number', value: '{{order_no}}' },
    { label: 'Today', value: '{{today}}' },
  ],
});
```

## How it works

- The `mergeTag` toolbar item lists `mergeTags` as `label  value`. Picking one puts a chip at the caret.
- Typing a known value in full turns it into a chip on the spot. Values in loaded content (`value`, `setHTML`) become chips too.
- A chip is one piece: no editing inside, deleted as a whole. Text in code blocks and inline code is left alone.
- In the `full` preset it sits in the ⋯ more menu. `basic` and `board` do not have it; add it to your toolbar.

## Saved HTML

The chip markup is removed on save; only the value text is left.

```html
<p>Hi {{name}}, your order shipped today.</p>
<p>Order number: {{order_no}}</p>
```

## Filling them in on the server

Any value format works (`{{name}}`, `%NAME%`, `[name]` …); match your template engine. Always HTML-escape the values you put in.

```js
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';');

function fill(html, data) {
  return html.replace(/\{\{(\w+)\}\}/g, (_, key) => esc(data[key] ?? ''));
}

fill(savedHtml, { name: 'Minsu', order_no: 'A-1024', today: '2026-10-21' });
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `mergeTags` | { label, value }[] | — | Menu label and the text that is saved |
| `mergeTag` | toolbar item | — | The merge tag menu |

---

# Enter key mode

> Choose whether Enter starts a paragraph or breaks the line (enterMode).

Source: https://82editor.com/en/docs/enter-mode/

By default `Enter` starts a new paragraph (`<p>`) and `Shift`+`Enter` breaks the line (`<br>`). `enterMode: 'br'` swaps them. Use it when existing posts were written with `<br>` lines, or when Enter should not leave a paragraph gap.

```js
createEditor('#editor', {
  toolbar: 'bold | bulletList | table',
  enterMode: 'br',
});
```

## Side by side

|  | 'p' (default) | 'br' |
| --- | --- | --- |
| `Enter` | New paragraph | Line break |
| `Shift`+`Enter` | Line break | New paragraph |
| `Enter` in a table cell | New line in the cell | Line break (`Shift`+`Enter` too) |

```html
<!-- enterMode: 'p', Enter after each line -->
<p>First line</p>
<p>Second line</p>

<!-- enterMode: 'br', Enter after each line -->
<p>First line<br>Second line</p>
```

## The same in both modes

- Lists, headings, code blocks, fold titles and image captions keep their usual Enter.
- Enter on an empty last line of a quote, callout or fold leaves the box.
- Enter on an empty last line of a code block leaves the code block.
- Enter on an empty heading right after a heading turns it into a paragraph.

> In either mode, the gap between paragraphs comes from the CSS of the page that shows the post. If paragraphs look too far apart, a smaller margin such as `p { margin: 0 0 .5em }` may be all you need.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enterMode` | 'p' \| 'br' | `'p'` | `'p'`: Enter new paragraph, Shift+Enter line break. `'br'`: the other way round. |

---

# Moving blocks

> Drag paragraphs, tables and images by a grip, or use Alt+Shift+↑/↓.

Source: https://82editor.com/en/docs/block-drag/

Hover to the left of a paragraph, heading, list, table or image and a grip appears. Drag it and drop the block somewhere else. From the keyboard, use `Alt`+`Shift`+`↑`/`↓`. Faster than cut and paste, and the formatting stays.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | table',
  height: 320,
});
```

## Dragging

- What moves is a top-level block. Lists, tables, quotes and callouts move whole.
- A line shows where the block will land. In an editor with a fixed height, dragging to the top or bottom edge scrolls.
- The grip only appears with two or more blocks, and hides once you start typing.
- No grip on touch screens, in read-only mode or in the HTML source view.

## Keyboard

- `Alt`+`Shift`+`↑` / `↓` swaps the block at the caret with the one above or below. The caret stays inside it.
- With an image selected, the block holding it moves.
- Maps, link cards, attachments and HTML blocks show Move up / Move down buttons in their bar when selected; on touch screens use those.
- Each move is one undo step.

## From code

```js
// move a top-level block before another one (null: to the end)
const blocks = editor.content.children;
editor.moveBlock(blocks[2], blocks[0]);
editor.moveBlock(blocks[0], null);

// move the block at the caret one step
editor.exec('moveBlockUp');
editor.exec('moveBlockDown');
```

> The first argument of `moveBlock` must be a direct child of `editor.content`; otherwise nothing happens.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `dragHandle` | boolean | `true` | `false` hides the drag grip. Keyboard moves still work. |
| `moveBlock(block, before)` | method | — | Move a block before `before`; one undo step. |
| `moveBlockUp` / `moveBlockDown` | command | — | One-step moves for `editor.exec()` |

---

# Find and replace

> Ctrl+F to find in the content, Ctrl+H to replace.

Source: https://82editor.com/en/docs/find-replace/

Find words in a long post, or replace them all at once. Inside the editor, `Ctrl`+`F` opens find and `Ctrl`+`H` adds the replace row. A find bar opens at the top of the editor instead of the browser's page search.

```js
createEditor('#editor', {
  toolbar: 'findReplace | undo redo',
});
```

## How it works

- Open it with text selected (one line, under 100 characters) and that text is the search.
- All matches are painted, the current one stronger, with a count like `3/7`. It starts at the first match after the caret.
- In the find box `Enter` is next and `Shift`+`Enter` previous. In the replace box `Enter` replaces the current match. `Esc` closes.
- **Match case** tells upper and lower case apart.
- **Replace all** is one undo step.
- A match never spans paragraphs; within one it may cross formatting such as bold.

The toolbar item is `findReplace`. In the `board` and `full` presets it is in the ⋯ more menu; the shortcuts work without it. Find works in read-only mode, replace does not.

> Matches are painted with the browser's CSS Highlight API. Older browsers without it select the current match instead.

## From code

```js
editor.exec('findReplace'); // find
editor.exec('replace');     // with the replace row
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `findReplace` | toolbar item | — | Open the find and replace bar |
| `Ctrl`+`F` / `Ctrl`+`H` | shortcut | — | Find / replace (`⌘` on macOS) |

---

# Korean input

> What waits while Korean (IME) text is composed, and what runs after.

Source: https://82editor.com/en/docs/korean-input/

While a Korean syllable is being composed from its letters, the browser and the input method keep rewriting the text. If the editor steps in at that moment, letters break or the first one is left behind. 82editor keeps its hands off during composition and does its work once it ends. The same goes for Japanese and Chinese input.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList checklist',
  mentions: {
    search: (q) => [
      { id: 'minsu', label: '김민수' },
      { id: 'minji', label: '김민지' },
      { id: 'jiyoung', label: '이지영' },
    ].filter((u) => u.label.includes(q)),
  },
});
```

## What waits during composition

- Key handling: shortcuts, `Enter`, `Tab` and your own `shortcuts` are left to the input method.
- Markdown rules, auto links, auto replace and content cleanup
- Undo history. `Ctrl`+`Z` and redo are ignored while composing.
- The `input` and `change` events and the textarea sync

One thing does run: an open slash menu or @ mention list re-reads its query, letters in composition included, so the list narrows while you type `@김`.

## When composition ends

- Menus, undo history and the `change` event run once. Chrome and Safari fire events in a different order; both are handled once.
- Starting a composition closes the current undo step, so earlier typing is a step of its own.
- Markdown rules and auto replace run on the space or mark typed after composition. `(주)` becomes ㈜ when the closing parenthesis is typed.

## Korean-specific care

- Right after the list button, and right after a merge tag chip, the first letter used to be left behind (`ㄴ님`); the caret is now put where the input method expects it.
- Read-only mode blocks composed input too, since Chrome accepts it even in non-editable content.
- Auto links leave a Korean particle after the domain out of the link (`naver.com에서`).
- The slash menu and emoji search match Korean initial consonants (`ㅍ` → 표).

## Writing plugins

If you add your own `keydown` or `input` listeners to the editor, do nothing during composition. This is the same check the editor uses.

```js
editor.content.addEventListener('keydown', (e) => {
  if (e.isComposing || e.keyCode === 229) return; // IME composition
  // …
});

// work that follows edits belongs in the change event (it comes after composition)
editor.on('change', (html) => { /* … */ });
```

## Options

There are no options just for Korean input. These turn on or off the features that run after composition.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `markdownShortcuts` | boolean | `true` | [Markdown](https://82editor.com/en/docs/markdown/) rules |
| `autoReplace` | boolean \| object | `true` | [Auto replace](https://82editor.com/en/docs/auto-replace/) |
| `autoLink` | boolean | `true` | Addresses become links |
| `mentions` | object | — | [Mentions](https://82editor.com/en/docs/mentions/) |

---

# Security (XSS)

> What the editor filters, and why your server must filter too.

Source: https://82editor.com/en/docs/security/

82editor filters every HTML input (`setHTML`, paste, drop, source view) through an allow-list. No `script` or `style` tags, `on*` attributes, `javascript:` URLs or unapproved iframes survive.

> An attacker can skip the browser editor entirely. Always sanitize again on the server before saving.

## Server-side libraries

| Language | Library |
| --- | --- |
| PHP | [HTML Purifier](https://github.com/ezyang/htmlpurifier) |
| Node | [DOMPurify](https://github.com/cure53/DOMPurify) with jsdom, or sanitize-html |
| Java | [OWASP Java HTML Sanitizer](https://github.com/OWASP/java-html-sanitizer), jsoup Safelist |
| Python | nh3 |

Match your allow-list to the editor output: `p br div span h1-h6 strong em u s sub sup code pre blockquote ul ol li a img figure figcaption table thead tbody tr th td caption colgroup col hr mark nav iframe font`, with `style`, `href`, `src`, `alt`, `colspan`, `rowspan`, `data-checklist`, `data-checked`, `data-video`. iframes only from YouTube, Vimeo, Naver TV, Kakao TV and Dailymotion.

---

# Saved HTML

> What getHTML returns, phone-ready output and textarea sync.

Source: https://82editor.com/en/docs/saved-html/

When saving, read the post with `editor.getHTML()`. Editor-only markup is removed and the result is filtered through the allow-list. A few extras are added to images and tables so posts fit on phones.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link image table',
  height: 320,
});
```

## What changes on the way out

- An empty editor returns `''`, not an empty `<p><br></p>`.
- Selection marks, uploads in progress, drag handles and other editing UI are removed.
- **Images** get `max-width: 100%; height: auto` in `style`, plus `width`/`height` from the natural size when they have neither. No overflow on phones, no layout jump while loading.
- **Tables** are wrapped in `<div data-table-wrap style="overflow-x: auto">` so they scroll sideways on narrow screens. The wrapper is taken off again when the post is loaded back.
- **Lazy loading**: images after the first get `loading="lazy"`. The first is usually on screen right away.
- With `linkRel`, every http(s) link gets that `rel`. See [Links](https://82editor.com/en/docs/links/).

```html
<h2>Summer camping trip</h2>
<p><img src="https://…/camp.jpg" alt="Campsite" width="640" height="360" style="max-width: 100%; height: auto"></p>
<p><img src="https://…/fire.jpg" alt="Campfire" width="640" height="360" style="max-width: 100%; height: auto" loading="lazy"></p>
<div data-table-wrap="" style="overflow-x: auto"><table>…</table></div>
```

Turn these off with `responsiveOutput: false` and `lazyImages: false`. For the HTML exactly as edited, use `editor.editHTML()`; the source view and autosave drafts use it.

## With a textarea

Pass a `<textarea>` to `createEditor` and its value is set to `getHTML()` on every change and right before the form submits, so the server reads the same field as before. See [Textarea and forms](https://82editor.com/en/docs/textarea-form/).

## Listening for changes

```js
const editor = createEditor('#editor', {
  onChange: (html) => preview.innerHTML = html,
});
// or
editor.on('change', (html) => { /* … */ });
```

The `change` event fires once typing pauses, and only when the output HTML really changed. For plain text use `getText()`; for Markdown, `getMarkdown()` ([Markdown](https://82editor.com/en/docs/markdown/)).

> Filter the HTML again on the server even though the editor already did. See [Security](https://82editor.com/en/docs/security/).

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `responsiveOutput` | boolean | `true` | Images get `max-width:100%; height:auto` and natural width/height; tables get a sideways-scroll box |
| `lazyImages` | boolean | `true` | `loading="lazy"` on images after the first |
| `linkRel` | string | - | rel added to http(s) links; only `nofollow`, `sponsored`, `ugc` are taken |
| `onChange` | (html) => void | - | Saved HTML on every change |
| `getHTML()` | method | - | HTML to save; `''` when empty |
| `editHTML()` | method | - | HTML as edited, without the extras above |
| `getText()` | method | - | Plain text with line breaks between blocks |
| `isEmpty()` | method | - | True when there is no text, image, table or video |

---

# E-mail HTML

> getHTML({ inlineStyles: true }) writes styles into style attributes.

Source: https://82editor.com/en/docs/email-html/

Mail apps drop most `<style>` blocks and stylesheets. If you write newsletters or notices in the editor, read them with `getHTML({ inlineStyles: true })`: the fonts, sizes, colors and spacing you see in the editor are written into each tag's `style` attribute.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | color | bulletList | link',
  contentStyle: 'font-family: Georgia, serif; font-size: 16px; line-height: 1.7;',
  onReady: (ed) => {
    const out = document.createElement('pre');
    out.style.cssText = 'white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto';
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = 'Show e-mail HTML';
    btn.onclick = () => { out.textContent = ed.getHTML({ inlineStyles: true }); };
    ed.statusEl.prepend(btn);
    ed.root.after(out);
  },
});
```

Compare the saved HTML (button below) with the e-mail HTML (button under the editor).

## How it works

- The HTML is laid out once off screen at the editor's width, and the computed styles are read.
- Inherited values (font, size, weight, color, line height, alignment) are written only where they differ from the parent.
- Non-inherited values (background, margin, padding, borders, radius) are written only where they differ from the bare tag.
- Everything is wrapped in `<div style="font-family: …; font-size: …; line-height: …; color: …">`.
- Looks from `contentStyle` and from `styles` menu classes come through as computed values.

```js
const html = editor.getHTML({ inlineStyles: true });
await fetch('/newsletter', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ subject, html }),
});
```

> It reads computed styles, so call it in the browser while the editor is on the page. The output is larger; for posts shown on your own site, save plain `getHTML()`.

> The saved-page extras ([Saved HTML](https://82editor.com/en/docs/saved-html/)) are applied here too.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `getHTML({ inlineStyles })` | boolean | `false` | true: HTML with styles written into style attributes |
| `contentStyle` | string | - | CSS for the editing area; computed into the e-mail HTML too |

---

# Autosave

> Keep a draft in the browser and offer to restore it.

Source: https://82editor.com/en/docs/autosave/

With `autosave` on, the post is saved to the browser (localStorage) every few seconds. If the tab closes or the browser crashes, the next visit shows a "You have an unsaved draft" bar above the editor with **Restore** and **Discard**.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList',
  autosave: { key: 'docs-autosave-demo', interval: 1000 },
});
```

## Behavior

- Saves every `interval` (default 3 seconds), only when the content changed; also once on `destroy()`.
- The storage key is `e82:draft:` plus `key`; without `key` the page path (`location.pathname`) is used.
- On load, a draft that differs from the initial content brings up the restore bar. Restoring is an ordinary undoable change.
- Clearing all content removes the draft.
- An editor on a `<textarea>` clears the draft when the form is submitted.

## Clearing the draft after saving

If you save with fetch, call `clearAutosave()` once the save succeeds, so the next visit does not offer to restore a post that is already saved.

```js
const editor = createEditor('#editor', {
  autosave: { key: 'board-write' },
});

saveButton.addEventListener('click', async () => {
  const res = await fetch('/posts', { method: 'POST', body: editor.getHTML() });
  if (res.ok) {
    editor.clearAutosave();
    editor.markClean();
  }
});
```

> With several editors on one page, or write and edit screens on the same path, give each its own `key` (e.g. `'post-' + postId`). Editors sharing a key overwrite each other's drafts.

Drafts stay in that browser only: they do not follow the writer to another device, and on a shared PC the next person can see them. To undo bigger mistakes see [Revisions](https://82editor.com/en/docs/revisions/); to warn before leaving see [Unsaved changes](https://82editor.com/en/docs/unsaved-changes/).

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `autosave` | boolean \| object | `false` | true or an object turns it on |
| `autosave.key` | string | page path | localStorage key (after `e82:draft:`) |
| `autosave.interval` | number | `3000` | Milliseconds between saves |
| `clearAutosave()` | method | - | Remove the stored draft |

---

# Unsaved changes

> isDirty, markClean and confirmLeave: warn before leaving.

Source: https://82editor.com/en/docs/unsaved-changes/

Leaving a page with unsaved edits loses them. With `confirmLeave: true`, the browser asks "Leave site?" whenever there are changes that have not been saved.

```js
createEditor('#editor', {
  toolbar: 'bold italic underline | link',
  confirmLeave: true,
  onReady: (ed) => {
    const state = document.createElement('span');
    const save = document.createElement('button');
    save.type = 'button';
    save.textContent = 'Save';
    const show = () => { state.textContent = ed.isDirty() ? 'Unsaved' : 'Saved'; };
    save.onclick = () => { ed.markClean(); show(); };
    ed.on('change', show);
    ed.statusEl.prepend(state, save);
    show();
  },
});
```

## Three pieces

- `isDirty()`: true when the content differs from what was loaded, or from the last `markClean()`. Undo back to the same text and it is false again.
- `markClean()`: mark the current content as saved. Call it after your server save succeeds.
- `confirmLeave`: when true, leaving the page (`beforeunload`) asks only if `isDirty()` is true.

```js
const editor = createEditor('#editor', { confirmLeave: true });

async function save() {
  const res = await fetch('/posts/12', { method: 'PUT', body: editor.getHTML() });
  if (res.ok) editor.markClean(); // leaving no longer asks
}
```

An editor on a `<textarea>` counts a form submit as a save, so the submit button does not trigger the prompt.

> The browser decides the wording of the prompt; sites cannot change it. Phone browsers sometimes close tabs without asking, so turning on [Autosave](https://82editor.com/en/docs/autosave/) as well is safer.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `confirmLeave` | boolean | `false` | Ask before leaving when there are unsaved changes |
| `isDirty()` | method | - | True when changed since the last save |
| `markClean()` | method | - | Mark the current content as saved |

---

# Revisions

> Versions kept every minute while writing; compare and restore.

Source: https://82editor.com/en/docs/revisions/

While you write, the editor keeps earlier states of the post as versions. The `revisions` button lists them, shows what changed against the current text, and restores the one you pick. Use it when undo would have to go back too far.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList | revisions',
  revisions: { key: 'docs-revisions-demo', interval: 5000 },
});
```

## Behavior

- Every `interval` (default one minute), and when the editor loses focus, it checks for changes. If there are any, the state before them is kept as a version.
- Only the latest `max` versions (default 20) are kept.
- The list shows time and length. Picking one shows, word by word, what was deleted since (struck through) and what was added (underlined).
- **Restore this version** is an ordinary undoable change: `Ctrl`+`Z` brings the text back.

## Where versions live

With only the `revisions` toolbar item, versions last for this page view (gone on reload). With `revisions: true` or an object, they are stored in localStorage under `e82:rev:` + `key` and survive a reload; without `key` the page path is used.

```js
createEditor('#editor', {
  toolbar: 'board',              // board and full have it under the ⋯ menu
  revisions: { key: 'post-' + postId, max: 30 },
});
```

The toolbar item is `revisions`. It sits in the ⋯ menu of the `board` (default) and `full` presets, not in `minimal` or `basic`.

> Versions stay in that browser only. For history on the server, store a copy on every save yourself.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `revisions` | toolbar item | - | Opens the revisions dialog |
| `revisions` | boolean \| object | this page view | true or an object stores versions in localStorage |
| `revisions.key` | string | page path | Storage key (after `e82:rev:`) |
| `revisions.max` | number | `20` | Versions kept |
| `revisions.interval` | number | `60000` | Milliseconds between checks |

---

# Word count and limits

> Status bar counts, maxLength and getStats.

Source: https://82editor.com/en/docs/word-count/

The status bar under the editor shows characters, characters without spaces, words and bytes. For comments or short bios that need a length limit, set `maxLength`.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link',
  maxLength: 100,
  height: 180,
});
```

## How it counts

- **Characters**: everything except line breaks. A Hangul syllable counts as one.
- **Without spaces**: spaces and line breaks left out.
- **Words**: runs of text separated by whitespace.
- **Bytes**: UTF-8; a Hangul syllable is 3 bytes.

## maxLength

With `maxLength`, the status bar reads like `87 / 100`; past the limit the number and border turn red. Typing is not blocked. While over the limit, every change fires a `maxlength` event, which you can use to disable a submit button or show a hint.

```js
const editor = createEditor('#editor', { maxLength: 2000 });

editor.on('maxlength', ({ length, max }) => {
  submit.disabled = true;
  hint.textContent = (length - max) + ' characters over';
});
editor.on('change', () => {
  if (editor.getStats().chars <= 2000) submit.disabled = false;
});
```

> Check the limit on the server too, counting text with the HTML tags removed so the numbers match the editor.

## getStats()

```js
editor.getStats();
// { chars: 87, charsNoSpace: 70, words: 18, bytes: 245, paragraphs: 2 }
```

`paragraphs` counts non-empty paragraphs, headings, list items, quotes and code blocks. Hide the bar with `statusbar: false`; the resize grip at the bottom goes with it.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `statusbar` | boolean | `true` | Show the status bar (counts and resize grip) |
| `maxLength` | number | - | Character limit; over it the editor turns red and fires `maxlength` |
| `getStats()` | method | - | `{ chars, charsNoSpace, words, bytes, paragraphs }` |
| `maxlength` | event | - | `{ length, max }` on every change while over |

---

# Read-only

> Show content that cannot be edited with readOnly and setReadOnly.

Source: https://82editor.com/en/docs/read-only/

For approved documents, closed posts, or viewers without edit rights: the content looks the same as in the editor but cannot be changed. Start with `readOnly: true` or switch with `editor.setReadOnly(true)`.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | link | preview fullscreen',
  readOnly: true,
  onReady: (ed) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = 'Edit';
    btn.onclick = () => {
      ed.setReadOnly(!ed.readOnly);
      btn.textContent = ed.readOnly ? 'Edit' : 'Make read-only';
    };
    ed.statusEl.prepend(btn);
  },
});
```

## What changes

- No typing or pasting, and no caret.
- Most toolbar buttons are disabled. These stay on: `findReplace`, `preview`, `print`, `fullscreen`, `help`.
- Checklist boxes do not toggle, and clicking images, tables or boxes does not bring up their bars.
- Folded sections ([Details](https://82editor.com/en/docs/details/)) show folded as saved, and readers can open them. Back in edit mode they open up again.
- The editor gets the `is-readonly` class for your CSS.

```js
const editor = createEditor('#editor', { readOnly: !canEdit });

editButton.addEventListener('click', () => editor.setReadOnly(false));
console.log(editor.readOnly); // current state
```

> Read-only only stops the screen. If a post must not change, reject the save on the server.

For a plain view page, putting the saved HTML into the page is lighter than loading an editor.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `readOnly` | boolean | `false` | Start read-only |
| `setReadOnly(ro)` | method | - | Turn read-only on or off |
| `readOnly` | property | - | Whether it is read-only now |

---

# HTML source view

> View and edit the HTML with the source button.

Source: https://82editor.com/en/docs/source-view/

The `source` button turns the editing area into an HTML code view. Use it to fix tags by hand or to drop in HTML made elsewhere. Press it again and the edited HTML goes back into the editor.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | link | source',
});
```

## Using it

- Shortcut: `Ctrl`+`Shift`+`U` opens and closes it.
- The HTML is shown indented, with tags and attributes colored.
- `Tab` inserts two spaces instead of moving focus.
- On close, the HTML is filtered through the allow-list (no `<script>`, no `on*` attributes) and applied as an undoable change.
- Closing without edits leaves the content untouched, with no undo step.
- While it is open, only `source`, `preview`, `print`, `fullscreen`, `help`, `undo` and `redo` work.

The toolbar item is `source`, in the ⋯ menu of the `board` (default) and `full` presets. In code, `editor.toggleSource()` opens and closes it, and the `source` event reports open (true) or closed (false).

```js
editor.on('source', (open) => {
  saveButton.disabled = open; // close the code view before saving
});
editor.toggleSource(true);
```

Calling `getHTML()` while the code view is open returns the filtered HTML from the code view, so nothing is lost.

> On boards where visitors write, leave this button out. The HTML is still filtered, but ordinary users do not need it.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `source` | toolbar item | - | Open or close the HTML code view |
| `toggleSource(open?)` | method | - | Open (true), close (false) or toggle (omitted) |
| `source` | event | - | true when opened, false when closed |
| `allowedTags` | string[] | - | Allowed tags ([Security](https://82editor.com/en/docs/security/)) |
| `allowedAttributes` | object | - | Allowed attributes per tag |

---

# Preview and print

> Preview at phone, tablet and desktop width; print just the post.

Source: https://82editor.com/en/docs/preview-print/

The `preview` button shows the saved HTML the way readers will see it, at phone, tablet or desktop width, so you can check how images and tables fit. The `print` button prints just the post, without the toolbar.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | image table | preview print',
  height: 300,
});
```

## Preview

- Pick **Phone** (360px), **Tablet** (768px) or **Desktop** (full width). It opens at Desktop.
- It shows the `getHTML()` output, with the [saved HTML](https://82editor.com/en/docs/saved-html/) extras such as fitted images and sideways-scrolling tables.
- The toolbar item is `preview`, in the ⋯ menu of the `board` (default) and `full` presets.

## Print

- The `getHTML()` output goes into a hidden frame with a small print stylesheet, and the browser print dialog opens. No toolbar or editor border is printed.
- A [page break](https://82editor.com/en/docs/dividers/) (`pageBreak`) starts a new sheet.
- Checklists print as ☐ / ☑.
- The toolbar item is `print`; only the `full` preset has it (in the ⋯ menu). Add it to `toolbar` yourself elsewhere.

Both work in [read-only](https://82editor.com/en/docs/read-only/) mode and while the source view is open. From code, call `editor.exec('preview')` or `editor.exec('print')`.

> Preview and print use the editor's default content look. CSS from `contentStyle` applies only to the editing area, so it does not show here.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `preview` | toolbar item | - | Preview dialog at phone, tablet or desktop width |
| `print` | toolbar item | - | Print the post only |
| `exec('preview')` | method | - | Open the preview from code |
| `exec('print')` | method | - | Open the print dialog from code |

---

# Toolbar

> Presets, ordering and custom buttons.

Source: https://82editor.com/en/docs/toolbar/

## Presets

| Name | For |
| --- | --- |
| `'minimal'` | Comments: bold, italic, link, lists |
| `'basic'` | Simple posts: headings, formatting, lists, links, images |
| `'board'` | Default for boards: fonts, sizes, colors, alignment, line height, tables, images, video |
| `'full'` | Everything: special characters, emoji, find, source, accessibility check, templates… |

## Pick your own

A string of names separated by spaces; `|` is a separator. An array of arrays works too, one group per array.

```js
createEditor('#editor', {
  toolbar: 'undo redo | heading fontSize | bold italic underline color | alignMenu | bulletList orderedList | link image table | more | findReplace source',
});
```

| Group | Names |
| --- | --- |
| History | `undo redo` |
| Paragraph | `heading fontFamily fontSize lineHeight` |
| Text | `bold italic underline strike subscript superscript code color highlight clearFormat caseChange formatPainter` |
| Align and lists | `alignMenu alignLeft alignCenter alignRight alignJustify bulletList orderedList checklist listStyle indent outdent` |
| Insert | `link image video table hr hrStyle pageBreak blockquote quoteStyle callout details gallery columns codeBlock specialChars emoji template toc anchor datetime` |
| From elsewhere | `embed linkCard file htmlBlock` (`file` only with uploadFile or uploadUrl) |
| Site-specific | `styles mergeTag` (only with the `styles` / `mergeTags` options) |
| Tools | `findReplace source preview print fullscreen a11y help` |
| Separators | `\|` starts a group; items after `more` go into the ⋯ menu |

> Preset strings are in `Editor82.PRESETS`.

## Add your own button

```js
editor.addButton('signature', {
  icon: '<svg viewBox="0 0 20 20"><path d="M3 15c3-6 5-6 6-2s3 3 8-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>',
  title: 'Insert signature',
  onAction: (ed) => ed.insertHTML('<p>The support team</p>'),
});
// put 'signature' in the toolbar string to place it
```

---

# Languages

> Korean, English, Japanese and Chinese UI; overriding strings.

Source: https://82editor.com/en/docs/i18n/

Korean and English are built in. Without `language`, the page `<html lang>` decides. Japanese and Simplified Chinese are loaded and registered separately to keep the bundle small (on the CDN, add `/cdn/v1.1.2/locales/ja.js` after the main script).

```js
import { createEditor, registerLocale } from '@82editor/core';
import ja from '@82editor/core/locales/ja';

registerLocale('ja', ja);
```

```js
createEditor('#editor', {
  language: 'en',
  locale: { placeholder: 'Tell us more' }, // override single strings
});
```

---

# Themes and contentStyle

> Dark mode, colors, and matching your view page.

Source: https://82editor.com/en/docs/theming/

`theme: 'auto'` follows the OS. If your site has its own toggle, call `editor.setTheme('dark')`.

## Colors

The editor uses CSS variables; override them to match your site.

```js
.e82 {
  --e82-accent: #0f73e5;
  --e82-radius: 6px;
  --e82-font: 'Inter', sans-serif;
}
```

## Match your view page

```js
createEditor('#editor', {
  // goes inside the editing area (.e82-content): plain declarations, nested rules for inner elements
  contentStyle: 'font-family: Georgia, serif; font-size: 17px; line-height: 1.7;',
});
```

---

# Toolbar layout

> Fold or wrap overflowing buttons, compact and sticky toolbars, the phone toolbar.

Source: https://82editor.com/en/docs/toolbar-layout/

How the toolbar behaves when it has more buttons than fit. By default it keeps one row and folds the rest into the ⋯ menu. Which buttons to show is covered in [Toolbar](https://82editor.com/en/docs/toolbar/).

```js
createEditor('#editor', {
  toolbar: 'full',
  toolbarMode: 'wrap',
  toolbarDensity: 'compact',
  toolbarSticky: true,
});
```

## Overflow: fold or wrap

- `toolbarMode: 'more'` (default) keeps one row. Groups that don't fit move into the ⋯ menu as a whole, starting from the end; if a single group is still too wide, its last buttons move one by one. It recalculates when the editor's width changes.
- `toolbarMode: 'wrap'` lets buttons flow onto more rows. Good for wide admin screens where every button should be visible.
- In both modes, buttons after `more` in the toolbar string always start in the ⋯ menu. The ⋯ button only appears when it has something to show.

```js
createEditor('#editor', {
  // the first part is always visible, everything after more is in ⋯
  toolbar: 'heading | bold underline color | link image | more | findReplace source',
  toolbarMode: 'wrap',
});
```

## Compact toolbar

`toolbarDensity: 'compact'` tightens the spacing: 26px buttons (32px on phones). Use it for comment boxes or narrow side panels.

## Sticky toolbar

`toolbarSticky` is on by default: the toolbar stays at the top of the screen while you scroll through a long post. If a fixed site header covers it, move it down with CSS.

```css
.e82-toolbar.is-sticky { top: 64px; } /* your header height */
```

With a numeric `height` the content scrolls inside the editor, so the toolbar never leaves anyway. Sticking matters for editors that grow with their content (see [Editor size](https://82editor.com/en/docs/editor-size/)).

## Phone toolbar

At 640px wide or less, or on touch screens, the toolbar switches to its phone layout.

- Buttons grow to 40px and the toolbar becomes one row you swipe sideways. The ⋯ button stays pinned at the right.
- With no toolbar set, or `'board'`, the row starts with image, bold, text color, paragraph style, bullet list, center, link and undo; the rest goes into ⋯.
- Your own toolbar strings and the other presets keep their order, shown as one swipeable row.
- Rotating the phone redraws the toolbar.

## Keyboard

One `Tab` reaches the toolbar; inside it `←` `→` `Home` `End` move between buttons. See [Accessibility](https://82editor.com/en/docs/accessibility/).

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `toolbarMode` | `'more' \| 'wrap'` | `'more'` | Fold overflowing buttons into ⋯, or wrap them onto more rows |
| `toolbarDensity` | `'normal' \| 'compact'` | `'normal'` | Tighter buttons and groups, on phones too |
| `toolbarSticky` | `boolean` | `true` | Keep the toolbar at the top while the page scrolls |
| `toolbar` | `string \| array \| false` | `'board'` | Which buttons to show; `false` hides the toolbar. See [Toolbar](https://82editor.com/en/docs/toolbar/) |
| `more` | toolbar item | - | In a toolbar string, everything after it goes into ⋯ |

---

# Editor size

> Height, growing with content, the resize grip, fullscreen and the placeholder.

Source: https://82editor.com/en/docs/editor-size/

Set the height of the writing area: fixed, growing with the content, or let the writer drag it taller and switch to fullscreen.

```js
createEditor('#editor', {
  toolbar: 'heading | bold color | bulletList | link image | fullscreen',
  height: 'auto',
  minHeight: 120,
  maxHeight: 320,
  placeholder: 'Tell us how we can help',
});
```

The demo starts empty, so the placeholder shows. Keep typing and it grows to 320px, then scrolls inside. Open fullscreen with the last toolbar button or `Ctrl`+`Shift`+`F`; `Esc` closes it.

## Setting the height

- With nothing set, the writing area is at least 300px and grows with the page as you write. The toolbar sticks to the top.
- A number such as `height: 400` fixes the height; longer content scrolls inside the editor.
- `height: 'auto'` grows with the content only. Use `minHeight` for the starting size and `maxHeight` for where it stops growing and starts scrolling.
- `minHeight` and `maxHeight` work with the other modes too. All numbers are pixels.

```js
// comment box: start small, grow
createEditor('#comment', { toolbar: 'minimal', height: 'auto', minHeight: 80, maxHeight: 240 });

// admin editor: fixed height
createEditor('#editor', { height: 500 });
```

## Resize grip

Drag the grip at the right end of the status bar to change the height (120px at least). `resizable: false` removes it, and it is not shown with `height: 'auto'`. It lives in the status bar, so `statusbar: false` hides it too. It is a mouse feature and does nothing on phones.

## Fullscreen

- The toolbar item is `fullscreen`. It is in the ⋯ menu of the `board` and `full` presets.
- `Ctrl`+`Shift`+`F` (`⌘`+`Shift`+`F` on Mac) toggles it; `Esc` closes it.
- The editor covers the window and the page stops scrolling. Text is centered at up to 860px wide, so it stays readable on big screens.
- It also works in read-only mode.

```js
editor.toggleFullscreen();      // toggle
editor.toggleFullscreen(false); // close

editor.on('fullscreen', (open) => {
  document.querySelector('.site-header').hidden = open;
});
```

## Placeholder

Faint text shown while the editor is empty. Without it you get the UI language default ("Start writing…" in English). It is also the accessible name of the writing area (`aria-label`), so say what the box is for. It is never part of the saved HTML.

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `height` | `number \| 'auto'` | - | A number fixes the height (px); `'auto'` grows with the content. Unset: at least 300px, growing with the page |
| `minHeight` | `number` | `300` | Minimum height (px). No default minimum when `height` is a number or `'auto'` |
| `maxHeight` | `number` | - | Stops growing here and scrolls inside |
| `resizable` | `boolean` | `true` | The height grip in the status bar; never with `height: 'auto'` |
| `placeholder` | `string` | language default | Hint shown while empty; also the area's accessible name |
| `statusbar` | `boolean` | `true` | The character count bar; hiding it also hides the grip |
| `fullscreen` | toolbar item | - | Toggle fullscreen (`Ctrl`+`Shift`+`F`) |

---

# Content style

> Match your view page with contentStyle; change the font, size, line height and color lists.

Source: https://82editor.com/en/docs/content-style/

If the editor and your view page look different, writers get confused. Put your view page CSS into the writing area with `contentStyle`, and trim the font, size, line height and color menus to what your site uses.

```js
createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold color',
  contentStyle: `
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    p { margin: 0 0 1em; }
    h2 { padding-bottom: 6px; border-bottom: 2px solid #333; }
  `,
  fontFamilies: [
    'Body=Georgia, serif',
    'Sans=Arial, Helvetica, sans-serif',
    'Mono=Courier New, monospace',
  ],
  fontSizes: [12, 14, 17, 20, 28],
  fontSizeUnit: 'px',
  lineHeights: [140, 160, 200],
  colors: ['#333333', '#888888', '#d6336c', '#1c7ed6', '#2b8a3e'],
});
```

## contentStyle

The CSS string applies only inside this editor's writing area: the editor nests it in `#editorId .e82-content { … }`. So you can write two kinds of things.

- Plain declarations such as `font-size: 17px;` apply to the whole writing area.
- Rules such as `p { … }`, `img { … }` or `.lead { … }` apply to elements inside it.
- `body { … }` does nothing, since there is no body inside the writing area. Write area-wide settings as plain declarations.
- Several editors on one page don't affect each other or the rest of your site.

```js
createEditor('#editor', {
  contentStyle: `
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
    img { max-width: 100%; }
    table td { border: 1px solid #ccc; }
  `,
});
```

> contentStyle only styles the editor; it is not part of the saved HTML. Use the same CSS on your view page. Load the 82editor stylesheet there and wrap posts in `<div class="e82-view">` to get the same headings, lists, tables and quotes as in the editor.

The base text size and line height also have CSS variables. For toolbar and dialog colors see [Themes](https://82editor.com/en/docs/theming/).

```css
.e82 { --e82-content-size: 17px; --e82-line: 1.6; }
```

## Menu lists

- `fontFamilies` the font menu, as `'Label=CSS font stack'`; without `=` the first font name is the label. The default list leads with Korean fonts (Pretendard, Malgun Gothic, Nanum…) and ends with Arial, Georgia, Times New Roman and Courier New. Fonts missing on the reader's computer fall back, so load web fonts on your site.
- `fontSizes` numbers for the size menu, in `fontSizeUnit` (`pt` by default, or `px`). Default: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36.
- `lineHeights` percentages for the line height menu. Default: 100, 130, 150, 160, 180, 200, 250. Picking one sets `line-height: 160%` on the paragraph.
- `colors` the text color palette (13 colors by default). "Custom" and recent colors stay. The floating format bar that appears over selected text uses this list for both its text and highlight palettes.

The "Default" entry at the top of each menu removes the chosen font, size or line height, falling back to contentStyle.

## Saved HTML

```html
<p style="line-height: 160%">
  <span style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #d6336c">Highlighted text</span>
</p>
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `contentStyle` | `string` | - | CSS for the writing area only: declarations for the whole area, rules for elements inside |
| `fontFamilies` | `string[]` | 12 fonts | `'Label=CSS font stack'` list (`fontFamily` menu) |
| `fontSizes` | `number[]` | `[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36]` | Size menu (`fontSize`) |
| `fontSizeUnit` | `'pt' \| 'px'` | `'pt'` | Unit for sizes |
| `lineHeights` | `number[]` | `[100, 130, 150, 160, 180, 200, 250]` | Line height menu, in percent (`lineHeight`) |
| `colors` | `string[]` | 13 colors | Text color palette (`color`) |

---

# Style menu

> Apply your site's own classes from a menu (the styles option).

Source: https://82editor.com/en/docs/styles/

If your site has set looks such as a lead paragraph or a notice box, list them in `styles`. Writers pick a name instead of fiddling with colors and sizes, and the saved HTML carries your site's classes.

```js
createEditor('#editor', {
  toolbar: 'styles | bold | bulletList',
  styles: [
    { title: 'Lead', block: 'p', className: 'lead' },
    { title: 'Subheading', block: 'h3', className: 'sub' },
    { title: 'Notice box', block: 'p', className: 'box' },
    { title: 'Highlighter', inline: 'mark', className: 'hl' },
    { title: 'Muted', inline: 'span', style: 'color: #868e96' },
  ],
  contentStyle: `
    .lead { font-size: 1.15em; color: #495057; }
    .sub { padding-left: 10px; border-left: 4px solid #2f6fed; }
    .box { padding: 12px 16px; background: #f1f3f5; border-radius: 8px; }
    .hl { background: #fff3bf; }
  `,
});
```

## Entries

Each entry in `styles` takes these fields. Give it a `className` or a `style` so the menu can tell where it is applied.

- `title` the name in the menu
- `block` a paragraph style: the paragraph becomes this tag and gets the class (`'p'`, `'h2'`, `'h3'`…).
- `inline` a text style: the selected text is wrapped in this tag (`'span'`, `'mark'`, `'small'`…). Nothing happens without a selection.
- `className` one class: letters, digits, `-` and `_`, up to 40 characters.
- `style` inline CSS instead of a class, written as `property: value` pairs joined with `; `, e.g. `'color: #868e96'`.

Leave out both `block` and `inline` to just add the class to the current paragraph, list item, heading or quote.

## On and off

Picking the same entry where it is already applied removes it. The menu button shows the style at the caret and the menu checks it. Entries with a `style` are previewed in that style.

## Toolbar and presets

- The toolbar item is `styles`. It is in the ⋯ menu of the `full` preset; `board` doesn't have it, so add it to your toolbar string.
- With an empty `styles` option the button never shows, even if listed.

## Classes and the sanitizer

82editor normally strips every `class` that arrives through paste or `setHTML`. Classes named in `styles` are the exception, so pasted content using the same class names keeps them too.

> CSS in `style` goes through the sanitizer as well: common properties (colors, spacing, borders, font size…) stay, others are dropped when saving. For anything elaborate, use a class and keep the CSS on your site.

The editor doesn't know what your classes look like. To see them while writing, add the same CSS to [contentStyle](https://82editor.com/en/docs/content-style/), as the demo does.

## Saved HTML

```html
<p class="lead">A paragraph with the Lead style.</p>
<h3 class="sub">Subheading</h3>
<p>Select a few words and pick <mark class="hl">Highlighter</mark>…</p>
<p><span style="color: #868e96">Muted text</span></p>
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `styles` | `StyleFormat[]` | - | Style menu entries; their classes pass the sanitizer |
| `title` | `string` | - | Menu label (required) |
| `block` | `string` | - | Tag the paragraph becomes |
| `inline` | `string` | - | Tag wrapped around the selection |
| `className` | `string` | - | Class to add |
| `style` | `string` | - | Inline CSS to add |
| `styles` | toolbar item | - | The style menu button |

---

# Accessibility

> The accessibility checker, keyboard-only use and screen readers.

Source: https://82editor.com/en/docs/accessibility/

Every button and menu in 82editor works from the keyboard, and screen readers get button names and states. The accessibility checker finds problems in the post itself, such as images without alternative text.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link image table | a11y help',
});
```

## Accessibility checker

The toolbar item is `a11y`, in the ⋯ menu of the `board` and `full` presets. It looks through the current post and lists what it finds.

| Finds | Fix in place |
| --- | --- |
| Images without alternative text (`alt`) | Type it into the field in the list |
| Tables without header cells (`th`) | A "Header row" button turns the first row into headers |
| Skipped heading levels (H1 followed by H3) | - |
| Links without text | - |

Clicking an item closes the dialog and scrolls to the spot; images get selected. With nothing to report it says "No issues found".

## Keyboard

- One `Tab` reaches the toolbar. Inside it, `←` `→` move between buttons and `Home` `End` jump to the first and last. Another `Tab` goes to the writing area.
- `Shift`+`Tab` from the writing area goes back to the toolbar, except in lists (outdent) and tables (previous cell).
- In a normal paragraph `Tab` moves on to the next field. In lists it indents, in tables it moves to the next cell, in code blocks it types two spaces.
- Opening a dropdown focuses its first entry. `↑` `↓` move, `Enter` picks, `Esc` closes and returns focus to the button.
- Dialogs (link, image, checker…) focus their first field and keep `Tab` inside. `Esc` closes them and returns focus to where it was.
- `Ctrl`+`/` shows the shortcut list. All of them are in [Keyboard shortcuts](https://82editor.com/en/docs/shortcuts/).

## Screen readers

- The writing area is `role="textbox"` with `aria-multiline="true"`, and `placeholder` is its name (`aria-label`). Say what the box is for.
- The toolbar is `role="toolbar"`. Each icon button has a name in the UI language, and toggles such as bold report their state with `aria-pressed`.
- Buttons that open menus have `aria-haspopup`; the ⋯ button reports `aria-expanded`. Menu entries use `role="menuitemradio"` with `aria-checked` for the current choice.
- The character count, find results and notices are announced through `aria-live="polite"`.

## Accessible posts

Alternative text can be typed when inserting an image and changed later from the image bar. The table bar turns the first row into header cells (`th`). Running the checker before publishing is usually enough.

```html
<p><img src="/files/map.png" alt="Map to our office"></p>
<table>
  <thead><tr><th>Name</th><th>Phone</th></tr></thead>
  <tbody><tr><td>Jane</td><td>555-0100</td></tr></tbody>
</table>
```

## Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `a11y` | toolbar item | - | Accessibility check dialog |
| `help` | toolbar item | - | Shortcut list (`Ctrl`+`/`) |
| `placeholder` | `string` | language default | Also the accessible name of the writing area |
| `language` | `'ko' \| 'en' \| 'ja' \| 'zh'` | page lang | Language of button names and messages. See [Languages](https://82editor.com/en/docs/i18n/) |

---

# React

> Use 82editor as a React component.

Source: https://82editor.com/en/docs/react/

```sh
npm i @82editor/core @82editor/react
```

```js
import { useState } from 'react';
import { Editor82 } from '@82editor/react';
import '@82editor/core/styles.css';

export function WriteForm() {
  const [html, setHtml] = useState('');
  return <Editor82 value={html} onChange={setHtml} options={{ toolbar: 'board', height: 400 }} />;
}
```

- Use `value` and `onChange` like a controlled input; changing `value` from outside updates the editor.
- Every other prop is an [option](https://82editor.com/en/docs/options/).
- `ref` gives you the editor instance.
- It is created after mount, so it is safe with SSR and Next.js.

## Using the instance through ref

```js
import { useRef } from 'react';
import { Editor82, type Editor } from '@82editor/react';

function Write() {
  const ref = useRef<Editor>(null);
  return (
    <>
      <Editor82 ref={ref} options={{ toolbar: 'board' }} />
      <button onClick={() => alert(ref.current?.getStats().chars)}>글자 수</button>
    </>
  );
}
```

---

# Vue

> Use 82editor as a Vue component.

Source: https://82editor.com/en/docs/vue/

```sh
npm i @82editor/core @82editor/vue
```

```html
<script setup>
import { ref } from 'vue';
import { Editor82 } from '@82editor/vue';
import '@82editor/core/styles.css';

const html = ref('');
</script>

<template>
  <Editor82 v-model="html" :options="{ toolbar: 'board', height: 400 }" />
</template>
```

- Bind HTML with `v-model`.
- Options are props; events arrive as `@change`, `@ready` and so on.
- In Nuxt, wrap it in `<ClientOnly>`.

---

# Svelte

> Use 82editor as a Svelte component.

Source: https://82editor.com/en/docs/svelte/

```sh
npm i @82editor/core @82editor/svelte
```

```html
<script>
  import { Editor82 } from '@82editor/svelte';
  import '@82editor/core/styles.css';

  let html = $state('');
</script>

<Editor82 bind:value={html} options={{ toolbar: 'board', height: 400 }} />
```

- A Svelte 5 component; bind HTML with `bind:value`.
- There is also a `use:editor82` action.

## As an action

```html
<script>
  import { editor82 } from '@82editor/svelte';
</script>

<div use:editor82={{ toolbar: 'basic', onChange: (html) => console.log(html) }}></div>
```

---

# Angular

> Use 82editor as a Angular component.

Source: https://82editor.com/en/docs/angular/

```sh
npm i @82editor/core @82editor/angular
```

```js
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Editor82Component } from '@82editor/angular';

@Component({
  selector: 'app-write',
  standalone: true,
  imports: [FormsModule, Editor82Component],
  template: `<editor-82 [(ngModel)]="html" [options]="{ toolbar: 'board', height: 400 }"></editor-82>`,
})
export class WriteComponent {
  html = '';
}
// angular.json → "styles": ["node_modules/@82editor/core/dist/styles.css"]
```

- A standalone component implementing `ControlValueAccessor`: works with `ngModel` and reactive forms.
- Outputs: `(change)`, `(ready)`.
- Angular 17 or newer.

## Reactive forms

```js
form = new FormGroup({ content: new FormControl('') });
// <form [formGroup]="form"><editor-82 formControlName="content"></editor-82></form>
```

---

# Options

> Every option createEditor accepts.

Source: https://82editor.com/en/docs/options/

Every option is optional. With none, you get the board toolbar, Korean UI (English when the page language is English) and the light theme.

## Content and size

| Option | Default | What it does |
| --- | --- | --- |
| `value` | '' | Initial HTML |
| `placeholder` | 'Start writing…' | Hint shown while empty (defaults to the locale text) |
| `height` | - | Editing area height in px (scrolls when full). Unset: at least 300px (`minHeight`) and grows with content. `'auto'` grows between `minHeight` and `maxHeight` |
| `minHeight` / `maxHeight` | - | Bounds for `'auto'` |
| `resizable` | true | Drag handle to resize |
| `readOnly` | false | Read-only (the toolbar stays, but commands that change content do nothing) |
| `maxLength` | - | Character limit; the status bar turns red and a `maxlength` event fires |
| `statusbar` | true | Character and byte count |
| `enterMode` | 'p' | `'br'`: Enter breaks the line (`<br>`) and Shift+Enter starts a paragraph. Lists and headings keep their Enter |
| `confirmLeave` | false | Ask before leaving the page with unsaved changes (`isDirty()` · `markClean()`) |
| `revisions` | this session | `true` or `{ key, max: 20, interval: 60000 }` — keep earlier versions in the browser to compare and restore |
| `dragHandle` | true | Grip left of each block to drag it (hidden on touch screens; Alt+Shift+↑/↓ always works) |
| `imageTray` | false | Photo strip under the editor: jump to, reorder by dragging, delete, put back removed uploads |

## Toolbar and UI

| Option | Default | What it does |
| --- | --- | --- |
| `toolbar` | 'board' | `'basic' \| 'board' \| 'full' \| 'minimal'`, a list of items, or `false`. See [Toolbar](https://82editor.com/en/docs/toolbar/) |
| `toolbarMode` | 'more' | Fold overflowing buttons into a ⋯ menu (`'more'`) or wrap (`'wrap'`) |
| `toolbarDensity` | 'normal' | `'compact'` packs toolbar icons and groups tightly (phones too, with 32px tap targets) |
| `toolbarSticky` | true | Keep the toolbar visible while scrolling |
| `bubbleToolbar` | true | Small floating toolbar over a selection (off on touch devices) |
| `theme` | 'light' | `'light' \| 'dark' \| 'auto'` |
| `language` | page lang | `'ko' \| 'en' \| 'ja' \| 'zh'` |
| `locale` | - | Override individual UI strings |
| `contentStyle` | - | CSS for the editing area, so it matches your view page |

## Fonts and paragraphs

| Option | Default | What it does |
| --- | --- | --- |
| `fontFamilies` | Malgun Gothic, Nanum Gothic, Pretendard … | Font list |
| `fontSizes` | 8 9 10 11 12 14 16 18 20 24 28 36 | Font size list |
| `fontSizeUnit` | 'pt' | `'pt'` or `'px'` |
| `lineHeights` | 100 130 160 180 200 | Line height list (%) |
| `colors` | built-in palette | Text and highlight palette |

## Typing helpers

| Option | Default | What it does |
| --- | --- | --- |
| `markdownShortcuts` | true | `## `, `- `, `**bold**` and friends |
| `slashMenu` | true | Command menu on `/` in an empty line |
| `autosave` | false | `true` or `{ key, interval }`. Drafts are kept in the browser and offered back |
| `templates` | - | `{ title, html, description? }[]` |
| `mentions` | - | `{ trigger: '@', search(q) }` |
| `shortcuts` | - | `{ keys: 'Mod+Shift+K', run(editor) }[]` |
| `autoLink` | true | Typed web and e-mail addresses become links after a space or Enter (Ctrl+Z right away undoes it) |
| `autoReplace` | true | `(c)`→©, `->`→→, `(주)`→㈜ and more. An object adds rules; `''` turns one off |
| `markdownPaste` | true | Pasted Markdown (headings, lists, tables, code) becomes formatting; the message offers "paste as text" |
| `styles` | - | `{ title, block?, inline?, className?, style? }[]` — a style menu for your site's classes (only those classes survive in the saved HTML) |
| `mergeTags` | - | `{ label, value: '{{name}}' }[]` — chips while editing, plain text when saved, for your server to fill in. Typing one makes a chip too |

## Images and paste

| Option | Default | What it does |
| --- | --- | --- |
| `uploadImage` | - | `(file, { onProgress }) => Promise<url>`. Without it images are inlined as base64 |
| `uploadUrl` | - | Upload by URL instead; the JSON reply carries `url` or `location` |
| `uploadHeaders` / `uploadField` | - / 'file' | Request headers and form field name |
| `imageMaxSize` | - | Maximum size in bytes (checked after shrinking) |
| `imageResize` | { maxWidth: 1600 } | JPEG/PNG/WebP wider than this are shrunk in the browser before upload (`quality` 0.85). `format: 'webp'` uploads everything as WebP. `false` keeps originals. iPhone HEIC photos become JPEG where the browser can read them (Safari) |
| `imageAccept` | 'image/*,.heic,.heif' | File picker types |
| `responsiveOutput` | true | Saved images get `max-width:100%; height:auto` and their natural size, tables a box that scrolls sideways, so posts fit phones without your CSS |
| `lazyImages` | true | Saved images after the first get `loading="lazy"` |
| `linkRel` | - | rel added to every saved web link, e.g. `'nofollow ugc'` for visitors' posts |
| `pasteMode` | 'clean' | `'clean' \| 'plain' \| 'keep'` |
| `allowedTags` / `allowedAttributes` | built-in allow-list | Override the sanitizer rules |
| `allowedIframeHosts` | - | Extra iframe sites besides the video sites and Google Maps (`'host'` or `'host/path'`). Dropped iframes are reported in a message |
| `fetchLinkMeta` | - | `(url) => Promise<{ title, description?, image?, siteName? }>` — title and picture for link cards (read the page on your server) |
| `uploadFile` | - | `(file, { onProgress }) => Promise<url>` — attachments; without it, `uploadUrl` is used |
| `fileMaxSize` / `fileAccept` | - | Largest attachment (bytes) and types (e.g. `'.pdf,.hwp,.zip'`) |

## Other

| Option | Default | What it does |
| --- | --- | --- |
| `plugins` | - | See [Plugins](https://82editor.com/en/docs/plugins/) |
| `telemetry` | true | Once a day, report only the domain and version to 82editor.com. `false` turns it off |
| `onChange` / `onReady` / `onFocus` / `onBlur` | - | Event shortcuts ([Events](https://82editor.com/en/docs/events/)) |

---

# API

> Methods of an editor instance.

Source: https://82editor.com/en/docs/api/

| Method | What it does |
| --- | --- |
| `getHTML()` | Clean HTML to store (editor-only markup removed) |
| `getHTML({ inlineStyles: true })` | For e-mail and newsletters: fonts, sizes, spacing and borders written into style attributes |
| `getMarkdown()` / `setMarkdown(md)` | Content as Markdown, and back (what Markdown cannot say stays as HTML) |
| `moveBlock(block, before)` | Move a top-level block (one undo step) |
| `setHTML(html)` | Replace content (sanitized, undoable) |
| `getText()` | Plain text |
| `insertHTML(html)` / `insertText(text)` | Insert at the caret |
| `isEmpty()` | Nothing written yet? |
| `getStats()` | `{ chars, charsNoSpace, words, bytes, paragraphs }` |
| `focus()` / `blur()` | Focus |
| `undo()` / `redo()` | History |
| `exec(command, value?)` | Run a command, e.g. `exec('bold')`, `exec('fontSize', '14pt')` |
| `queryState(command)` | Is it on right now (bold etc.) |
| `setReadOnly(bool)` / `setTheme(theme)` | Switch read-only and theme |
| `addButton(name, spec)` / `addCommand(name, fn)` | Add a button or command |
| `on(event, fn)` / `off(event, fn)` | See [Events](https://82editor.com/en/docs/events/) |
| `isDirty()` / `markClean()` | Unsaved changes? / Mark the current content as saved (call after your save request; a textarea form submit does it for you) |
| `getImages()` | Addresses of the images in the content |
| `getUnusedUploads()` | Images uploaded in this editor that are no longer in the content: send them to your server on save and delete them |
| `destroy()` | Remove the editor (a textarea shows again) |
| `root` / `content` | Outer element / editing element |

```js
const ed = createEditor('#editor');
ed.exec('heading', 'h2');
ed.insertHTML('<p>New paragraph</p>');
console.log(ed.getStats().bytes, 'bytes');
```

---

# Events

> change, paste, upload and the rest.

Source: https://82editor.com/en/docs/events/

| Event | Value | When |
| --- | --- | --- |
| `change` | HTML | After content changes (batched 150 ms, never mid-composition) |
| `input` | - | On every input |
| `focus` / `blur` | - | Focus |
| `ready` | - | After the first render |
| `selectionchange` | - | Caret or selection moved |
| `paste` | `{ html, raw, source }` | After cleanup, before insertion. `source` is `'word' \| 'excel' \| 'hwp' \| 'gdocs' \| 'web' \| 'text'`. Return a string to insert that instead |
| `upload:start` · `upload:progress` · `upload:success` · `upload:error` | `{ file, … }` | Image upload steps |
| `image:remove` | `{ src }` | An image left the content (undo can bring it back, so delete files on save with `getUnusedUploads()`) |
| `fullscreen` / `source` | boolean | Fullscreen or source view toggled |
| `maxlength` | `{ length, max }` | The character limit was passed |
| `destroy` | - | Right before removal |

```js
editor.on('change', (html) => saveDraft(html));

// adjust pastes by source
editor.on('paste', ({ html, source }) => {
  if (source === 'word') return html.replace(/font-family:[^;"]+;?/g, '');
});
```

---

# Plugins and commands

> Bundle buttons, commands, shortcuts and paste rules.

Source: https://82editor.com/en/docs/plugins/

A plugin is a `{ name, init(editor) }` object. Add buttons, commands and listeners in `init`; return a function if something needs cleaning up when the editor is destroyed.

```js
const stamp = {
  name: 'stamp',
  init(editor) {
    editor.addCommand('stamp', (ed) => ed.insertHTML('<p><mark>Approved</mark></p>'));
    editor.addButton('stamp', { icon: 'OK', title: 'Approval stamp', onAction: (ed) => ed.exec('stamp') });
  },
};

createEditor('#editor', {
  plugins: [stamp],
  toolbar: 'board | stamp',
  shortcuts: [{ keys: 'Mod+Shift+S', run: (ed) => ed.exec('stamp') }],
});
```

---

# Moving from Smart●●itor 2

> Replace Naver Smart●●itor 2.0 on an existing board.

Source: https://82editor.com/en/docs/migrate-se2/

Smart●●itor 2.0 hides a textarea and copies the content back with `UPDATE_CONTENTS_FIELD` before submitting. 82editor keeps the textarea in sync on its own, so that line simply goes away.

```html
<textarea name="ir1" id="ir1"></textarea>
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<script>
  Editor82.createEditor('#ir1', { toolbar: 'board', height: 400, uploadUrl: '/upload.php' });
</script>
```

- Your server keeps reading the same field.
- Existing posts open unchanged.
- Replace the photo popup with [uploadUrl](https://82editor.com/en/docs/image-upload/); reply with `{"url": "..."}`.

---

# Moving from Sum●●●ote

> No jQuery, same textarea, same upload endpoint.

Source: https://82editor.com/en/docs/migrate-jquery-editor/

Sum●●●ote needs jQuery and reads values with `sum●●●ote('code')`. 82editor has no dependencies, and when it wraps a textarea the value goes out with the form.

```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="sum●●●ote-lite.min.css" rel="stylesheet">
<script src="sum●●●ote-lite.min.js"></script>
<textarea id="sum●●●ote" name="content"></textarea>
<script>
  $('#sum●●●ote').sum●●●ote({
    height: 400,
    callbacks: { onImageUpload: (files) => upload(files[0]) },
  });
  const html = $('#sum●●●ote').sum●●●ote('code');
</script>
```

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<textarea id="sum●●●ote" name="content"></textarea>
<script>
  const editor = Editor82.createEditor('#sum●●●ote', {
    height: 400,
    uploadImage: (file) => upload(file), // return the image URL
  });
  const html = editor.getHTML();
</script>
```

| Sum●●●ote | 82editor |
| --- | --- |
| `$(el).sum●●●ote('code')` | `editor.getHTML()` |
| `$(el).sum●●●ote('code', html)` | `editor.setHTML(html)` |
| `$(el).sum●●●ote('isEmpty')` | `editor.isEmpty()` |
| `callbacks.onChange` | `editor.on('change', fn)` |
| `callbacks.onImageUpload` | `uploadImage(file) => url` |

---

# To●●t UI Editor alternative

> Moving WYSIWYG screens off To●●t UI Editor after its repository was archived.

Source: https://82editor.com/en/docs/markdown-editor-alternative/

The To●●t UI Editor (NHN) GitHub repository was archived in September 2026 and receives no more fixes. Screens that used its WYSIWYG mode and stored HTML move to 82editor directly.

```js
import { createEditor } from '@82editor/core';
import '@82editor/core/styles.css';

const editor = createEditor('#editor', {
  height: 500,
  uploadImage: (file) => upload(file),
});
const html = editor.getHTML();
```

| To●●t UI Editor | 82editor |
| --- | --- |
| `getHTML()` / `setHTML()` | `getHTML()` / `setHTML()` |
| `hooks.addImageBlobHook` | `uploadImage(file) => url` |
| `initialEditType: 'markdown'` | No raw Markdown storage; Markdown input shortcuts instead. |

---

# CK●●itor 4 alternative

> Replacing CK●●itor 4 (end of life June 2023) without a license key.

Source: https://82editor.com/en/docs/legacy-editor-alternative/

CK●●itor 4 reached end of life in June 2023; security fixes now come only with paid LTS. Moving to CK●●itor 5 means a new architecture and a license key for commercial sites. For screens that store HTML, 82editor is the closer replacement.

```html
<textarea name="content" id="content"></textarea>
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<script>
  const editor = Editor82.createEditor('#content', { height: 400, uploadUrl: '/upload' });
</script>
```

| CK●●itor 4 | 82editor |
| --- | --- |
| `getData()` / `setData()` | `getHTML()` / `setHTML()` |
| `updateElement()` | Not needed (textarea stays in sync) |
| `filebrowserUploadUrl` | `uploadUrl`; the reply's `url` is read, so CK●●itor 4 upload endpoints keep working |

---

# FAQ

> Is it really free? Can companies use it? Where does data go?

Source: https://82editor.com/en/docs/faq/

## Is it really free, for companies too?

Yes. MIT licensed: commercial, internal and client work are all free, with no license keys.

## Does my content go to 82editor.com?

No. Content is never sent anywhere. Once a day the editor reports which domain runs which version. Turn it off with `telemetry: false`; localhost and intranet hosts never report.

## Does it work offline or on an intranet?

Download the CDN files and host them yourself. The usage report is the only outgoing request, and intranet hosts skip it.

## Which browsers?

Current Chrome, Edge, Safari and Firefox, Samsung Internet, iOS and Android browsers, and in-app browsers. Not Internet Explorer.

## Where do I report bugs?

In the [forum](https://82editor.com/en/forum/), with steps to reproduce and your browser.

---

# Changelog

---

## 1.4.0 (2026-10-21): Markdown, block moving, photo groups, bookmarks, maps and link cards, attachments, versions

- Markdown: pasted Markdown becomes formatting ("paste as text" in the message), a Markdown view to edit, getMarkdown()/setMarkdown()
- Move blocks: drag the grip on the left, or Alt+Shift+↑/↓
- Photo groups: 2 or 3 columns, or a slider (works in saved HTML without scripts)
- Bookmarks: name a paragraph and link to #name from the link dialog; TOC links to Korean headings are now kept
- Columns (2 or 3, stacked on phones), map / embed codes (Google Maps), link cards (fetchLinkMeta), attachments (uploadFile), HTML blocks (keep a detail page's classes and styles)
- Style menu (styles: your site's classes), merge tags (mergeTags: {{name}} chips)
- Earlier versions: compare (deleted / added words) and restore; preview at phone, tablet and desktop width
- E-mail output getHTML({ inlineStyles: true }), photo strip (imageTray), a message when iframes are dropped
- Fix: after undoing back to the start, pasted text landed outside any paragraph
- Fixes: loading a CDN locale file (ja.js, zh.js) removed the Editor82 global (since 1.0.0); saved HTML changed when loaded and saved again; Korean right after a merge tag left the first jamo behind

---

## 1.3.0 (2026-10-21): Phone-ready output, br Enter mode, image tracking, WebP

- Saved HTML: images fit the screen (max-width, height:auto, natural size), tables sit in a sideways-scrolling box, images after the first load lazily (responsiveOutput, lazyImages; both can be turned off)
- enterMode: 'br' — Enter breaks the line, Shift+Enter starts a paragraph
- Click the empty space around a table, image box or code block, or press ↓/→ at its end, to get a new paragraph there
- nofollow checkbox in the link dialog; linkRel adds rel to every web link
- imageResize format: 'webp' converts photos to WebP before upload
- iPhone HEIC photos are converted to JPEG in Safari, with a clear message elsewhere
- isDirty(), markClean(), confirmLeave — ask before leaving with unsaved changes
- getImages(), getUnusedUploads() and the image:remove event — clean up uploaded images that were removed

---

## 1.2.0 (2026-10-21): Folds, callouts, auto links, photo shrinking, image editing

- Collapsible sections: folded in saved posts, open while editing
- Callout boxes: info, tip, success, warning, danger, switched or removed from their own bar
- Quote styles (side line, quotation marks, gray box, bordered box) and divider styles
- Typed addresses become links after a space or Enter
- (c) → ©, -> → →, (주) → ㈜ while typing; Ctrl+Z right after undoes it
- Photos wider than 1600px are shrunk before upload (imageResize)
- Image editor: crop (free, 1:1, 4:3, 3:4, 16:9), rotate, flip
- Fix: image/table bars no longer cover dialogs

---

## 1.1.2 (2026-10-21): Compact toolbar on phones

- toolbarDensity: 'compact' now applies on phones too (32px buttons)

---

## 1.1.1 (2026-10-21): Docs cleanup

- README wording (no code changes)

---

## 1.1.0 (2026-10-21): Compact toolbar

- toolbarDensity: 'compact' packs toolbar icons and groups tightly (phones keep touch-sized buttons)

---

## 1.0.1 (2026-10-21): Fixes for Korean input and read-only mode

- Korean typed right after the list button no longer leaves the first consonant behind
- Checklists are no longer wrapped in a paragraph
- Pressing Enter twice leaves a quote
- Opening and closing the source view without edits no longer changes the content
- Read-only mode no longer accepts typing
- The link dialog rejects javascript: and similar addresses; links never nest

---

## 1.0.0 (2026-10-21): First release: a free WYSIWYG HTML editor

- IME-safe typing, cleanup for pastes from Word, Hangul (HWP) and Google Docs
- Tables with merge and split, image upload and resize, video embeds
- Markdown shortcuts, slash menu, find and replace, source view, autosave
- React, Vue, Svelte and Angular wrappers, CDN

---

# 82editor 문서 (한국어)

---

# 시작하기

> 5분 안에 글쓰기 창에 82editor를 붙이는 방법.

Source: https://82editor.com/docs/getting-started/

82editor는 의존성이 없는 순수 JavaScript 에디터입니다. 빌드 도구가 없는 PHP·JSP 게시판이라면 CDN 두 줄, npm을 쓰는 프로젝트라면 패키지 하나면 됩니다. 라이선스 키, 가입, 결제가 없습니다.

## CDN으로 붙이기

가장 빠른 방법입니다. 기존 `<textarea>` 를 그대로 두고 에디터를 씌우면, 폼을 전송할 때 HTML이 textarea 값으로 함께 넘어갑니다.

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>

<textarea id="content" name="content"></textarea>
<script>
  Editor82.createEditor('#content', { toolbar: 'board', height: 400 });
</script>
```

## npm으로 설치하기

```sh
npm i @82editor/core
```

```js
import { createEditor } from '@82editor/core';
import '@82editor/core/styles.css';

const editor = createEditor('#editor', {
  placeholder: '내용을 입력하세요',
  toolbar: 'board',
  height: 400,
});

editor.on('change', (html) => console.log(html));
```

## 내용 꺼내기와 넣기

```js
const html = editor.getHTML();   // 저장할 HTML
editor.setHTML('<p>불러온 글</p>');
editor.getText();                // 글자만
editor.isEmpty();                // 빈 글인지
```

> 서버에 저장할 때는 서버에서도 HTML을 한 번 더 걸러 주세요. 브라우저를 거치지 않은 요청은 무엇이든 보낼 수 있습니다. [보안 문서](https://82editor.com/docs/security/)를 참고하세요.

## 다음 단계

- [옵션 전체 목록](https://82editor.com/docs/options/)
- [툴바 구성 바꾸기](https://82editor.com/docs/toolbar/)
- [이미지를 내 서버로 올리기](https://82editor.com/docs/image-upload/)
- [React](https://82editor.com/docs/react/) · [Vue](https://82editor.com/docs/vue/) · [Svelte](https://82editor.com/docs/svelte/) · [Angular](https://82editor.com/docs/angular/)

---

# CDN 파일

> 버전 고정 주소와 latest 주소, 파일 종류.

Source: https://82editor.com/docs/cdn/

82editor.com이 직접 파일을 내려줍니다. 버전이 들어간 주소는 내용이 절대 바뀌지 않으므로 브라우저가 1년간 캐시합니다. 운영 사이트에는 버전 주소를 쓰세요.

| 파일 | 설명 |
| --- | --- |
| `/cdn/v1.4.0/82editor.min.js` | 스크립트 태그용. 전역 `Editor82` 를 만듭니다. |
| `/cdn/v1.4.0/82editor.esm.js` | `<script type="module">` 에서 import 하는 단일 ES 모듈. |
| `/cdn/v1.4.0/82editor.css` | 에디터 스타일 (밝은·어두운 테마 포함). |
| `/cdn/latest/…` | 항상 최신 버전. 1시간 캐시. 시험용으로만 쓰세요. |

## ES 모듈로 불러오기

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<div id="editor"></div>
<script type="module">
  import { createEditor } from 'https://82editor.com/cdn/v1.4.0/82editor.esm.js';
  createEditor('#editor');
</script>
```

> 파일을 내려받아 내 서버에 두어도 됩니다. MIT 라이선스라 고쳐 쓰고 다시 배포해도 됩니다.

---

# textarea와 폼 전송

> 기존 게시판 폼을 고치지 않고 에디터를 씌우는 방법.

Source: https://82editor.com/docs/textarea-form/

`createEditor` 에 `<textarea>` 를 넘기면 textarea를 숨기고 그 자리에 에디터를 만듭니다. 내용이 바뀔 때마다, 그리고 폼을 전송하기 직전에 textarea 값을 HTML로 맞춰 둡니다. 서버 코드는 그대로 `$_POST['content']` 를 읽으면 됩니다.

```html
<form method="post" action="/board/write.php">
  <input name="title" required>
  <textarea id="content" name="content"><?= htmlspecialchars($post['content'] ?? '') ?></textarea>
  <button>등록</button>
</form>
<script>
  const editor = Editor82.createEditor('#content', { toolbar: 'board' });
  document.querySelector('form').addEventListener('submit', (e) => {
    if (editor.isEmpty()) { e.preventDefault(); alert('내용을 입력하세요'); editor.focus(); }
  });
</script>
```

- textarea에 들어 있던 값이 첫 내용이 됩니다 (수정 화면).
- `required` 검사는 에디터가 대신 할 수 없으니 위처럼 `isEmpty()` 로 확인하세요.
- `editor.destroy()` 를 부르면 textarea가 다시 보이고 마지막 HTML이 남습니다.

---

# 제목과 문단

> 본문을 제목 1~4로 바꾸는 문단 형식 메뉴와 단축키.

Source: https://82editor.com/docs/headings/

긴 글을 나눌 때 문단을 제목으로 바꿉니다. 제목은 `<h1>`~`<h4>` 태그로 저장되므로 검색엔진과 화면 낭독기도 글의 구조를 읽을 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList',
});
```

## 바꾸는 방법

- 툴바의 `heading` 메뉴(문단 형식)에서 본문, 제목 1, 제목 2, 제목 3, 인용 중 하나를 고릅니다. 메뉴 이름 칸에는 지금 커서가 있는 문단의 형식이 보입니다.
- `Ctrl`+`Alt`+`1`~`4` 는 제목 1~4, `Ctrl`+`Alt`+`0` 은 본문입니다. 이미 같은 제목인 문단에서 다시 누르면 본문으로 돌아갑니다.
- 빈 줄 맨 앞에서 `# `, `## `, `### `, `#### ` 처럼 샵과 공백을 치면 바로 제목이 됩니다 ([마크다운 입력](https://82editor.com/docs/markdown/)).
- 제목 맨 앞에서 `Backspace` 를 누르면 글자는 그대로 두고 본문으로 바뀝니다.
- 제목 끝에서 `Enter` 를 치면 다음 줄은 본문으로 시작합니다.

제목 4는 메뉴에 없고 단축키와 마크다운 입력으로만 만듭니다. 여러 문단을 선택하고 바꾸면 모두 함께 바뀝니다. 목록 항목이나 표 칸 안에서도 제목을 쓸 수 있습니다.

## 프리셋과 휴대폰

`heading` 은 `basic`, `board`(기본), `full` 프리셋의 첫 줄에 있고 `minimal` 에는 없습니다. 휴대폰 툴바에서도 앞쪽에 나옵니다.

## 저장되는 HTML

```html
<h2>이용 안내</h2>
<p>문단에 커서를 두고 …</p>
<h3>운영 시간</h3>
```

목차를 넣으면(`toc`) 제목에 `id` 가 붙습니다. 자세한 것은 [책갈피와 목차](https://82editor.com/docs/bookmarks/)를 보세요. `a11y` 검사는 제목 2 다음에 바로 제목 4가 오는 것처럼 단계를 건너뛴 곳을 알려 줍니다.

## API

```js
editor.exec('h2');          // 제목 2 (다시 부르면 본문)
editor.exec('paragraph');   // 본문
editor.exec('block', 'h3'); // 메뉴와 같은 명령
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `heading` | toolbar item | — | 문단 형식 메뉴: 본문, 제목 1~3, 인용 |
| `markdownShortcuts` | boolean | `true` | `# ` 입력으로 제목 만들기. `false` 면 꺼집니다. |

---

# 글꼴·크기·줄간격

> 글꼴, 글자 크기(pt·px), 줄간격 메뉴와 목록 바꾸기.

Source: https://82editor.com/docs/fonts/

선택한 글자의 글꼴과 크기, 문단의 줄간격을 바꿉니다. 메뉴에 나오는 목록은 옵션으로 사이트에 맞게 바꿀 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold',
  fontSizes: [10, 12, 14, 18, 24],
  fontSizeUnit: 'pt',
});
```

## 글꼴 (fontFamily)

기본 목록은 Pretendard, 맑은 고딕, 나눔고딕, 나눔명조, 굴림, 돋움, 바탕, 궁서, Arial, Georgia, Times New Roman, Courier New 입니다. 맨 위 "기본 글꼴"을 고르면 글꼴 지정을 지웁니다.

`fontFamilies` 의 각 항목은 `'메뉴 이름=CSS font-family 값'` 형식입니다. `=` 가 없으면 첫 글꼴 이름이 메뉴 이름이 됩니다.

```js
createEditor('#editor', {
  fontFamilies: [
    '본고딕=Noto Sans KR, sans-serif',
    '나눔스퀘어=NanumSquare, sans-serif',
    'Georgia, serif', // 메뉴에는 "Georgia"
  ],
});
```

> 에디터는 웹폰트를 불러오지 않습니다. 읽는 사람 컴퓨터에 없는 글꼴은 보기 화면에서 웹폰트로 불러와야 같은 모양으로 보입니다.

## 글자 크기 (fontSize)

기본 목록은 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36 이고 단위는 `pt` 입니다. 한글 문서에 익숙한 사용자를 위해 pt가 기본이며, `fontSizeUnit: 'px'` 로 바꿀 수 있습니다. 크기를 지정하지 않은 곳에서는 메뉴 칸에 지금 보이는 크기가 단위에 맞춰 나옵니다.

## 줄간격 (lineHeight)

줄간격은 글자가 아니라 문단 단위로 들어갑니다. 기본 목록은 100, 130, 150, 160, 180, 200, 250 (%) 이고, "기본"을 고르면 지정을 지웁니다.

## 선택 없이 고르면

글자를 선택하지 않고 글꼴이나 크기를 고르면 그다음에 치는 글자에 적용됩니다.

## 프리셋

- `board`(기본): `fontSize` 는 첫 줄, `fontFamily` 와 `lineHeight` 는 ⋯ 더 보기 안
- `full`: 세 가지 모두 첫 줄
- `basic`, `minimal`: 없음

## 저장되는 HTML

```html
<p style="line-height: 180%">
  <span style="font-size: 18pt">18pt 글자</span>
  <span style="font-family: NanumMyeongjo, 나눔명조, serif">나눔명조 글자</span>
</p>
```

편집 영역의 기본 글꼴과 크기를 보기 화면에 맞추려면 `contentStyle` 을 쓰세요 ([편집 영역 스타일](https://82editor.com/docs/content-style/)).

## API

```js
editor.exec('fontSize', '14pt');
editor.exec('fontFamily', 'Georgia, serif');
editor.exec('lineHeight', '160%');
editor.exec('fontSize', ''); // 지정 지우기
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `fontFamily` | toolbar item | — | 글꼴 메뉴 |
| `fontSize` | toolbar item | — | 글자 크기 메뉴 |
| `lineHeight` | toolbar item | — | 줄간격 메뉴 (문단 단위) |
| `fontFamilies` | string[] | 한국어 글꼴 12종 | `'이름=CSS 값'` 또는 CSS 값 |
| `fontSizes` | number[] | `[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36]` | 크기 메뉴의 숫자 |
| `fontSizeUnit` | `'pt' \| 'px'` | `'pt'` | 크기 단위 |
| `lineHeights` | number[] | `[100, 130, 150, 160, 180, 200, 250]` | 줄간격 메뉴의 % 값 |

---

# 굵게·기울임·밑줄

> 굵게, 기울임, 밑줄, 취소선, 위·아래 첨자, 인라인 코드.

Source: https://82editor.com/docs/text-styles/

글자 모양을 바꾸는 기본 버튼들입니다. 글자를 선택하고 누르거나, 선택 없이 누른 뒤 이어서 치면 됩니다. 한 번 더 누르면 풀립니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic underline strike | subscript superscript code',
});
```

## 버튼과 단축키

| 툴바 이름 | 기능 | 단축키 | 저장 태그 |
| --- | --- | --- | --- |
| `bold` | 굵게 | `Ctrl`+`B` | `<strong>` |
| `italic` | 기울임 | `Ctrl`+`I` | `<em>` |
| `underline` | 밑줄 | `Ctrl`+`U` | `<u>` |
| `strike` | 취소선 | `Ctrl`+`Shift`+`X` | `<s>` |
| `subscript` | 아래 첨자 | `Ctrl`+`,` | `<sub>` |
| `superscript` | 위 첨자 | `Ctrl`+`.` | `<sup>` |
| `code` | 인라인 코드 | `Ctrl`+`E` | `<code>` |

맥에서는 `Ctrl` 대신 `⌘` 입니다. 커서가 있는 곳의 상태에 따라 버튼이 눌린 모양으로 바뀝니다. 인라인 코드 안에서 `code` 를 다시 누르면 코드가 풀립니다.

마크다운처럼 `**굵게**`, `*기울임*`, `~~취소선~~`, ``코드`` 를 쳐도 바로 바뀝니다 ([마크다운 입력](https://82editor.com/docs/markdown/)).

## 프리셋과 선택 툴바

- `board`(기본): 굵게·밑줄·취소선은 첫 줄, 기울임과 위·아래 첨자는 ⋯ 더 보기 안. 인라인 코드는 없습니다.
- `full`: 굵게·기울임·밑줄·취소선은 첫 줄, 위·아래 첨자와 인라인 코드는 더 보기 안
- `basic`: 굵게·기울임·밑줄·취소선, `minimal`: 굵게·기울임·밑줄
- 휴대폰 툴바의 첫 줄에는 굵게만 있고 나머지는 ⋯ 안에 있습니다.

글자를 선택하면 위에 뜨는 선택 툴바([bubble toolbar](https://82editor.com/docs/bubble-toolbar/))에도 굵게, 기울임, 밑줄, 취소선, 인라인 코드가 들어 있어 툴바에 없는 기능도 쓸 수 있습니다.

## 저장되는 HTML

브라우저가 만든 `<b>`, `<i>`, `<strike>` 는 저장할 때 `<strong>`, `<em>`, `<s>` 로 바뀝니다.

```html
<p><strong>굵게</strong>, <em>기울임</em>, <u>밑줄</u>, <s>취소선</s>, H<sub>2</sub>O, <code>npm install</code></p>
```

## API

```js
editor.exec('bold');
editor.queryState('bold'); // 커서 위치가 굵게면 true
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `bold` `italic` `underline` `strike` | toolbar item | — | 굵게, 기울임, 밑줄, 취소선 |
| `subscript` `superscript` | toolbar item | — | 아래 첨자, 위 첨자 |
| `code` | toolbar item | — | 인라인 코드 (여러 줄 코드는 [코드 블록](https://82editor.com/docs/code-blocks/)) |
| `bubbleToolbar` | boolean | `true` | 글자를 선택하면 서식 툴바 띄우기 |
| `markdownShortcuts` | boolean | `true` | `**글**` 같은 입력 규칙 |

---

# 글자색과 배경색

> 글자 색, 배경 색(형광펜), 팔레트 바꾸기, 최근 색과 직접 입력.

Source: https://82editor.com/docs/colors/

`color` 는 글자 색, `highlight` 는 글자 뒤 배경 색(형광펜)입니다. 공지에서 중요한 문장을 눈에 띄게 할 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'bold | color highlight',
  colors: ['#000000', '#e03131', '#1c7ed6', '#2b8a3e', '#f08c00'],
});
```

## 팔레트

- 맨 위 "자동"(글자 색) 또는 "없음"(배경 색)을 누르면 지정한 색을 지웁니다.
- 가운데에 기본 색들이 있고, 한 번 쓴 색은 "최근 사용" 줄에 8개까지 남습니다 (이 브라우저의 localStorage).
- "직접 입력"에 `#1c7ed6` 같은 16진수 코드를 넣거나 색 고르기 창을 열 수 있습니다.
- 툴바 버튼 아래 막대에 커서 위치의 색이 보입니다.

`colors` 옵션은 글자 색 팔레트를 사이트 색으로 바꿉니다. 같은 목록이 표 칸 배경색 팔레트에도 쓰입니다. 배경 색 버튼은 따로 정해진 형광펜 색 13가지를 씁니다.

## 프리셋과 휴대폰

`color` 와 `highlight` 는 `basic`, `board`, `full` 의 첫 줄에 있습니다. 휴대폰 툴바 첫 줄에는 글자 색이 있고 배경 색은 ⋯ 안에 있습니다. 글자를 선택하면 뜨는 [선택 툴바](https://82editor.com/docs/bubble-toolbar/)에도 두 버튼이 있습니다.

## 저장되는 HTML

색은 `style` 속성이 있는 `<span>` 으로 저장됩니다. 브라우저가 16진수 색을 `rgb()` 로 바꿔 적기도 합니다.

```html
<span style="color: rgb(224, 49, 49)">10월 31일</span>
<span style="background-color: rgb(255, 243, 191)">늦게 낸 서류는 …</span>
```

> 어두운 배경의 보기 화면에서는 검은 글자 색이 잘 안 보일 수 있습니다. 색은 꼭 필요한 곳에만 쓰고, 색만으로 뜻을 전하지 않도록 굵게 같은 다른 표시를 함께 쓰세요.

## API

```js
editor.exec('color', '#e03131');
editor.exec('highlight', '#fff3bf');
editor.exec('color', ''); // 색 지우기
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `color` | toolbar item | — | 글자 색 |
| `highlight` | toolbar item | — | 배경 색(형광펜) |
| `colors` | string[] | 기본 13색 | 글자 색과 표 칸 배경 팔레트의 색 목록 (CSS 색 값) |

---

# 정렬과 들여쓰기

> 왼쪽·가운데·오른쪽·양쪽 정렬, 정렬 메뉴, 들여쓰기와 내어쓰기.

Source: https://82editor.com/docs/alignment/

문단을 가운데나 오른쪽으로 맞추고, 문단 앞에 여백을 넣거나 뺍니다. 정렬은 글자가 아니라 문단 단위로 들어갑니다.

```js
createEditor('#editor', {
  toolbar: 'alignMenu | alignLeft alignCenter alignRight alignJustify | indent outdent',
});
```

## 정렬

| 툴바 이름 | 기능 | 단축키 |
| --- | --- | --- |
| `alignLeft` | 왼쪽 정렬 (정렬 지정을 지움) | `Ctrl`+`Shift`+`L` |
| `alignCenter` | 가운데 정렬 | `Ctrl`+`Shift`+`E` |
| `alignRight` | 오른쪽 정렬 | `Ctrl`+`Shift`+`R` |
| `alignJustify` | 양쪽 정렬 | `Ctrl`+`Shift`+`J` |
| `alignMenu` | 네 가지를 한 버튼의 메뉴로 | — |
| `alignCenterToggle` | 가운데 ↔ 왼쪽을 번갈아 바꾸는 버튼 | — |

사진을 선택한 상태에서 왼쪽·가운데·오른쪽 정렬을 누르면 문단이 아니라 사진이 정렬됩니다 ([사진](https://82editor.com/docs/images/)).

## 들여쓰기와 내어쓰기

- `indent` / `outdent`, 단축키 `Ctrl`+`]` / `Ctrl`+`[`
- 보통 문단은 누를 때마다 왼쪽 여백이 40px씩 늘고 줄어듭니다.
- 목록 안에서는 항목이 한 단계 안쪽 목록으로 들어가거나 나옵니다. 목록에서는 `Tab` / `Shift`+`Tab` 도 같습니다.
- 표 칸에는 들여쓰기가 들어가지 않습니다.

## 프리셋과 휴대폰

- `board`(기본), `basic`: 첫 줄에 `alignMenu`. `board` 는 들여쓰기·내어쓰기가 ⋯ 더 보기 안
- `full`: 정렬 버튼 네 개와 들여쓰기·내어쓰기가 첫 줄
- 휴대폰 툴바에는 자리를 아끼려고 `alignCenterToggle` 버튼 하나가 나옵니다.

## 저장되는 HTML

```html
<p style="text-align: center">가운데</p>
<p style="text-align: right">오른쪽</p>
<p style="margin-left: 40px">들여쓰기</p>
```

## API

```js
editor.exec('alignCenter');
editor.exec('align', 'justify'); // 메뉴와 같은 명령: left | center | right | justify
editor.exec('indent');
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `alignLeft` `alignCenter` `alignRight` `alignJustify` | toolbar item | — | 정렬 버튼 |
| `alignMenu` | toolbar item | — | 정렬 메뉴 (버튼 하나) |
| `alignCenterToggle` | toolbar item | — | 가운데 정렬 켜고 끄기 |
| `indent` `outdent` | toolbar item | — | 들여쓰기, 내어쓰기 |

---

# 목록

> 글머리 기호·번호 목록, 목록 안 목록, 가. 나. 다. 같은 목록 모양.

Source: https://82editor.com/docs/lists/

항목을 나열할 때 글머리 기호 목록이나 번호 목록을 씁니다. `listStyle` 메뉴로 번호를 가. 나. 다. 나 i. ii. iii. 로 바꿀 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'bulletList orderedList listStyle | indent outdent',
});
```

## 만들기

- `bulletList`(글머리 기호) `Ctrl`+`Shift`+`8`, `orderedList`(번호 매기기) `Ctrl`+`Shift`+`7`. 다시 누르면 목록이 풀립니다.
- 빈 줄 맨 앞에서 `- `, `* `, `+ ` 를 치면 글머리 목록, `1. ` 이나 `1) ` 을 치면 번호 목록이 됩니다.
- `Tab` 은 항목을 한 단계 안으로, `Shift`+`Tab` 은 밖으로 뺍니다. `indent` / `outdent` 버튼도 같습니다.
- 빈 항목에서 `Enter` 를 누르면 목록이 끝나고 본문으로 돌아갑니다.

## 목록 모양 (listStyle)

메뉴에서 고르는 모양: ● disc, ○ circle, ■ square, 1. 2. 3., 01. 02., a. b. c., A. B. C., i. ii. iii., I. II. III., 가. 나. 다., ㄱ. ㄴ. ㄷ. 글머리 목록에서 번호 모양을 고르면 번호 목록으로, 번호 목록에서 기호 모양을 고르면 글머리 목록으로 바뀝니다. 목록 밖에서 고르면 그 모양으로 새 목록을 만듭니다.

`listMenu` 는 글머리 기호, 번호, 체크리스트를 한 버튼의 메뉴로 묶은 것입니다. 툴바가 좁을 때 쓰세요.

## 프리셋과 휴대폰

- `bulletList` `orderedList`: `minimal`, `basic`, `board`, `full` 모두 첫 줄
- `listStyle`: `full` 의 ⋯ 더 보기 안에만 있습니다.
- 휴대폰 툴바 첫 줄에는 글머리 기호가 있고 번호 목록은 ⋯ 안에 있습니다.

## 저장되는 HTML

기본 모양(disc, 1. 2. 3.)은 style 없이, 다른 모양은 `list-style-type` 으로 저장됩니다. 보기 화면의 CSS가 목록의 `list-style` 을 지우고 있다면 모양이 안 보일 수 있습니다.

```html
<ul>
  <li>신분증</li>
  <li>증명사진
    <ul><li>3×4 cm</li></ul>
  </li>
</ul>
<ol style="list-style-type: hangul">
  <li>신청서 작성</li>
</ol>
```

## API

```js
editor.exec('bulletList');
editor.exec('listStyle', 'lower-alpha');
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `bulletList` | toolbar item | — | 글머리 기호 목록 |
| `orderedList` | toolbar item | — | 번호 목록 |
| `listStyle` | toolbar item | — | 목록 모양 메뉴 |
| `listMenu` | toolbar item | — | 글머리·번호·체크리스트를 메뉴 하나로 |
| `markdownShortcuts` | boolean | `true` | `- `, `1. ` 입력으로 목록 만들기 |

할 일 목록은 [체크리스트](https://82editor.com/docs/checklists/)를 보세요.

---

# 체크리스트

> 눌러서 체크하는 할 일 목록과 보기 화면에서 상자 그리기.

Source: https://82editor.com/docs/checklists/

항목 앞에 체크 상자가 있는 목록입니다. 준비물, 할 일, 점검 항목을 적을 때 씁니다. 상자를 누르면 체크되고, 체크된 항목은 흐리게 줄이 그어집니다.

```js
createEditor('#editor', {
  toolbar: 'checklist bulletList orderedList',
});
```

## 만들고 체크하기

- 툴바의 `checklist` 또는 `Ctrl`+`Shift`+`9`. 글머리 목록 안에서 누르면 그 목록이 체크리스트로 바뀌고, 다시 누르면 보통 목록으로 돌아갑니다.
- 빈 줄 맨 앞에서 `[ ] ` 를 치면 빈 상자, `[x] ` 를 치면 체크된 항목으로 시작합니다.
- 항목 왼쪽의 상자를 누르면 체크가 켜지고 꺼집니다. 이 변경도 실행 취소할 수 있습니다.
- `Enter` 로 만든 새 항목은 체크가 꺼진 채로 시작합니다.
- 읽기 전용일 때는 상자를 눌러도 바뀌지 않습니다.

## 프리셋

`full` 은 첫 줄, `board`(기본)는 ⋯ 더 보기 안에 있습니다. `basic` 과 `minimal` 에는 없습니다. `listMenu` 메뉴에도 들어 있습니다.

## 저장되는 HTML

```html
<ul data-checklist="">
  <li data-checked="true">회의실 예약</li>
  <li data-checked="false">발표 자료 보내기</li>
</ul>
```

상자는 CSS로 그립니다. 보기 화면에 `82editor.css` 를 넣고 글을 감싸는 요소에 `class="e82-view"` 를 주면 에디터와 같은 상자가 보입니다. 직접 그리려면 아래처럼 하면 됩니다.

```css
ul[data-checklist] { list-style: none; padding-left: 4px; }
ul[data-checklist] > li::before { content: '☐ '; }
ul[data-checklist] > li[data-checked='true']::before { content: '☑ '; }
ul[data-checklist] > li[data-checked='true'] { color: #6e7781; text-decoration: line-through; }
```

> 서버에서 HTML을 다시 거를 때 `ul` 의 `data-checklist`, `li` 의 `data-checked` 속성을 허용 목록에 넣어 주세요 ([보안](https://82editor.com/docs/security/)).

마크다운으로 꺼내면 `- [x] 회의실 예약` 처럼 나옵니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `checklist` | toolbar item | — | 체크리스트 만들기·풀기 |
| `listMenu` | toolbar item | — | 글머리·번호·체크리스트 메뉴 |
| `markdownShortcuts` | boolean | `true` | `[ ] `, `[x] ` 입력 규칙 |

---

# 링크

> 링크 넣기·고치기·해제, 새 창 열기, nofollow와 linkRel.

Source: https://82editor.com/docs/links/

글자나 사진에 주소를 겁니다. 링크 창에서 새 창으로 열지, 검색엔진이 따라가지 않게 할지(nofollow)를 고를 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'bold | link unlink',
  linkRel: 'ugc',
});
```

## 링크 넣기

- 글자를 선택하고 `link` 버튼이나 `Ctrl`+`K`. 선택 없이 누르면 "표시할 글자" 칸이 함께 나옵니다 (비우면 주소가 그대로 글자가 됩니다).
- `naver.com` 처럼 앞부분 없이 쓰면 `https://` 가 붙고, `name@example.com` 은 `mailto:` 링크가 됩니다.
- `javascript:` 같은 쓸 수 없는 주소는 "쓸 수 없는 주소예요" 안내와 함께 거부됩니다.
- 주소 칸에서 글 안의 책갈피(`id` 가 붙은 곳)를 골라 `#책갈피` 링크를 걸 수 있습니다 ([책갈피와 목차](https://82editor.com/docs/bookmarks/)).
- 본문에 주소를 치고 공백이나 `Enter` 를 누르면 저절로 링크가 됩니다 ([자동 링크](https://82editor.com/docs/auto-replace/)). 주소만 붙여 넣어도 링크가 됩니다.

## 새 창과 nofollow

링크 창의 "새 창에서 열기"를 켜면 `target="_blank"` 와 함께 `rel="noopener noreferrer"` 가 붙습니다. "검색엔진이 따라가지 않게 (nofollow)"를 켜면 `rel` 에 `nofollow` 가 들어갑니다. 다른 곳에서 붙은 `sponsored`, `ugc` 는 그대로 둡니다.

## 모든 링크에 rel 붙이기 (linkRel)

방문자가 쓰는 게시판이라면 `linkRel: 'nofollow ugc'` 를 주세요. `getHTML()` 로 꺼낼 때 모든 `http(s)` 링크에 그 값이 더해집니다. `nofollow`, `sponsored`, `ugc` 만 쓸 수 있고 편집 중인 내용은 바뀌지 않습니다.

## 고치기와 해제

- 링크 안에 커서를 두면 작은 막대가 떠서 주소, 열기, 수정, 링크 해제 버튼을 보여 줍니다.
- `Ctrl`+클릭으로 링크를 새 탭에서 엽니다. `#책갈피` 링크는 글 안의 그 위치로 갑니다.
- `unlink`: 커서만 둔 상태면 링크 전체를, 선택한 상태면 선택한 부분의 링크를 풉니다. 글자는 남습니다.
- 사진을 선택하고 링크를 넣으면 사진 전체가 링크가 됩니다 ([사진](https://82editor.com/docs/images/)).

## 프리셋과 휴대폰

`link` 는 모든 프리셋의 첫 줄과 휴대폰 툴바 첫 줄에 있습니다. `unlink` 는 어느 프리셋에도 없고, 링크 막대와 링크 창의 해제 버튼으로 대신합니다. 글자를 선택하면 뜨는 [선택 툴바](https://82editor.com/docs/bubble-toolbar/)에도 링크 버튼이 있습니다.

## 저장되는 HTML

```html
<a href="https://82editor.com/">82editor 홈페이지</a>
<a href="https://example.com/" target="_blank" rel="nofollow noopener noreferrer">새 창 + nofollow</a>
<!-- linkRel: 'ugc' 이면 꺼낼 때 -->
<a href="https://82editor.com/" rel="ugc">82editor 홈페이지</a>
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `link` | toolbar item | — | 링크 창 열기 |
| `unlink` | toolbar item | — | 링크 해제 |
| `linkRel` | string | 없음 | 꺼낼 때 모든 http(s) 링크에 더할 rel: `nofollow` `sponsored` `ugc` |
| `autoLink` | boolean | `true` | 친 주소를 저절로 링크로 |

---

# 서식 지우기·복사

> 서식 지우기, 서식 복사(붓), 영문 대소문자 바꾸기.

Source: https://82editor.com/docs/format-tools/

다른 곳에서 가져온 글의 서식을 걷어 내거나, 한 곳의 글자 모양을 다른 곳에 그대로 옮길 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'bold color | clearFormat formatPainter caseChange',
});
```

## 서식 지우기 (clearFormat)

선택한 글자의 굵게, 기울임, 밑줄, 취소선, 첨자, 인라인 코드, 글자 색, 배경 색, 글꼴, 크기를 모두 지웁니다. 단축키는 `Ctrl`+`\` 입니다. 링크, 제목, 정렬, 목록 같은 문단 형식은 남고, 코드 블록 안은 건드리지 않습니다. 글자를 선택해야 동작합니다.

## 서식 복사 (formatPainter)

- 모양을 가져올 글자에 커서를 두고 `formatPainter` 를 누릅니다. "서식을 복사했어요" 안내가 뜹니다.
- 적용할 글자를 마우스로 드래그하거나 `Shift`+방향키로 선택하면, 그 글자의 서식을 지우고 복사한 서식을 입힙니다.
- 복사되는 것: 굵게, 기울임, 밑줄, 취소선, 위·아래 첨자, 글자 색, 배경 색, 글자 크기, 글꼴. 정렬이나 줄간격 같은 문단 서식은 복사하지 않습니다.
- 한 번 적용하면 끝납니다. 적용 전에 버튼을 다시 누르거나 `Esc` 를 누르면 취소됩니다.

## 대소문자 (caseChange)

선택한 영문을 "모두 대문자", "모두 소문자", "단어 첫 글자만 대문자"로 바꿉니다. 한글에는 영향이 없습니다.

## 프리셋

- `board`(기본): `clearFormat` 는 첫 줄 끝, `formatPainter` 는 ⋯ 더 보기 안. `caseChange` 는 없음
- `full`: 세 가지 모두 더 보기 안
- 글자를 선택하면 뜨는 [선택 툴바](https://82editor.com/docs/bubble-toolbar/)에도 서식 지우기가 있습니다.

워드나 한글에서 붙여 넣은 글은 붙여 넣을 때 이미 정리됩니다. 서식 없이 붙이려면 `Ctrl`+`Shift`+`V` 를 쓰세요 ([붙여넣기 정리](https://82editor.com/docs/paste/)).

## API

```js
editor.exec('clearFormat');
editor.exec('caseChange', 'upper'); // upper | lower | title
editor.exec('formatPainter');
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `clearFormat` | toolbar item | — | 선택한 글자의 서식 지우기 |
| `formatPainter` | toolbar item | — | 서식 복사해서 한 번 칠하기 |
| `caseChange` | toolbar item | — | 영문 대소문자 메뉴 |

---

# 특수문자·이모지·날짜

> 특수문자표, 초성으로 찾는 이모지, 지금 날짜·시간 넣기.

Source: https://82editor.com/docs/special-chars/

자판에 없는 기호(※ ★ ① ㈜ ㎡ ₩)와 이모지를 골라 넣고, 지금 날짜와 시간을 한 번에 넣습니다.

```js
createEditor('#editor', {
  toolbar: 'specialChars emoji datetime',
});
```

## 특수문자 (specialChars)

탭으로 나뉜 표에서 눌러 넣습니다. 탭: 기호, 화살표, 수학, 통화, 원·괄호 문자(① ⑴ ㉠ ㈀), 단위(㎏ ㎡ ℃), 한글 자모, 그리스·라틴.

## 이모지 (emoji)

표정, 사람·손, 자연, 음식, 활동, 사물, 기호 7개 탭이 있고 맨 위 검색 칸에서 한국어나 영어로 찾습니다. "ㅋㅍ"처럼 초성만 쳐도 "커피"가 나옵니다.

## 날짜·시간 (datetime)

누르는 순간의 날짜와 시간을 에디터 언어 형식으로 넣습니다. 한국어라면 `2026년 10월 21일 오후 03:20` 처럼 들어갑니다.

## 프리셋

`board`(기본)와 `full` 모두 세 가지가 ⋯ 더 보기 안에 있습니다. `basic`, `minimal` 에는 없습니다.

## 저장되는 HTML

셋 다 이미지나 태그가 아니라 글자 그대로 들어갑니다. 이모지 모양은 읽는 사람의 기기 글꼴에 따라 조금씩 다릅니다.

```html
<p>※ 공지 ★ 1층 ㉠ 구역, 면적 33㎡ 🎉</p>
```

> `(c)` → ©, `->` → →, `(주)` → ㈜ 처럼 치는 동안 바꿔 주는 규칙도 있습니다. [자동 바꾸기](https://82editor.com/docs/auto-replace/)를 보세요.

## API

```js
editor.exec('datetime');
editor.insertText('※');
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `specialChars` | toolbar item | — | 특수문자표 |
| `emoji` | toolbar item | — | 이모지 고르기 (검색 포함) |
| `datetime` | toolbar item | — | 지금 날짜·시간 넣기 |

---

# 표

> 표 넣기, 행·열 추가와 삭제, 셀 합치기, 머리글 행, 셀 배경색, 열 너비 조절.

Source: https://82editor.com/docs/tables/

가격표, 일정표, 비교표처럼 칸을 나눠 정리할 때 씁니다. 툴바의 표 버튼에서 크기를 고르면 표가 들어가고, 표 안에 커서를 두면 표 위에 편집 막대가 뜹니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold color | table | undo redo',
});
```

## 표 넣기

- 툴바의 `table` 버튼을 누르면 10 × 10 칸이 나옵니다. 마우스를 올려 크기를 정하고 누르면 됩니다. 키보드로는 방향키로 크기를 정하고 `Enter` 를 누릅니다.
- 빈 줄에서 `/` 를 치고 "표"를 고르면 3 × 3 표가 들어갑니다 ([슬래시 메뉴](https://82editor.com/docs/slash-menu/)).
- 엑셀·한글·워드에서 복사한 표는 셀 병합 같은 표 구조를 살려 붙여집니다 ([붙여넣기 정리](https://82editor.com/docs/paste/)).

## 표 편집 막대

커서가 표 안에 있으면 표 위쪽에 막대가 뜹니다. 버튼은 왼쪽부터 다음과 같습니다.

| 버튼 | 하는 일 |
| --- | --- |
| 위에 행 넣기 · 아래에 행 넣기 | 커서가 있는 행 위나 아래에 빈 행을 넣습니다. 합쳐진 셀이 걸쳐 있으면 그 셀이 한 칸 늘어납니다. |
| 왼쪽에 열 넣기 · 오른쪽에 열 넣기 | 커서가 있는 열 옆에 빈 열을 넣습니다. |
| 행 삭제 · 열 삭제 | 커서가 있는(또는 고른 셀들의) 행이나 열을 지웁니다. 모든 행이나 열을 지우면 표가 없어집니다. |
| 셀 합치기 | 두 칸 이상 고른 셀을 하나로 합칩니다. 셀마다 있던 글은 줄을 바꿔 이어 붙습니다. |
| 셀 나누기 | 합쳐진 셀을 원래 칸으로 되돌립니다. 글은 첫 칸에 남습니다. |
| 머리글 행 | 첫 행을 `<th scope="col">` 머리글로 바꾸거나 되돌립니다. 머리글은 회색 배경에 굵은 글씨입니다. |
| 셀 배경색 | 고른 셀(없으면 커서가 있는 셀)의 배경색을 바꿉니다. 색 없음, 직접 고르기, 최근 색도 있습니다. |
| 테두리 | 1px · 2px · 3px · 테두리 없음. 셀을 골랐으면 그 셀만, 아니면 표 전체에 적용합니다. 테두리 없는 셀은 편집 중에만 점선으로 보입니다. |
| 세로 맞춤 | 셀 안 글을 위쪽 · 가운데 · 아래쪽에 맞춥니다. |
| 표 삭제 | 표를 지우고 그 자리에 빈 문단을 남깁니다. |

## 셀 고르기와 이동

- 셀 하나에서 다른 셀까지 마우스로 끌면 사각형 범위로 셀이 골라집니다. 합쳐진 셀이 걸치면 범위가 그만큼 넓어집니다.
- `Tab` 은 다음 셀, `Shift`+`Tab` 은 이전 셀로 갑니다. 마지막 셀에서 `Tab` 을 누르면 아래에 행이 하나 생깁니다.
- 셀 오른쪽 테두리에 마우스를 대면 커서가 바뀝니다. 그대로 끌면 열 너비가 바뀝니다 (최소 30px). 처음 끌 때 모든 열의 지금 너비가 px로 고정되어, 끈 열만 달라집니다.

## 저장되는 HTML

모양은 모두 인라인 스타일로 저장됩니다. 사이트에 따로 CSS가 없어도 편집할 때와 같은 표가 보입니다.

```html
<div data-table-wrap="" style="overflow-x: auto">
  <table style="border-collapse: collapse; width: 100%"><tbody>
    <tr><th style="border: 1px solid #d0d5dd; …; background-color: #f2f4f7; font-weight: 600" scope="col">요금제</th>…</tr>
    <tr><td style="border: 1px solid #d0d5dd; padding: 6px 8px; vertical-align: top">기본</td>…</tr>
  </tbody></table>
</div>
```

바깥의 `div[data-table-wrap]` 는 `responsiveOutput`(기본 켜짐)이 붙입니다. 휴대폰처럼 좁은 화면에서 표가 화면 밖으로 넘치지 않고 옆으로 밀어서 보입니다. 저장한 글을 다시 불러오면 이 상자는 벗겨지므로 편집할 때는 보이지 않습니다.

## 코드로 다루기

표 막대의 버튼은 모두 `editor.exec()` 명령입니다. 직접 만든 버튼이나 단축키에서 같은 일을 할 수 있습니다.

```js
editor.exec('insertTable', '4x3');   // 4행 3열
editor.exec('rowBelow');             // rowAbove, colLeft, colRight
editor.exec('deleteRow');            // deleteCol, deleteTable
editor.exec('mergeCells');           // splitCell
editor.exec('headerRow');
editor.exec('cellColor', '#fff3bf'); // '' 이면 배경색 지우기
editor.exec('cellVAlign', 'middle'); // top | middle | bottom
editor.exec('tableBorder', '0');     // 0 | 1 | 2 | 3 (px)
```

## 프리셋과 휴대폰

`table` 버튼은 `basic`, `board`(기본), `full` 프리셋의 첫 줄에 있고 `minimal` 에는 없습니다. 휴대폰에서 기본 `board` 툴바는 자주 쓰는 버튼 한 줄만 남기므로, 표 버튼은 ⋯ 메뉴 안에 들어갑니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `table` | toolbar item | - | 표 넣기 (10 × 10 크기 고르기) |
| `colors` | string[] | 셀용 20색 | 이 옵션을 주면 글자색 팔레트와 셀 배경색 팔레트가 모두 이 목록을 씁니다. 주지 않으면 셀 배경색은 옅은 색 위주의 셀 전용 팔레트입니다. |
| `responsiveOutput` | boolean | true | 저장 HTML에서 표를 옆으로 스크롤되는 상자로 감쌉니다. `false` 면 표만 저장합니다. |

---

# 인용구

> 인용 블록과 네 가지 인용구 모양(세로선, 따옴표, 회색 상자, 테두리 상자).

Source: https://82editor.com/docs/quotes/

다른 글이나 말을 옮겨 올 때, 또는 한 문단을 눈에 띄게 할 때 씁니다. `quoteStyle` 메뉴에서 모양을 고르면 인용이 되면서 모양이 함께 적용됩니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | blockquote quoteStyle | undo redo',
});
```

## 인용 만들기

- `blockquote` 버튼 또는 `Ctrl`+`Shift`+`B`: 커서가 있는 문단(여러 줄을 골랐으면 그 문단들)을 인용으로 감쌉니다. 한 번 더 누르면 인용이 풀립니다.
- 문단 맨 앞에서 `>` 와 스페이스를 치면 인용이 됩니다 (`markdownShortcuts`).
- `heading` 드롭다운에도 "인용"이 있습니다.
- 인용 안 마지막 빈 줄에서 `Enter` 를 한 번 더 누르면 인용 밖으로 나옵니다. 인용의 첫 줄이 비어 있을 때 `Backspace` 를 누르면 인용이 풀립니다.

## 인용구 모양

| 값 | 이름 | 모양 |
| --- | --- | --- |
| `'line'` | 세로선 | 왼쪽 세로선. 기본 모양이라 저장 HTML에 스타일을 따로 붙이지 않습니다. |
| `'mark'` | 따옴표 | 가운데 정렬, 조금 큰 글씨. 위아래 큰 따옴표는 에디터 CSS가 그립니다. |
| `'box'` | 회색 상자 | 세로선 없이 연한 회색 배경, 둥근 모서리 |
| `'border'` | 테두리 상자 | 얇은 회색 테두리, 둥근 모서리 |

커서가 인용 안에 있으면 메뉴 끝에 "인용 해제"가 나옵니다. 인용 밖에서 모양을 고르면 그 문단을 인용으로 만들고 모양을 입힙니다.

## 저장되는 HTML

```html
<blockquote><p>세로선 인용</p></blockquote>
<blockquote data-quote="box" style="border-left: 0; background-color: #f1f3f5; border-radius: 8px; padding: 12px 16px">
  <p>회색 상자 인용</p>
</blockquote>
```

> 세로선 모양과 따옴표 모양의 큰 따옴표는 인라인 스타일이 아니라 CSS로 그려집니다. 글을 보여 주는 페이지에서 저장 HTML을 `<div class="e82-view">` 로 감싸고 82editor.css 를 불러오면 편집할 때와 같게 보입니다. 아니면 사이트 CSS에서 `blockquote` 모양을 정해 주세요.

```js
editor.exec('blockquote');           // 인용 넣기 / 풀기
editor.exec('quoteStyle', 'box');    // line | mark | box | border, '' 이면 인용 해제
```

## 프리셋

`board` 와 `full` 프리셋은 ⋯ 메뉴에 `quoteStyle` 를 둡니다. `blockquote` 버튼은 어느 프리셋에도 없으니 필요하면 `toolbar` 에 직접 넣으세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `blockquote` | toolbar item | - | 인용 넣기·풀기 (`Ctrl`+`Shift`+`B`) |
| `quoteStyle` | toolbar item | - | 인용구 모양 고르기 (세로선·따옴표·회색 상자·테두리 상자) |
| `markdownShortcuts` | boolean | true | `> ` 로 인용 만들기를 포함한 입력 단축 |

---

# 강조 박스

> 정보·팁·완료·주의·위험 다섯 가지 색 상자.

Source: https://82editor.com/docs/callouts/

안내, 팁, 주의할 점을 본문과 구분해 보여 줄 때 씁니다. 아이콘이 붙은 색 상자로 문단을 감쌉니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | callout | undo redo',
});
```

## 쓰는 법

- `callout` 메뉴에서 종류를 고르면 커서가 있는 문단(골랐으면 고른 문단들)이 상자에 들어가고 맨 앞에 아이콘이 붙습니다. 빈 줄에서 고르면 아이콘 바로 뒤에서 글을 쓸 수 있습니다.
- 상자 안에 커서를 두면 상자 오른쪽 위에 막대가 뜹니다. 다른 종류를 누르면 색과 아이콘이 바뀌고, 휴지통 버튼은 상자만 없애고 글은 남깁니다.
- 같은 종류를 한 번 더 고르거나, 상자 맨 앞에서 `Backspace` 를 눌러도 상자가 풀립니다.
- 빈 줄에서 `/` 를 치고 "강조 박스"를 고르면 정보 상자가 들어갑니다.
- 상자 안에 목록, 표, 다른 블록을 넣을 수 있습니다. 접은글 안에도 상자를 넣을 수 있습니다.

## 종류

| 값 | 이름 | 아이콘 | 배경 / 선 |
| --- | --- | --- | --- |
| `'info'` | 정보 | ℹ️ | #e7f5ff / #74c0fc |
| `'tip'` | 팁 | 💡 | #fff9db / #fcc419 |
| `'success'` | 완료 | ✅ | #ebfbee / #69db7c |
| `'warning'` | 주의 | ⚠️ | #fff4e6 / #ffa94d |
| `'danger'` | 위험 | 🚫 | #fff5f5 / #ff8787 |

## 저장되는 HTML

색과 모양이 인라인 스타일로 들어가므로 CSS가 없는 페이지에서도, 메일로 보내도 같은 상자로 보입니다. 아이콘은 첫 문단 앞의 평범한 글자입니다.

```html
<div data-callout="tip" style="background-color: #fff9db; border-left: 4px solid #fcc419; border-radius: 8px; padding: 12px 16px; margin: 0.8em 0">
  <p>💡 사진은 가로로 찍으면 더 크게 보입니다.</p>
</div>
```

```js
editor.exec('callout', 'warning'); // 상자 넣기, 종류 바꾸기
editor.exec('callout', '');        // 상자 없애기
```

## 프리셋

`board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `callout` | toolbar item | - | 강조 박스 넣기, 종류 바꾸기, 없애기 |
| `slashMenu` | boolean | true | `/` 메뉴의 "강조 박스" 항목 |

---

# 접은글

> 제목만 보이고 누르면 펼쳐지는 접은글(details).

Source: https://82editor.com/docs/details/

정답, 스포일러, 긴 부연 설명처럼 원하는 사람만 펼쳐 보게 할 내용에 씁니다. HTML 표준 `<details>` 로 저장되므로 스크립트 없이 어느 페이지에서나 접히고 펼쳐집니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | details | undo redo',
});
```

## 쓰는 법

- 빈 줄에서 `details` 버튼을 누르면 접은글이 들어가고 제목 "더보기"가 골라진 상태가 됩니다. 바로 쳐서 제목을 바꾸면 됩니다.
- 여러 문단을 고르고 누르면 그 문단들이 접은글 안으로 들어갑니다.
- 접은글 안에서 다시 누르면 접은글이 풀립니다. 제목은 문단이 되고 내용은 그대로 남습니다. 제목 맨 앞에서 `Backspace` 를 눌러도 풀립니다.
- 빈 줄에서 `/` 를 치고 "접은글"(또는 더보기, 스포일러)을 골라도 됩니다.

## 편집 중에는 늘 펼쳐져 있습니다

쓰는 동안 내용이 숨으면 고치기 어려우므로, 편집 화면에서는 접은글이 항상 펼쳐져 있고 제목을 눌러도 접히지 않습니다. 저장 HTML에서 접혀 있는 글은 제목 앞에 ▸ 표시가 붙습니다.

접은글 안에 커서를 두면 오른쪽 위에 막대가 뜹니다.

- **처음부터 펼쳐 두기**: 켜면 저장 HTML에 `open` 속성이 붙어, 읽는 사람에게 펼쳐진 채로 보입니다. 기본은 꺼짐(접힌 채)입니다.
- **접은글 해제**: 접은글을 풀고 내용만 남깁니다.

읽기 전용(`readOnly: true` 또는 `setReadOnly(true)`)으로 바꾸면 저장될 모양 그대로 접히고, 제목을 눌러 펼칠 수 있습니다.

## 저장되는 HTML

```html
<details style="border: 1px solid #d0d7de; border-radius: 8px; padding: 8px 14px; margin: 0.8em 0">
  <summary style="font-weight: 600">정답 보기</summary>
  <p>한라산 (1,947m)</p>
</details>
```

새 접은글의 제목 기본값은 화면 문구 `detailsSummary` 입니다. 바꾸려면 `locale` 옵션을 씁니다.

```js
createEditor('#editor', {
  locale: { detailsSummary: '펼쳐 보기' },
});

editor.exec('details');      // 넣기 / 풀기
editor.exec('detailsOpen');  // 처음부터 펼쳐 두기 켜고 끄기
```

## 프리셋

`board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `details` | toolbar item | - | 접은글 넣기·풀기 |
| `locale.detailsSummary` | string | '더보기' | 새 접은글의 제목 |
| `readOnly` | boolean | false | 읽기 전용에서는 접은글이 실제로 접히고 펼쳐집니다 |

---

# 구분선과 쪽 나누기

> 가로 구분선, 여섯 가지 구분선 모양, 인쇄용 쪽 나누기.

Source: https://82editor.com/docs/dividers/

글의 흐름이 바뀌는 곳에 선을 긋거나, 인쇄할 때 다음 쪽에서 시작하게 할 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'bold | hr hrStyle pageBreak | undo redo',
});
```

## 구분선

`hr` 버튼은 커서 자리에 기본 구분선(`<hr>`)을 넣습니다. `hrStyle` 드롭다운은 모양을 골라 넣습니다. 빈 줄에서 `/` 를 치고 "구분선"을 골라도 됩니다.

| 값 | 이름 | 저장되는 스타일 |
| --- | --- | --- |
| `'thin'` | 얇은 선 | 없음 (`<hr>`) |
| `'thick'` | 굵은 선 | `border-top: 3px solid #adb5bd` |
| `'dashed'` | 파선 | `border-top: 2px dashed #adb5bd` |
| `'dotted'` | 점선 | `border-top: 3px dotted #adb5bd` |
| `'double'` | 이중 선 | `border-top: 4px double #adb5bd` |
| `'short'` | 짧은 선 | `border-top: 2px solid #868e96; width: 64px; margin: 2em auto` |

얇은 선을 뺀 모양은 `border: 0` 과 함께 인라인 스타일로 저장되므로 사이트 CSS 없이도 같은 모양입니다. 얇은 선은 브라우저나 사이트의 기본 `hr` 모양을 따릅니다.

## 쪽 나누기

`pageBreak` 는 인쇄하거나 PDF로 저장할 때 그 자리에서 다음 쪽으로 넘기는 표시를 넣습니다. 화면에서는 보이지 않고, 편집 중에만 점선과 "PAGE BREAK" 글자로 표시됩니다. 빈 줄에서 `/` 를 치고 "쪽 나누기"를 골라도 됩니다.

```html
<div data-page-break="" style="page-break-after: always; break-after: page"></div>
```

```js
editor.exec('hr');            // 기본 구분선
editor.exec('hr', 'dashed');  // thin | thick | dashed | dotted | double | short
editor.exec('pageBreak');
```

## 프리셋

`board` 와 `full` 프리셋은 ⋯ 메뉴에 `hrStyle` 를 둡니다. `pageBreak` 는 `full` 에만 있습니다. `hr` 버튼은 어느 프리셋에도 없습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `hr` | toolbar item | - | 기본 구분선 넣기 |
| `hrStyle` | toolbar item | - | 여섯 가지 모양 중 골라 구분선 넣기 |
| `pageBreak` | toolbar item | - | 인쇄용 쪽 나누기 넣기 |

---

# 코드 블록

> 줄바꿈과 들여쓰기를 지키는 코드 블록과 언어 지정.

Source: https://82editor.com/docs/code-blocks/

소스 코드, 설정 파일, 터미널 명령처럼 글자 모양과 공백을 그대로 보여야 하는 내용에 씁니다. 고정폭 글꼴의 회색 상자로 보입니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold code | codeBlock | undo redo',
});
```

## 쓰는 법

- `codeBlock` 버튼 또는 `Ctrl`+`Shift`+`C`: 커서가 있는 문단(골랐으면 고른 문단들)을 코드 블록으로 바꿉니다. 문단마다 한 줄이 됩니다.
- 코드 블록 안에서 다시 누르면 줄마다 문단으로 돌아옵니다. 맨 앞에서 `Backspace` 를 눌러도 문단이 됩니다.
- 안에서 `Enter` 는 줄바꿈입니다. 마지막 빈 줄에서 `Enter` 를 한 번 더 누르면 블록 밖으로 나옵니다.
- `Tab` 은 공백 두 칸을 넣습니다.
- 빈 줄에서 `/` 를 치고 "코드 블록"을 골라도 됩니다.
- 코드 블록 안에서는 글자를 골라도 서식 말풍선 툴바가 뜨지 않습니다.

## 언어 고르기

코드 블록 안에 커서를 두면 아래에 막대가 뜹니다. 언어를 고르면 `<code>` 에 `class="language-…"` 가 붙습니다. 에디터가 색을 칠하지는 않습니다. 글을 보여 주는 페이지에서 Prism, highlight.js 같은 구문 강조 스크립트가 이 class를 보고 색을 입힙니다. 막대의 닫기 버튼은 코드 블록을 문단으로 되돌립니다.

| 값 | 언어 |
| --- | --- |
| (없음) | 일반 텍스트 |
| `html` `css` `js` `ts` `json` | HTML, CSS, JavaScript, TypeScript, JSON |
| `bash` `python` `java` `kotlin` `php` `sql` | Shell, Python, Java, Kotlin, PHP, SQL |
| `c` `cpp` `csharp` `go` `rust` `swift` `ruby` | C, C++, C#, Go, Rust, Swift, Ruby |
| `xml` `yaml` `markdown` | XML, YAML, Markdown |

## 문장 안의 코드

한 단어나 짧은 명령은 `code` 버튼(`Ctrl`+`E`)으로 문장 안에 넣습니다. `markdownShortcuts` 가 켜져 있으면 ``코드`` 처럼 백틱으로 감싸 쳐도 됩니다. 마크다운의 ``` 코드 울타리는 [마크다운 붙여넣기](https://82editor.com/docs/markdown/)로 들어옵니다.

## 저장되는 HTML

```html
<pre><code class="language-js">const editor = createEditor('#editor', {
  toolbar: 'board',
});</code></pre>
```

> 코드 블록의 회색 배경과 고정폭 글꼴은 인라인 스타일이 아니라 CSS로 그려집니다. 보여 주는 페이지에서 `<div class="e82-view">` 로 감싸고 82editor.css 를 불러오거나, 사이트 CSS에서 `pre` 모양을 정해 주세요.

```js
editor.exec('codeBlock');         // 넣기 / 풀기
editor.exec('codeBlock', 'php');  // 언어를 정해 넣기
editor.exec('code');              // 문장 안 코드
```

## 프리셋

`codeBlock` 은 `board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다. `code`(문장 안 코드)는 `full` 에만 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `codeBlock` | toolbar item | - | 코드 블록 넣기·풀기 (`Ctrl`+`Shift`+`C`) |
| `code` | toolbar item | - | 문장 안 코드 (`Ctrl`+`E`) |
| `markdownShortcuts` | boolean | true | ``코드`` 입력 단축 포함 |

---

# 단 나누기

> 내용을 2단·3단으로 나란히 놓기. 휴대폰에서는 저절로 아래로 쌓입니다.

Source: https://82editor.com/docs/columns/

사진과 설명, 장점과 단점처럼 두세 덩어리를 나란히 보여 줄 때 씁니다. 화면이 좁으면 미디어 쿼리 없이도 단이 아래로 쌓입니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | columns | undo redo',
});
```

## 쓰는 법

- `columns` 메뉴에서 2단 또는 3단을 고르면, 커서가 있는 문단(골랐으면 고른 문단들)이 첫 단에 들어가고 나머지 단은 빈 줄로 생깁니다.
- 단 안에 커서를 두면 오른쪽 위에 막대가 뜹니다. 2단 · 3단으로 바꾸거나 "단 없애기"로 풀 수 있습니다.
- 3단을 2단으로 줄이면 사라지는 단의 내용은 남는 마지막 단 뒤에 붙습니다. 단을 없애면 내용이 차례대로 이어지고, 손대지 않은 빈 줄은 지워집니다.
- 편집 중에는 단마다 점선 테두리가 보입니다. 저장 HTML에는 없습니다.

## 휴대폰에서

단마다 `flex: 1 1 240px` 가 들어가 있어 한 단이 240px보다 좁아질 화면에서는 단이 줄바꿈되어 아래로 쌓입니다. 사이트 CSS를 고칠 필요가 없습니다.

## 저장되는 HTML

```html
<div data-columns="2" style="display: flex; flex-wrap: wrap; gap: 24px; margin: 0.8em 0">
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>좋은 점</h3>…</div>
  <div data-column="" style="flex: 1 1 240px; min-width: 0"><h3>아쉬운 점</h3>…</div>
</div>
```

```js
editor.exec('columns', '3');  // 3단으로 (단 밖이면 새로 만들기)
editor.exec('columns', '');   // 단 없애기
```

## 프리셋

`board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `columns` | toolbar item | - | 2단 · 3단 만들기, 단 수 바꾸기, 단 없애기 |

---

# 책갈피와 목차

> 문단에 책갈피(id)를 달고 #링크로 이동하기, 제목으로 목차 만들기.

Source: https://82editor.com/docs/bookmarks/

긴 글에서 특정 위치로 바로 가는 링크를 만들 때 씁니다. 책갈피는 블록에 붙는 `id` 이고, 목차는 제목들의 책갈피를 모은 링크 목록입니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link | anchor toc | undo redo',
});
```

## 책갈피 달기

- 책갈피를 달 블록에 커서를 두고 `anchor` 버튼을 누릅니다. 이름 칸에는 블록 글자로 만든 이름이 미리 들어 있습니다.
- 이름은 한글을 포함한 글자, 숫자, `-`, `_` 만 씁니다. 공백과 기호는 `-` 로 바뀝니다. 같은 이름이 이미 있으면 `-2`, `-3` 이 붙습니다.
- 이름을 비우고 적용하면 책갈피가 지워집니다.
- 책갈피를 달 수 있는 블록: 제목, 문단, 목록 항목, 인용, 강조 박스, 사진(figure), 표, 접은글.
- 편집 중에는 책갈피가 있는 블록 왼쪽에 옅은 `#` 표시가 보입니다.

## 책갈피로 링크하기

- 링크 창(`Ctrl`+`K`)의 주소 칸에서 글 안의 책갈피가 `#이름` 으로 추천됩니다.
- 편집 중 `#` 링크를 `Ctrl`+클릭(맥은 `⌘`+클릭)하면 에디터 안에서 그 위치로 스크롤합니다. 링크 막대의 "열기" 버튼도 같습니다.

## 목차 넣기

`toc` 버튼은 지금 글의 제목(H1~H4)으로 목차를 만들어 커서 자리에 넣습니다. 책갈피가 없는 제목에는 제목 글자로 책갈피를 자동으로 붙입니다. 하위 제목은 20px씩 들여씁니다. 제목이 하나도 없으면 아무것도 넣지 않습니다. 빈 줄에서 `/` 를 치고 "목차 넣기"를 골라도 됩니다.

> 목차는 넣는 순간의 제목으로 만든 고정된 목록입니다. 나중에 제목을 바꾸거나 더하면 목차를 지우고 다시 넣으세요. 편집 중에 목차는 한 덩어리로 다뤄지며 안의 글자를 직접 고칠 수 없습니다.

## 저장되는 HTML

```html
<nav data-toc=""><p><strong>목차</strong></p><ul>
  <li><a href="#설치">설치</a></li>
  <li style="margin-left: 20px"><a href="#cdn">CDN</a></li>
</ul></nav>
<h2 id="설치">설치</h2>
```

id는 저장할 때 걸러지지 않고 남습니다(한글 id 포함). 목차 제목 "목차"는 화면 문구 `tocTitle` 이라 `locale` 옵션으로 바꿀 수 있습니다.

```js
createEditor('#editor', {
  locale: { tocTitle: '이 글의 차례' },
});

editor.exec('anchor'); // 책갈피 창 열기
editor.exec('toc');    // 목차 넣기
```

## 프리셋

`anchor` 와 `toc` 는 `board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `anchor` | toolbar item | - | 커서가 있는 블록에 책갈피 달기·바꾸기·지우기 |
| `toc` | toolbar item | - | 제목으로 목차 넣기 |
| `locale.tocTitle` | string | '목차' | 목차 맨 위 제목 |

---

# 템플릿

> 자주 쓰는 글 틀을 메뉴에서 골라 넣기.

Source: https://82editor.com/docs/templates/

공지 양식, 상품 문의 답변, 회의록처럼 매번 같은 틀로 시작하는 글이 있으면 `templates` 옵션에 등록해 두고 메뉴에서 골라 넣습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | template | undo redo',
  templates: [
    {
      title: '공지',
      description: '제목, 날짜, 문의처',
      html: '<h2>공지 제목</h2><p><strong>일시:</strong> </p><p><strong>문의:</strong> </p>',
    },
    {
      title: '회의록',
      description: '참석자, 안건, 결정 사항',
      html: '<h3>참석자</h3><ul><li></li></ul><h3>안건</h3><ol><li></li></ol><h3>결정 사항</h3><p></p>',
    },
  ],
});
```

## 쓰는 법

- `template` 버튼을 누르면 등록한 템플릿 목록이 나옵니다. `description` 은 제목 옆에 작게 보입니다.
- 고른 템플릿의 HTML은 커서 자리에 들어갑니다. 글 전체를 바꾸지 않습니다.
- `slashMenu` 가 켜져 있으면 템플릿이 `/` 메뉴에도 들어갑니다. 제목과 설명으로 찾을 수 있습니다.
- `templates` 가 비어 있으면 메뉴에 "맞는 항목이 없어요" 안내만 보입니다.

> 템플릿 HTML도 다른 내용처럼 허용 목록 거르기를 거친 뒤 들어갑니다. 사이트 CSS의 class를 쓰려면 [스타일](https://82editor.com/docs/styles/)의 `styles` 옵션에 등록하거나, [HTML 블록](https://82editor.com/docs/html-block/)으로 감싸세요.

## 코드로 넣기

버튼 없이 특정 시점에 틀을 넣고 싶으면 `insertHTML` 을 부릅니다. 글을 통째로 바꾸려면 `setHTML` 입니다.

```js
editor.insertHTML('<h2>공지 제목</h2><p></p>');   // 커서 자리에 (걸러서) 넣기
editor.setHTML('<h2>공지 제목</h2><p></p>');      // 내용 전체 바꾸기
```

## 프리셋

`template` 은 `full` 프리셋의 ⋯ 메뉴에만 있습니다. `board` 를 쓰면서 템플릿을 쓰려면 `toolbar` 에 직접 넣으세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `templates` | { title, html, description? }[] | - | 메뉴에 보일 템플릿 목록 |
| `template` | toolbar item | - | 템플릿 메뉴 열기 |
| `slashMenu` | boolean | true | `/` 메뉴에도 템플릿 보이기 |

---

# HTML 블록

> 상세페이지처럼 미리 만든 HTML을 class와 스타일째 넣기.

Source: https://82editor.com/docs/html-block/

쇼핑몰 상세페이지, 배너, 직접 짠 레이아웃처럼 이미 만들어 둔 HTML을 그대로 넣을 때 씁니다. 보통 내용과 달리 HTML 블록 안에서는 class와 거의 모든 CSS 속성이 남습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | htmlBlock | source | undo redo',
});
```

## 쓰는 법

- `htmlBlock` 버튼을 누르면 HTML을 붙여 넣는 창이 열립니다. "넣기"를 누르면 커서 자리에 블록이 들어갑니다.
- 편집 화면에서 HTML 블록은 한 덩어리입니다. 안의 글자를 바로 고칠 수 없고, 누르면 블록 전체가 골라지면서 막대가 뜹니다.
- 막대: **HTML 고치기**(같은 창에서 고치고 적용, 또는 삭제), **위로 옮기기**, **아래로 옮기기**, **삭제**.

## 무엇이 남고 무엇이 빠지나

|  | HTML 블록 안 | 보통 내용 |
| --- | --- | --- |
| class | 남음 (한 요소에 12개까지) | 빠짐 (`styles` 에 등록한 것만 남음) |
| CSS 속성 | 거의 모두 남음 (grid, gradient 등) | 허용 목록의 속성만 |
| `section` `article` `header` `footer` `aside` `main` `center` | 남음 | 태그는 벗기고 글만 남음 |
| `script` `style` `form` `input` `button` `svg` 등 | 내용째 빠짐 | 내용째 빠짐 |
| `onclick` 같은 이벤트 속성 | 빠짐 | 빠짐 |
| `javascript:` 주소, CSS의 `url()`·`expression()` | 빠짐 | 빠짐 |
| iframe | 허용된 사이트만 (`allowedIframeHosts`) | 허용된 사이트만 |

> `<style>` 태그는 빠지므로, class를 쓰는 HTML이라면 그 CSS는 글을 보여 주는 페이지에 따로 넣어야 합니다. 걸러진 결과는 막대의 "HTML 고치기"나 `source`(HTML 보기)로 확인하세요.

## 저장되는 HTML

```html
<div data-html="">
  <section class="promo" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; …">
    …
  </section>
</div>
```

서버에서 한 번 더 거를 때 `div[data-html]` 안의 class와 style을 지우지 않도록 규칙을 맞춰 주세요 ([보안](https://82editor.com/docs/security/)).

```js
editor.exec('htmlBlock'); // HTML 블록 창 열기
```

## 프리셋

`htmlBlock` 은 `full` 프리셋의 ⋯ 메뉴에만 있습니다. 방문자가 쓰는 게시판보다는 관리자 화면에 어울립니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `htmlBlock` | toolbar item | - | HTML 블록 넣기·고치기 |
| `allowedIframeHosts` | string[] | - | 블록 안 iframe도 기본 동영상 사이트·구글 지도와 이 목록의 주소만 남습니다 |

---

# 이미지 업로드

> 이미지를 내 서버로 올리기: 함수, URL, 서버 예제(PHP·Node·Workers·Spring).

Source: https://82editor.com/docs/image-upload/

아무 설정이 없으면 이미지는 base64로 글 안에 들어갑니다. 글이 커지므로 운영 사이트에서는 서버로 올리세요. 파일 선택, 드래그, 붙여넣기, 다른 사이트에서 복사한 이미지 모두 같은 길로 올라갑니다.

## 1. 업로드 함수 넘기기 (권장)

```js
createEditor('#editor', {
  imageMaxSize: 10 * 1024 * 1024,
  uploadImage: async (file, { onProgress }) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/upload', { method: 'POST', body: form });
    if (!res.ok) throw new Error('업로드 실패');
    const { url } = await res.json();
    return url; // 에디터가 이 주소로 <img> 를 넣습니다
  },
});
```

## 2. URL만 지정하기

```js
createEditor('#editor', {
  uploadUrl: '/upload',
  uploadField: 'file',
  uploadHeaders: { 'X-CSRF-Token': token },
});
// 서버는 { "url": "https://…/a.png" } 를 돌려주면 됩니다.
```

## PHP

```js
<?php
// upload.php
$f = $_FILES['file'] ?? null;
$types = ['image/png' => 'png', 'image/jpeg' => 'jpg', 'image/gif' => 'gif', 'image/webp' => 'webp'];
$type = $f ? mime_content_type($f['tmp_name']) : '';
if (!$f || !isset($types[$type]) || $f['size'] > 10485760) { http_response_code(400); exit; }
$name = bin2hex(random_bytes(16)) . '.' . $types[$type];
move_uploaded_file($f['tmp_name'], __DIR__ . '/files/' . $name);
header('Content-Type: application/json');
echo json_encode(['url' => '/files/' . $name]);
```

## Node (Express + multer)

```js
import express from 'express';
import multer from 'multer';

const upload = multer({ dest: 'public/files', limits: { fileSize: 10 * 1024 * 1024 } });
const app = express();
app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file?.mimetype.startsWith('image/')) return res.status(400).end();
  res.json({ url: '/files/' + req.file.filename });
});
```

## Cloudflare Workers + R2

```js
export default {
  async fetch(req, env) {
    const form = await req.formData();
    const file = form.get('file');
    if (!file || !file.type.startsWith('image/')) return new Response('bad', { status: 400 });
    const key = crypto.randomUUID() + '.' + file.type.split('/')[1];
    await env.BUCKET.put(key, file.stream(), { httpMetadata: { contentType: file.type } });
    return Response.json({ url: 'https://files.example.com/' + key });
  },
};
```

## Spring Boot

```js
@PostMapping("/upload")
public Map<String, String> upload(@RequestParam("file") MultipartFile file) throws IOException {
  if (file.getContentType() == null || !file.getContentType().startsWith("image/")) throw new ResponseStatusException(HttpStatus.BAD_REQUEST);
  String name = UUID.randomUUID() + ".png";
  file.transferTo(Path.of("/var/www/files", name));
  return Map.of("url", "/files/" + name);
}
```

> 서버에서는 확장자나 Content-Type 을 믿지 말고 파일 첫 바이트로 형식을 확인하세요. SVG는 스크립트를 담을 수 있으니 받지 않는 편이 안전합니다.

---

# 이미지 넣기와 편집

> 사진 넣기, 모서리 끌어 크기 조절, 배치, 대체 텍스트, 캡션, 사진에 링크.

Source: https://82editor.com/docs/images/

글에 사진을 넣고, 넣은 사진을 눌러 크기·배치·캡션을 바꿉니다. 게시판 글, 블로그 글처럼 사진이 섞인 글이면 거의 다 씁니다.

```js
createEditor('#editor', {
  toolbar: 'image | alignLeft alignCenter alignRight | undo redo',
  height: 400,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## 넣는 방법

- 툴바의 **이미지** 단추(`image`): 끌어다 놓는 칸을 누르거나 파일을 끌어 놓습니다. 여러 장을 한 번에 고를 수 있습니다. 아래 칸에 주소와 대체 텍스트를 적어 주소로 넣을 수도 있습니다.
- 본문에 사진 파일을 끌어다 놓기, 캡처한 화면이나 복사한 사진을 `Ctrl`+`V` 로 붙여넣기.
- 빈 줄에서 `/` 를 치고 "이미지"나 "사진"을 찾기 ([슬래시 메뉴](https://82editor.com/docs/slash-menu/)).

어느 길로 넣든 먼저 화면에 미리보기가 뜨고, 올리기가 끝나면 서버 주소로 바뀝니다. 업로드 설정이 없으면 base64 로 글 안에 들어가니, 운영 사이트에서는 [이미지 업로드](https://82editor.com/docs/image-upload/)를 설정하세요. 큰 사진 줄이기와 HEIC 변환은 [사진 줄이기·변환](https://82editor.com/docs/image-processing/)에 있습니다.

## 크기 조절

사진을 누르면 네 모서리에 손잡이가 생기고 현재 크기(가로 × 세로)가 보입니다. 손잡이를 끌면 비율을 지키며 너비가 바뀝니다. 가장 작게는 24px, 가장 크게는 본문 너비까지입니다. 휴대폰에서도 손가락으로 끌 수 있습니다.

막대의 **25% 50% 75% 100%** 는 본문 너비에 대한 비율로, **1:1** 은 원본 크기로 되돌립니다.

## 사진 막대

사진을 누르면 위에 막대가 뜹니다.

| 단추 | 하는 일 |
| --- | --- |
| 글자처럼 / 왼쪽 배치 / 가운데 / 오른쪽 배치 | 글자처럼은 글 줄 안에 둡니다. 왼쪽·오른쪽 배치는 `float` 로 글이 사진 옆을 감쌉니다. 가운데는 좌우 여백을 auto 로 둡니다. |
| 25% … 100%, 1:1 | 너비를 비율로 정하거나 원본 크기로 되돌립니다. |
| 대체 텍스트(설명) | `alt` 를 적습니다. 화면 낭독기가 읽고, 사진이 안 뜰 때 대신 보입니다. |
| 캡션 넣기 | 사진을 `<figure>` 로 감싸고 아래에 `<figcaption>` 을 붙입니다. 다시 누르면 캡션을 뺍니다. |
| 이미지 편집 | 자르기·돌리기·뒤집기 ([이미지 편집](https://82editor.com/docs/image-editor/)). |
| 이미지에 링크 | 사진을 `<a>` 로 감쌉니다. 새 창, nofollow 도 고를 수 있습니다. 사진을 고른 채 `Ctrl`+`K` 도 같습니다. |
| 이미지 바꾸기 | 같은 자리, 같은 배치로 다른 사진을 올립니다. |
| 이미지 삭제 | 사진을 지웁니다. 사진을 고른 채 `Backspace` 나 `Delete` 도 같습니다. |

툴바의 `alignLeft` `alignCenter` `alignRight` 와 `Ctrl`+`Shift`+`L`/`E`/`R` 도 사진을 고른 상태에서는 사진에 적용됩니다. 이때 왼쪽은 "글자처럼"이 됩니다.

## 툴바에서의 위치

`image` 는 basic, board, full 프리셋의 첫 줄에 있습니다(minimal 에는 없음). 휴대폰에서는 한 줄 툴바의 맨 앞에 옵니다.

## 저장되는 HTML

```html
<figure style="margin: 0 0 1em; display: table; margin-left: auto; margin-right: auto; text-align: center">
  <img src="/files/a.jpg" alt="숲길 사진" style="width: 360px; height: auto; max-width: 100%" width="640" height="400">
  <figcaption style="font-size: 0.875em; color: #667085; margin-top: 6px">캡션</figcaption>
</figure>
<p><img src="/files/b.jpg" alt="" style="float: left; margin: 0 16px 8px 0; width: 160px; height: auto; max-width: 100%" width="320" height="240" loading="lazy">글…</p>
```

배치와 크기는 모두 인라인 스타일이라 보기 화면에 에디터 CSS 가 없어도 똑같이 보입니다. `responsiveOutput`(기본 켜짐)이 `max-width: 100%` 와 원본 `width`/`height` 를 붙여 휴대폰에서 넘치지 않고, `lazyImages`(기본 켜짐)가 두 번째 사진부터 `loading="lazy"` 를 붙입니다. 자세한 내용은 [저장되는 HTML](https://82editor.com/docs/saved-html/).

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `image` | toolbar item |  | 이미지 넣기 창을 엽니다. |
| `uploadImage` | (file, { onProgress }) => Promise<string> |  | 사진을 올리고 주소를 돌려주는 함수. [이미지 업로드](https://82editor.com/docs/image-upload/) |
| `uploadUrl` | string |  | 함수 대신 이 주소로 POST 합니다. |
| `imageAccept` | string | 'image/*,.heic,.heif' | 고를 수 있는 파일 형식. |
| `imageMaxSize` | number (byte) | 없음 | 사진 한 장의 최대 크기. |
| `responsiveOutput` | boolean | true | 저장할 때 `max-width: 100%` 와 원본 크기를 붙입니다. |
| `lazyImages` | boolean | true | 두 번째 사진부터 `loading="lazy"`. |

---

# 이미지 편집

> 넣은 사진을 브라우저에서 자르기, 돌리기, 뒤집기.

Source: https://82editor.com/docs/image-editor/

이미 넣은 사진을 그 자리에서 자르고 돌립니다. 옆으로 누운 휴대폰 사진, 필요 없는 가장자리를 다른 프로그램 없이 고칠 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  height: 380,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## 여는 방법

사진을 누르면 뜨는 막대의 **이미지 편집** 단추로 엽니다. 따로 툴바 항목은 없습니다. 코드에서는 사진이 선택된 상태에서 `editor.exec('imageEdit')` 로 엽니다.

## 할 수 있는 것

- **자르기**: 사진 위 상자를 끌어 옮기고, 네 모서리를 끌어 크기를 바꿉니다.
- **비율**: 자유, 1:1, 4:3, 3:4, 16:9. 비율을 고르면 지금 상자 안에서 가장 큰 그 비율 상자가 됩니다.
- **왼쪽으로 돌리기 / 오른쪽으로 돌리기**: 90도씩. 돌리면 자르기 상자는 처음으로 돌아갑니다.
- **좌우 뒤집기**
- **원래대로**: 창을 닫지 않고 돌리기·뒤집기·자르기를 모두 되돌립니다.

오른쪽 아래에 잘린 결과의 실제 픽셀 크기가 보입니다. 휴대폰을 옆으로 돌리거나 창 크기가 바뀌면 미리보기가 다시 맞춰집니다.

## 적용하면

**적용**을 누르면 결과를 새 파일로 만들어 새 사진처럼 올리고 원래 사진의 주소를 바꿉니다. 그래서 `uploadImage`·`uploadUrl`, `imageResize`, `imageMaxSize` 가 그대로 적용됩니다. JPEG·PNG·WebP 는 같은 형식으로, 그 밖의 형식은 PNG 로 저장되고 파일 이름 끝에 `-edit` 가 붙습니다.

자르거나 90도 돌렸으면 픽셀 너비로 정한 크기는 지우고, %로 정한 너비는 그대로 둡니다. 배치, 캡션, 링크, 대체 텍스트는 바뀌지 않습니다. 되돌리기(`Ctrl`+`Z`)로 원래 사진으로 돌아갈 수 있습니다.

> 편집하려면 브라우저가 사진의 픽셀을 읽어야 합니다. 다른 사이트에 있는 사진은 그 서버가 CORS(`Access-Control-Allow-Origin`)를 허용하지 않으면 "이 이미지는 편집할 수 없어요" 안내가 뜹니다. 내 서버에 올린 사진은 문제없습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `imageEdit` | command |  | 선택된 사진의 편집 창을 엽니다. 사진 막대에 단추가 있습니다. |
| `uploadImage` / `uploadUrl` |  |  | 편집한 결과도 이 길로 올라갑니다. 없으면 base64. |
| `imageResize` | false \| object | { maxWidth: 1600, quality: 0.85 } | 편집한 결과에도 적용됩니다. [사진 줄이기·변환](https://82editor.com/docs/image-processing/) |

---

# 사진 줄이기·변환

> 올리기 전에 큰 사진 줄이기, WebP 변환, 아이폰 HEIC, 크기·형식 제한.

Source: https://82editor.com/docs/image-processing/

휴대폰 사진은 가로 4000px, 몇 MB 가 흔합니다. 82editor는 올리기 전에 브라우저에서 사진을 줄이고, 필요하면 WebP 로 바꾸고, 아이폰 HEIC 사진을 JPEG 로 바꿉니다. 서버 용량과 글 읽는 사람의 데이터를 아낍니다.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageResize: { maxWidth: 800, quality: 0.8, format: 'webp' },
  imageMaxSize: 3 * 1024 * 1024,
  imageAccept: 'image/jpeg,image/png,image/webp,.heic,.heif',
  uploadImage: async (file) => {
    console.log(file.name, file.type, Math.round(file.size / 1024) + 'KB');
    return URL.createObjectURL(file);
  },
});
```

## 사진 줄이기 (imageResize)

기본으로 켜져 있습니다. 가로가 `maxWidth`(기본 1600px)보다 넓은 JPEG·PNG·WebP 사진을 비율대로 줄이고, `quality`(기본 0.85)로 다시 저장합니다. 다음 경우에는 원본을 그대로 올립니다.

- 이미 `maxWidth` 이하인 사진
- GIF 등 JPEG·PNG·WebP 가 아닌 사진 (움직이는 GIF 가 멈추지 않게)
- 줄인 결과가 원본보다 크거나, 브라우저가 사진을 읽지 못할 때

줄이기를 끄려면 `imageResize: false`.

```js
createEditor('#editor', {
  imageResize: { maxWidth: 1200, quality: 0.8 },
});
```

## WebP 로 바꾸기

`format: 'webp'` 를 주면 JPEG·PNG 는 좁은 사진이라도 모두 WebP 로 다시 저장하고, 파일 이름 확장자도 `.webp` 로 바뀝니다. WebP 로 저장하지 못하는 브라우저이거나 결과가 더 크면 원본을 올립니다.

## 아이폰 HEIC 사진

아이폰 기본 형식인 HEIC/HEIF 는 브라우저 대부분이 화면에 보여 주지 못합니다. 사진을 읽을 수 있는 브라우저(Safari)에서는 품질 0.9 의 JPEG 로 바꿔서 올립니다. 읽지 못하는 브라우저에서는 그 사진을 넣지 않고 "JPG로 저장해서 올려 주세요" 안내를 띄웁니다. 형식 정보 없이 오는 HEIC 파일도 확장자(`.heic`, `.heif`)로 알아봅니다.

## 크기와 형식 제한

- `imageMaxSize`: 줄이기가 끝난 뒤, 실제로 올라가는 파일 크기로 검사합니다. 10MB 원본도 줄여서 기준 아래면 올라갑니다. 넘으면 "파일이 너무 커요 (최대 …)" 안내가 뜹니다.
- `imageAccept`: 파일 고르기 창의 형식 목록이면서, 넣을 때 검사하는 목록입니다. `image/png` 같은 형식, `image/*`, `.webp` 같은 확장자를 쉼표로 적습니다. 맞지 않으면 "이미지 파일만 넣을 수 있어요" 안내가 뜹니다.

## 붙여넣은 base64 사진

다른 곳에서 복사해 온 내용에 `data:` 사진이 들어 있으면, 업로드 설정이 있을 때는 서버로 올려 주소로 바꿉니다. 업로드 설정이 없으면 적어도 위 규칙대로 줄여서 글 크기를 줄입니다.

> 브라우저에서 줄여도 서버 검사는 따로 하세요. 에디터를 거치지 않고 올리는 요청도 있을 수 있습니다. [이미지 업로드](https://82editor.com/docs/image-upload/)의 서버 예제를 참고하세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `imageResize` | false \| object | 켜짐 | `false` 면 원본 그대로 올립니다. |
| `imageResize.maxWidth` | number | 1600 | 이보다 넓은 사진을 줄입니다 (px). |
| `imageResize.quality` | number | 0.85 | 다시 저장할 때 품질 (0–1). |
| `imageResize.format` | 'webp' |  | JPEG·PNG·WebP 를 모두 WebP 로 저장합니다. |
| `imageMaxSize` | number (byte) | 없음 | 줄인 뒤의 최대 크기. |
| `imageAccept` | string | 'image/*,.heic,.heif' | 고르기 창 형식이자 넣을 때 검사 목록. |

---

# 사진 묶음

> 여러 장을 2열·3열 격자나 넘겨 보는 슬라이드로 묶기.

Source: https://82editor.com/docs/gallery/

사진 여러 장을 나란히 놓거나 옆으로 넘겨 보게 묶습니다. 후기, 상품 사진, 여행 글처럼 사진이 많은 글에서 씁니다.

```js
createEditor('#editor', {
  toolbar: 'image gallery | undo redo',
  height: 420,
  uploadImage: async (file) => URL.createObjectURL(file),
});
```

## 만드는 방법

툴바의 **사진 묶음**(`gallery`)에서 모양을 고릅니다.

- 커서가 있는 문단에 사진이 두 장 이상 있으면 그 사진들을 한 묶음으로 만듭니다. 링크가 걸린 사진은 사진만 들어갑니다.
- 그렇지 않으면 파일 고르기 창이 열리고, 고른 사진들이 새 묶음으로 들어갑니다. 빈 문단이면 그 자리를, 아니면 그 문단 다음에 놓입니다.

| 모양 | 값 | 보이는 모습 |
| --- | --- | --- |
| 2열 | `'2'` | 두 칸 격자, 사진은 4:3 으로 잘라 채움 |
| 3열 | `'3'` | 세 칸 격자, 사진은 1:1 로 잘라 채움 |
| 슬라이드 | `'slide'` | 한 장씩 옆으로 넘겨 보기 (scroll-snap), 사진은 4:3 안에 전체가 보이게 |

## 묶음 막대

묶음 안의 사진을 누르면 묶음 위에 막대가 뜹니다: **2열 / 3열 / 슬라이드** 바꾸기, **대체 텍스트**, **사진 더하기**(묶음 끝에 붙음), **이미지 삭제**, **묶음 풀기**(사진들을 한 문단으로 되돌림). 마지막 사진을 지우면 묶음도 없어집니다.

## 툴바에서의 위치

`gallery` 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다. 필요하면 `toolbar` 에 직접 적으세요.

## 저장되는 HTML

```html
<div data-gallery="2" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0.8em 0">
  <img src="/files/a.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
  <img src="/files/b.jpg" alt="" style="width: 100%; aspect-ratio: 4 / 3; object-fit: cover">
</div>
<div data-gallery="slide" style="display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.8em 0">…</div>
```

격자와 슬라이드 모두 인라인 CSS 라서, 보기 화면에 스크립트나 에디터 CSS 가 없어도 같은 모양이고 휴대폰에서는 손가락으로 넘겨 볼 수 있습니다.

코드에서는 `editor.exec('gallery', '3')` 처럼 부릅니다. 묶음 안에서 `'add'` 는 사진 더하기, `''` 는 묶음 풀기입니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `gallery` | toolbar item |  | 2열 / 3열 / 슬라이드 메뉴. 묶음 안에서는 사진 더하기와 묶음 풀기가 더해집니다. |
| `uploadImage` / `uploadUrl` |  |  | 묶음에 넣는 사진도 이 길로 올라갑니다. |
| `imageAccept` | string | 'image/*,.heic,.heif' | 고를 수 있는 사진 형식. |

---

# 동영상 넣기

> YouTube·Vimeo·네이버TV·카카오TV 주소로 동영상 넣기, 휴대폰에 맞는 16:9.

Source: https://82editor.com/docs/video/

동영상 사이트의 주소만 붙여 넣으면 플레이어가 들어갑니다. 파일을 올리는 것이 아니라 그 사이트의 플레이어를 끼워 넣습니다.

```js
createEditor('#editor', {
  toolbar: 'video embed | undo redo',
  height: 380,
});
```

## 넣는 방법

- 툴바의 **동영상**(`video`) 단추를 누르고 주소를 붙여 넣습니다. 알아볼 수 없는 주소면 "지원하지 않는 동영상 주소예요"가 뜹니다.
- 본문에 동영상 주소만 붙여 넣으면 먼저 링크로 들어가고 "동영상으로 넣기" 안내가 뜹니다. 누르면 링크가 플레이어로 바뀝니다.
- 빈 줄에서 `/` 를 치고 "동영상"이나 "유튜브"를 찾기.
- **지도·퍼가기 코드**(`embed`) 창에 동영상 주소나 iframe 코드를 넣어도 동영상으로 들어갑니다.

## 알아보는 주소

| 사이트 | 주소 예 |
| --- | --- |
| YouTube | `youtube.com/watch?v=…`, `youtu.be/…`, `/shorts/…`, `/live/…`, `/embed/…`, `music.youtube.com`. `t=90`, `t=1m30s` 는 시작 시간이 됩니다. |
| Vimeo | `vimeo.com/123456789`, `player.vimeo.com/video/…` |
| 네이버TV | `tv.naver.com/v/…`, `/embed/…` |
| 카카오TV | `tv.kakao.com/v/…`, `…/cliplink/…` |
| Dailymotion | `dailymotion.com/video/…`, `dai.ly/…` |

## 저장되는 HTML

```html
<div data-video="youtube" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="youtube video"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0"
    allowfullscreen allow="…" loading="lazy"></iframe>
</div>
```

16:9 상자가 인라인 스타일이라 보기 화면에서도 휴대폰 너비에 맞게 줄어듭니다. 에디터 안에서 동영상은 한 덩어리로 다뤄져 안을 고칠 수 없고, 지우거나 옮길 수만 있습니다.

## 허용되는 iframe

에디터는 허용된 사이트의 iframe 만 남깁니다. 기본은 위 동영상 사이트(`www.youtube.com`, `www.youtube-nocookie.com`, `player.vimeo.com`, `tv.naver.com`, `play-tv.kakao.com`, `www.dailymotion.com`)와 구글 지도입니다. 다른 사이트의 iframe 이 `setHTML` 이나 붙여넣기로 들어오면 빠지고 "허용되지 않은 사이트의 iframe {n}개를 뺐어요" 안내가 뜹니다. 더 허용하려면 `allowedIframeHosts` 를 쓰세요 ([지도·퍼가기 코드](https://82editor.com/docs/embed/)). 서버의 허용 목록도 맞춰야 합니다 ([보안](https://82editor.com/docs/security/)).

## 툴바에서의 위치

`video` 는 board 와 full 프리셋의 첫 줄에 있습니다.

코드에서 바로 넣으려면 `editor.exec('insertVideo', 'https://youtu.be/…')`. 알아볼 수 없는 주소면 아무 일도 하지 않습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `video` | toolbar item |  | 동영상 주소 넣기 창을 엽니다. |
| `insertVideo` | command |  | 주소를 받아 커서 자리에 동영상을 넣습니다. |
| `allowedIframeHosts` | string[] | [] | 기본 동영상 사이트·구글 지도 말고 더 허용할 iframe 주소. |

---

# 지도·퍼가기 코드

> 구글 지도, 허용한 사이트의 iframe 코드 넣기. 카카오맵·네이버 지도는 링크 카드로.

Source: https://82editor.com/docs/embed/

찾아오는 길 지도, 설문, 예약 위젯처럼 다른 사이트가 주는 퍼가기(iframe) 코드를 글에 넣습니다. 허용한 사이트의 코드만 들어갑니다.

```js
createEditor('#editor', {
  toolbar: 'embed video | undo redo',
  height: 400,
  allowedIframeHosts: ['www.openstreetmap.org'],
});
```

## 넣는 방법

툴바의 **지도·퍼가기 코드**(`embed`) 단추를 누르고, 주소나 `<iframe …>` 코드를 붙여 넣습니다. 들어간 내용에 따라 이렇게 처리합니다.

| 넣은 것 | 결과 |
| --- | --- |
| 동영상 주소나 동영상 iframe 코드 | [동영상](https://82editor.com/docs/video/)으로 넣습니다. |
| 구글 지도 [공유 → 지도 퍼가기] 코드 | 지도를 넣습니다. 기본으로 허용됩니다. |
| 카카오맵·네이버 지도 주소 (`map.kakao.com`, `kko.to`, `map.naver.com`, `naver.me`) | 이 사이트들은 다른 사이트에 끼워 넣을 수 없어서 [링크 카드](https://82editor.com/docs/link-cards/)로 넣고 안내를 띄웁니다. |
| `allowedIframeHosts` 에 있는 사이트의 코드나 https 주소 | 그 iframe 을 넣습니다. |
| 그 밖의 사이트 | "이 사이트는 넣을 수 없어요" 안내를 띄우고 넣지 않습니다. |

iframe 코드에 `height` 가 있으면 그 높이를(150–1200px 사이로), 없으면 450px 을 씁니다. 너비는 항상 본문 너비에 맞춥니다.

## 사이트 허용하기

```js
createEditor('#editor', {
  allowedIframeHosts: [
    'www.openstreetmap.org',
    'docs.google.com/forms',   // 주소 앞부분까지 적으면 그 경로만 허용
  ],
});
```

항목은 호스트 이름이고, `/` 뒤에 경로를 붙이면 그 경로로 시작하는 주소만 허용합니다. https 주소만 됩니다. 이 목록은 퍼가기 창뿐 아니라 `setHTML`, 붙여넣기, HTML 소스 보기에도 똑같이 적용됩니다.

> 서버에서 HTML 을 다시 거를 때도 같은 iframe 주소를 허용해야 저장 후에도 남습니다. [보안](https://82editor.com/docs/security/)을 참고하세요.

## 저장되는 HTML

```html
<div data-embed="" style="margin: 0.8em 0">
  <iframe src="https://www.google.com/maps/embed?pb=…" style="width: 100%; height: 450px; border: 0"
    loading="lazy" allowfullscreen="" title="embed"></iframe>
</div>
```

에디터 안에서는 한 덩어리로 다뤄집니다. 누르면 고를 수 있고 지우거나 `Alt`+`Shift`+`↑`/`↓` 로 옮길 수 있습니다.

## 툴바에서의 위치

`embed` 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `embed` | toolbar item |  | 주소 또는 퍼가기 코드를 넣는 창을 엽니다. |
| `allowedIframeHosts` | string[] | [] | 더 허용할 iframe 호스트. `호스트/경로` 로 경로까지 제한할 수 있습니다. |
| `fetchLinkMeta` | (url) => Promise<LinkMeta \| null> |  | 카카오맵·네이버 지도를 카드로 넣을 때 제목과 사진을 가져옵니다. |

---

# 링크 카드

> 주소를 제목·설명·사진이 있는 카드로 보여 주기 (fetchLinkMeta).

Source: https://82editor.com/docs/link-cards/

주소 하나를 제목, 설명, 대표 사진이 있는 상자로 보여 줍니다. 참고한 글, 상품 페이지, 지도처럼 눌러 볼 곳을 눈에 띄게 할 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'linkCard link | undo redo',
  // 실제로는 서버에 물어봅니다 (아래 설명 참고)
  fetchLinkMeta: async (url) => ({
    title: new URL(url).hostname + ' 첫 화면',
    description: '서버가 페이지의 og:title, og:description, og:image 를 읽어 돌려준 값입니다.',
    image: 'https://picsum.photos/seed/82/400/240',
  }),
});
```

## 넣는 방법

- 툴바의 **링크 카드**(`linkCard`) 단추를 누르고 주소를 넣습니다. `https://` 를 빼먹으면 붙여 줍니다.
- 본문에 주소만 붙여 넣으면 링크로 들어가고, `fetchLinkMeta` 가 있으면 "카드로 보기" 안내가 뜹니다. 누르면 그 링크가 카드로 바뀝니다. 카카오맵·네이버 지도 주소는 `fetchLinkMeta` 가 없어도 안내가 뜹니다.
- [지도·퍼가기 코드](https://82editor.com/docs/embed/) 창에 카카오맵·네이버 지도 주소를 넣으면 카드로 들어갑니다.

## fetchLinkMeta: 서버에서 정보 가져오기

브라우저는 보안 규칙 때문에 다른 사이트의 페이지를 읽을 수 없습니다. 그래서 제목과 사진은 내 서버가 대신 읽어 와야 합니다. `fetchLinkMeta` 가 없거나 `null` 을 돌려주면 도메인 이름만 있는 카드가 됩니다.

```js
createEditor('#editor', {
  toolbar: 'board | linkCard',
  fetchLinkMeta: async (url) => {
    const res = await fetch('/api/link-meta?url=' + encodeURIComponent(url));
    return res.ok ? res.json() : null; // { title, description?, image?, siteName? }
  },
});
```

```js
// Node 예: 페이지의 og: 태그 읽기
app.get('/api/link-meta', async (req, res) => {
  const url = new URL(req.query.url);
  if (!/^https?:$/.test(url.protocol)) return res.status(400).end();
  const html = await (await fetch(url, { redirect: 'follow' })).text();
  const og = (p) => html.match(new RegExp('<meta[^>]+property=["\']og:' + p + '["\'][^>]+content=["\']([^"\']*)', 'i'))?.[1];
  res.json({
    title: og('title') ?? html.match(/<title>([^<]*)/i)?.[1] ?? url.hostname,
    description: og('description'),
    image: og('image'),
    siteName: og('site_name'),
  });
});
```

> 서버가 사용자가 준 주소로 요청을 보내므로, `localhost`·`10.x`·`192.168.x` 같은 내부망 주소는 막으세요. 응답 크기와 시간도 제한하는 편이 안전합니다.

## 저장되는 HTML

```html
<div data-link-card="" style="margin: 0.8em 0">
  <a href="https://…" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 14px; …">
    <img src="https://…/og.jpg" alt="" style="width: 120px; height: 90px; object-fit: cover; …">
    <span style="display: block; min-width: 0">
      <strong style="display: block">제목</strong>
      <span style="…">설명</span>
      <span style="…">사이트 이름</span>
    </span>
  </a>
</div>
```

제목은 120자, 설명은 160자까지 씁니다. 사진은 `http(s)` 주소일 때만 들어가고, 사이트 이름이 없으면 도메인을 씁니다. 카드는 새 창으로 열립니다. 에디터 안에서는 한 덩어리로 다뤄집니다.

## 툴바에서의 위치

`linkCard` 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `linkCard` | toolbar item |  | 주소를 넣어 카드를 만드는 창을 엽니다. |
| `fetchLinkMeta` | (url) => Promise<LinkMeta \| null> |  | 주소의 제목·설명·사진을 서버에서 가져옵니다. 있으면 주소를 붙여 넣을 때 카드를 권합니다. |
| `LinkMeta.title` | string |  | 카드 제목. 비면 도메인. |
| `LinkMeta.description` | string |  | 설명 (160자까지). |
| `LinkMeta.image` | string |  | 대표 사진 주소 (http/https). |
| `LinkMeta.siteName` | string |  | 아래 작은 글씨. 비면 도메인. |

---

# 파일 첨부

> PDF·한글·엑셀 파일을 올리고 본문에 내려받기 단추로 넣기.

Source: https://82editor.com/docs/attachments/

공지 첨부 문서, 신청서 양식처럼 내려받을 파일을 글 안에 넣습니다. 파일은 내 서버에 올리고, 본문에는 파일 이름과 크기가 적힌 내려받기 단추가 들어갑니다.

```js
createEditor('#editor', {
  toolbar: 'file | undo redo',
  fileMaxSize: 10 * 1024 * 1024,
  fileAccept: '.pdf,.hwp,.hwpx,.docx,.xlsx,.zip',
  // 데모라서 올리지 않고 가짜 주소를 돌려줍니다
  uploadFile: async (file) => 'https://example.com/files/' + encodeURIComponent(file.name),
});
```

## 넣는 방법

툴바의 **파일 첨부**(`file`) 단추를 누르고 파일을 고릅니다. 여러 개를 한 번에 고를 수 있고, 파일마다 "올리는 중…" 자리가 먼저 생겼다가 올리기가 끝나면 내려받기 단추로 바뀝니다. 올리지 못하면 그 자리는 지워지고 안내가 뜹니다.

## 올리는 길

- `uploadFile` 함수가 있으면 그것을 씁니다. 파일을 받아 내려받을 주소를 돌려주면 됩니다. 진행률은 두 번째 인자의 `onProgress` 로 알릴 수 있습니다.
- 없으면 `uploadUrl` 로 POST 합니다. 이미지와 같은 `uploadField`(기본 `file`), `uploadHeaders` 를 쓰고, 서버는 `{ "url": "…" }` 를 돌려주면 됩니다.
- 둘 다 없으면 "파일을 올리려면 uploadFile 또는 uploadUrl 설정이 필요해요" 안내가 뜹니다. 첨부는 사진과 달리 base64 로 글에 넣지 않습니다.

```js
createEditor('#editor', {
  toolbar: 'board | file',
  fileMaxSize: 20 * 1024 * 1024,
  fileAccept: '.pdf,.hwp,.hwpx,.docx,.xlsx,.zip',
  uploadFile: async (file, { onProgress }) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/upload/attachment', { method: 'POST', body: form });
    if (!res.ok) throw new Error('업로드 실패');
    return (await res.json()).url;
  },
});
```

`fileMaxSize` 를 넘는 파일은 올리지 않고 "파일이 너무 커요 (최대 …)" 안내를 띄웁니다. `fileAccept` 는 파일 고르기 창의 형식 목록입니다. 받는 형식은 서버에서도 꼭 다시 확인하세요.

첨부를 올릴 때도 `upload:start`, `upload:progress`, `upload:success`, `upload:error` 이벤트가 납니다 ([이벤트](https://82editor.com/docs/events/)). 첨부 주소는 `getUnusedUploads()` 목록에 들어가지 않습니다.

## 저장되는 HTML

```html
<div data-file="" style="margin: 0.6em 0">
  <a href="https://…/files/2026-신청서.hwp" download="2026-신청서.hwp" style="display: inline-flex; …">
    📎 <strong>2026-신청서.hwp</strong> <span style="color: #8c959f; font-size: 0.85em">48KB</span>
  </a>
</div>
```

에디터 안에서 첨부는 한 덩어리로 다뤄집니다. 지우거나 `Alt`+`Shift`+`↑`/`↓` 로 옮길 수 있습니다.

## 툴바에서의 위치

`file` 은 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `file` | toolbar item |  | 파일 고르기 창을 열고 올린 뒤 내려받기 단추를 넣습니다. |
| `uploadFile` | (file, { onProgress }) => Promise<string> |  | 첨부를 올리고 내려받을 주소를 돌려줍니다. |
| `uploadUrl` | string |  | `uploadFile` 이 없을 때 POST 할 주소 (이미지와 같이 씀). |
| `uploadField` | string | 'file' | POST 할 때 파일 필드 이름. |
| `uploadHeaders` | Record<string, string> |  | POST 에 붙일 헤더 (CSRF 토큰 등). |
| `fileMaxSize` | number (byte) | 없음 | 첨부 한 개의 최대 크기. |
| `fileAccept` | string | 모든 파일 | 고르기 창 형식, 예: `'.pdf,.hwp,.zip'`. |

---

# 사진 목록과 정리

> 에디터 아래 사진 목록, 순서 바꾸기, 지운 업로드 되살리기와 서버 정리.

Source: https://82editor.com/docs/image-tray/

사진이 많은 글에서 에디터 아래에 사진 목록을 띄웁니다. 긴 글에서 사진을 찾아가거나 순서를 바꾸고, 지웠던 사진을 되살릴 때 씁니다. 같은 정보로 서버에 남은 쓸모없는 업로드도 정리할 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageTray: true,
  height: 300,
  // 데모: 고른 사진 대신 예시 사진 주소를 돌려줍니다
  uploadImage: async (file) => 'https://picsum.photos/seed/' + Date.now() + '/640/420',
});
```

## 사진 목록 (imageTray)

`imageTray: true` 를 주면 에디터 아래, 상태 표시줄 위에 글 안 사진의 작은 그림이 순서대로 놓입니다. 사진이 없으면 숨습니다.

- 작은 그림을 누르면 본문의 그 사진으로 스크롤하고 사진을 선택합니다.
- 작은 그림을 끌어 다른 자리에 놓으면 본문 안 사진 순서가 바뀝니다. 캡션이 있는 사진이나 링크가 걸린 사진은 그 상자째 움직입니다.
- **✕** 를 누르면 본문에서 그 사진을 지웁니다.
- 이 편집 중에 올렸다가 본문에서 빠진 사진은 흐리게 **+** 로 남습니다. 누르면 커서 자리에 다시 들어갑니다.

## 서버에 남은 업로드 정리

사진을 올린 뒤 지우거나 바꾸면 서버에는 파일이 남습니다. 저장할 때 아래 두 메서드로 정리하세요.

- `editor.getImages()`: 지금 본문에 있는 사진 주소 목록 (중복 없음). 올리는 중인 사진과 `blob:`·`data:` 주소는 빠집니다.
- `editor.getUnusedUploads()`: 이 에디터가 열려 있는 동안 `uploadImage`·`uploadUrl` 로 올린 주소 가운데 지금 본문에 없는 것.

```js
form.addEventListener('submit', async () => {
  const unused = editor.getUnusedUploads();
  if (unused.length) {
    await fetch('/upload/cleanup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ urls: unused }),
    });
  }
});
```

`image:remove` 이벤트는 본문에서 사진이 빠질 때마다(지우기, 잘라내기, 바꾸기) `{ src }` 로 알려 줍니다. 다만 되돌리기로 다시 돌아올 수 있으니, 서버 파일은 이 이벤트가 아니라 저장할 때 `getUnusedUploads()` 로 지우세요.

```js
editor.on('image:remove', ({ src }) => console.log('빠진 사진', src));
```

> 서버에서는 지우라는 주소가 정말 이 사용자가 올린 파일인지 확인하세요. 다른 글이 같은 사진을 쓰고 있을 수도 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `imageTray` | boolean | false | 에디터 아래 사진 목록을 보여 줍니다. |
| `getImages()` | method |  | 본문에 있는 사진 주소 배열. |
| `getUnusedUploads()` | method |  | 이번에 올렸지만 본문에 없는 사진 주소 배열. |
| `image:remove` | event |  | 사진이 본문에서 빠졌을 때 `{ src }`. |

---

# 붙여넣기 정리

> 워드·엑셀·한글·구글 문서에서 붙여 넣을 때 무엇을 남기고 무엇을 지우는지.

Source: https://82editor.com/docs/paste/

82editor는 클립보드 HTML을 보고 출처를 알아낸 뒤 출처마다 다르게 정리합니다. 결과는 `paste` 이벤트로 받아 더 손볼 수 있습니다.

| 출처 | 남기는 것 | 지우는 것 |
| --- | --- | --- |
| MS 워드 | 굵게·기울임·밑줄·색·글자 크기·정렬·표·셀 병합, 번호 문단은 진짜 목록으로 | `mso-*` 스타일, `Mso*` 클래스, `<o:p>`, 조건부 주석 |
| 엑셀 | 표, 셀 병합, 셀 배경, 숫자 정렬 | 열 너비 외 서식 찌꺼기 |
| 한글(HWP) | pt 글자 크기, 줄간격, 문단 여백, 표 테두리와 셀 너비 | 글꼴 선언 반복, 빈 span. `file:///` 이미지는 빼고 "따로 올려 주세요" 안내 |
| 구글 문서 | 굵게·기울임(스타일로 온 것을 태그로), 목록, 링크 | `docs-internal-guid` 껍데기 |
| 웹 페이지 | 문단·제목·목록·링크·이미지·표 | class, id, 스크립트, 허용 목록 밖 태그 |

## 모드

- `pasteMode: 'clean'` (기본) 위 규칙대로 정리
- `pasteMode: 'plain'` 항상 글자만
- `pasteMode: 'keep'` 거르기만 하고 서식은 최대한 유지
- `Ctrl`+`Shift`+`V` 는 모드와 상관없이 글자만 붙여넣기

URL 하나만 붙여 넣으면 링크가 되고, YouTube·Vimeo·네이버TV·카카오TV 주소는 동영상으로 넣을지 묻습니다.

> [데모](https://82editor.com/demo/)에서 워드나 한글 문서를 직접 붙여 넣고 결과 HTML을 확인해 보세요.

---

# 단축키

> 키보드 단축키와 마크다운 입력 규칙.

Source: https://82editor.com/docs/shortcuts/

맥에서는 `Ctrl` 대신 `⌘` 입니다. 에디터 안에서 `Ctrl`+`/` 를 누르면 이 목록이 열립니다.

| 키 | 동작 |
| --- | --- |
| `Ctrl`+`B` / `I` / `U` | 굵게 / 기울임 / 밑줄 |
| `Ctrl`+`Shift`+`X` | 취소선 |
| `Ctrl`+`K` | 링크 |
| `Ctrl`+`Z` / `Ctrl`+`Y` | 실행 취소 / 다시 실행 |
| `Ctrl`+`Alt`+`1`~`4` | 제목 1~4 |
| `Ctrl`+`Alt`+`0` | 본문 |
| `Ctrl`+`Shift`+`7` / `8` | 번호 목록 / 글머리 목록 |
| `Ctrl`+`F` / `Ctrl`+`H` | 찾기 / 바꾸기 |
| `Ctrl`+`Shift`+`V` | 서식 없이 붙여넣기 |
| `Tab` / `Shift`+`Tab` | 목록 들여쓰기·내어쓰기, 표에서 칸 이동 |
| `Ctrl`+`Shift`+`9` | 체크리스트 |
| `Ctrl`+`\` | 서식 지우기 |
| `Ctrl`+`Shift`+`U` | HTML 소스 보기 |
| `Ctrl`+`Shift`+`F` | 전체화면 |

## 마크다운 입력

| 입력 | 결과 |
| --- | --- |
| `# ` ~ `#### ` | 제목 1~4 |
| `- ` 또는 `* ` | 글머리 목록 |
| `1. ` | 번호 목록 |
| `[ ] ` | 체크리스트 |
| `> ` | 인용 |
| ````` | 코드 블록 |
| `---` | 가로선 |
| `**글**` · `*글*` · ``글`` · `~~글~~` | 굵게 · 기울임 · 코드 · 취소선 |

> 한글을 조합하는 중에는 마크다운 규칙이 실행되지 않습니다. 조합이 끝난 다음 입력부터 적용됩니다.

---

# 마크다운

> 마크다운으로 바로 쓰기, 마크다운 붙여넣기, 마크다운으로 꺼내고 넣기.

Source: https://82editor.com/docs/markdown/

마크다운에 익숙한 사람은 `# `, `- `, `**굵게**` 처럼 치면 바로 서식이 됩니다. 마크다운 글을 붙여넣거나, 본문을 마크다운으로 꺼내고 넣을 수도 있습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic strike code | bulletList orderedList checklist | blockquote codeBlock | markdown',
  height: 320,
});
```

## 치면서 바뀌는 규칙

문단 맨 앞에서 아래 글자 다음에 스페이스를 치면 블록이 바뀝니다. 코드 블록과 가로선은 그 줄에서 `Enter` 를 칠 때 바뀝니다.

| 입력 | 결과 |
| --- | --- |
| `# ` ~ `#### ` | 제목 1~4 |
| `- ` `* ` `+ ` | 글머리 목록 |
| `1. ` 또는 `1) ` | 번호 목록 |
| `[] ` `[ ] ` / `[x] ` | 체크리스트 (x 는 체크된 채로) |
| `> ` | 인용 |
| ````` + `Enter`, ````js` + `Enter` | 코드 블록 (언어 지정 가능) |
| `---` `***` `___` + `Enter` | 가로선 |

글자 안에서는 닫는 기호를 치는 순간 바뀝니다.

| 입력 | 결과 |
| --- | --- |
| `**글**` 또는 `__글__` | 굵게 (`<strong>`) |
| `*글*` 또는 `_글_` | 기울임 (`<em>`) |
| `~~글~~` | 취소선 (`<s>`) |
| ``글`` | 인라인 코드 (`<code>`) |

> 코드 블록과 인라인 코드 안에서는 규칙이 실행되지 않습니다. 한글을 조합하는 동안에도 실행되지 않고, 조합이 끝난 뒤 치는 스페이스나 기호에서 실행됩니다. 자세한 내용은 [한글 입력](https://82editor.com/docs/korean-input/)을 보세요.

## 마크다운 붙여넣기

메모장, VS Code, 채팅 앱에서 복사한 글처럼 서식 없는 글이 마크다운처럼 보이면 서식으로 바꿔 붙입니다. 제목, 코드 펜스, 표, 목록 두 줄 이상, 링크, 굵게 같은 표시를 보고 판단합니다. 붙인 뒤에는 "마크다운을 서식으로 바꿔 붙였어요" 알림이 뜨고, 그 안의 **글자 그대로** 단추를 누르면 바꾸기 전 글자 그대로 다시 붙습니다.

- 코드 블록 안, `Ctrl`+`Shift`+`V`, `pasteMode: 'plain'` 일 때는 바꾸지 않습니다.
- 웹 페이지나 워드처럼 HTML 이 함께 오는 붙여넣기는 [붙여넣기 정리](https://82editor.com/docs/paste/)를 따릅니다.
- `paste` 이벤트의 `source` 가 `'markdown'` 으로 옵니다.

## 마크다운 창 (markdown 툴바 항목)

`markdown` 단추는 본문을 마크다운으로 보여 주는 창을 엽니다. 복사 단추로 그대로 가져가거나, 고친 뒤 적용하면 본문이 그 내용으로 바뀝니다(실행 취소 가능). `board` 와 `full` 프리셋에서는 ⋯ 더 보기 메뉴 안에 있습니다.

## 코드로 꺼내고 넣기

```js
// 본문을 마크다운으로
const md = editor.getMarkdown();

// 마크다운으로 본문 바꾸기 (실행 취소 가능)
editor.setMarkdown('# 공지\n\n**내일** 점검이 있습니다.');

// 에디터 없이 변환만
import { markdownToHtml, htmlToMarkdown } from '@82editor/core';
const html = markdownToHtml('- 하나\n- 둘');
const back = htmlToMarkdown(html);
```

제목, 목록(중첩과 체크 포함), 인용, 코드 펜스, 표, 가로선, 굵게·기울임·취소선·코드·링크·이미지를 다룹니다. 마크다운으로 쓸 수 없는 것(글자색, 강조 박스, 접은 글, 동영상, 사진 묶음, 첨부 파일, 칸 합친 표 등)은 마크다운 안에 HTML 로 남고, `markdownToHtml` 이 다시 읽습니다. 줄바꿈 하나는 `<br>` 이 됩니다.

> `htmlToMarkdown` 은 브라우저의 `document` 를 씁니다. 서버(Node)에서 쓰려면 DOM 이 있는 환경이 필요합니다. `markdownToHtml` 결과도 에디터에 넣을 때 다시 정리(sanitize)됩니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `markdownShortcuts` | boolean | `true` | 치면서 바뀌는 마크다운 규칙. `false` 면 블록·글자 규칙 모두 끕니다. |
| `markdownPaste` | boolean | `true` | 마크다운처럼 보이는 서식 없는 글을 서식으로 바꿔 붙입니다. |
| `markdown` | toolbar item | — | 마크다운 보기·고치기 창 |
| `getMarkdown()` | method | — | 본문을 마크다운 문자열로 |
| `setMarkdown(md)` | method | — | 마크다운으로 본문 바꾸기 |

---

# / 명령 메뉴

> 빈 줄에서 / 를 치면 제목, 표, 사진 같은 블록을 골라 넣는 메뉴.

Source: https://82editor.com/docs/slash-menu/

빈 줄에서 `/` 를 치면 넣을 수 있는 블록 목록이 뜹니다. 툴바까지 마우스를 옮기지 않고 키보드로 바로 넣을 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList',
  templates: [
    {
      title: '회의록',
      description: '날짜, 참석자, 안건',
      html: '<h2>회의록</h2><p>날짜: </p><p>참석자: </p><ul><li>안건</li></ul>',
    },
  ],
});
```

## 쓰는 법

- 문단에 `/` 하나만 있을 때 메뉴가 열립니다. 글 중간의 `/` 는 그냥 글자입니다.
- 이어서 치는 글자로 목록을 거릅니다. 한글 이름, 영어 이름, 초성(`ㅍ` → 표), 비슷한 말(`/유튜브` → 동영상, `/접기` → 접은글)로 찾습니다.
- `↑` `↓` 로 고르고 `Enter` 또는 `Tab` 으로 넣습니다. `Esc` 는 닫기입니다.
- 고르면 친 `/글자` 는 지워지고 그 자리에 블록이 들어갑니다.
- `/` 뒤에 스물네 글자가 넘거나 `/` 를 지우면 메뉴가 닫힙니다.

## 메뉴에 있는 것

본문, 제목 1~4, 글머리 기호, 번호 매기기, 체크리스트, 인용, 강조 박스, 접은글, 코드 블록, 표(3×3), 이미지, 동영상, 구분선, 쪽 나누기, 이모지, 특수문자, 목차, 날짜·시간. `templates` 옵션을 주면 템플릿이 목록 끝에 붙습니다(템플릿 설명도 검색됩니다).

툴바에 없는 항목도 메뉴에는 나옵니다. 툴바를 짧게 두고 나머지는 / 메뉴로 넣게 하는 구성도 됩니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `slashMenu` | boolean | `true` | `false` 면 / 를 쳐도 메뉴가 뜨지 않습니다. |
| `templates` | { title, html, description? }[] | — | 메뉴 끝에 붙는 템플릿. 고르면 `html` 을 넣습니다. |

---

# 선택 툴바

> 글자를 고르면 바로 위에 뜨는 작은 서식 툴바.

Source: https://82editor.com/docs/bubble-toolbar/

마우스로 글자를 고르면 그 위에 굵게, 글자색, 링크 같은 자주 쓰는 단추가 뜹니다. 툴바를 숨긴 깔끔한 화면에서도 서식을 넣을 수 있습니다.

```js
createEditor('#editor', {
  toolbar: false,
  bubbleToolbar: true,
});
```

## 들어 있는 단추

굵게, 기울임, 밑줄, 취소선, 인라인 코드 | 글자색, 배경색, 링크, 서식 지우기. 지금 고른 글자에 걸린 서식은 눌린 모양으로 보입니다. 단축키(`Ctrl`+`B`, `Ctrl`+`K` 등)는 그대로 씁니다.

## 뜨지 않는 경우

- 휴대폰, 태블릿처럼 터치 화면 — 브라우저의 선택 메뉴와 겹치지 않게 띄우지 않습니다.
- 코드 블록 안, 사진을 고른 상태, 표에서 칸을 여러 개 고른 상태
- 읽기 전용, HTML 소스 보기 중
- 공백만 고른 경우

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `bubbleToolbar` | boolean | `true` | `false` 면 선택 툴바를 띄우지 않습니다. |
| `colors` | string[] | 기본 팔레트 | 글자색 단추의 색 목록. 주면 선택 툴바의 배경색 단추도 이 목록을 씁니다. |

---

# 자동 바꾸기·자동 링크

> (c) → ©, -> → → 같은 자동 바꾸기와 주소를 치면 링크가 되는 기능.

Source: https://82editor.com/docs/auto-replace/

치는 동안 `(c)` 는 ©, `->` 는 → 로 바뀌고, 웹 주소나 이메일 주소는 스페이스나 `Enter` 를 치면 링크가 됩니다. 바뀐 직후 `Ctrl`+`Z` 를 누르면 친 그대로 돌아옵니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link unlink',
  autoReplace: {
    '1/2': '½',
    '(사)': '㈳',
    '<-': '',
  },
});
```

## 기본 바꾸기 규칙

| 입력 | 결과 |
| --- | --- |
| `(c)` `(C)` | © |
| `(r)` `(R)` | ® |
| `(tm)` `(TM)` | ™ |
| `(주)` | ㈜ |
| `->` / `<-` | → / ← |
| `=>` | ⇒ |
| `<=` / `>=` / `!=` | ≤ / ≥ / ≠ |
| ` -- ` (앞뒤 공백) |  —  |

- 코드 블록과 인라인 코드 안에서는 바꾸지 않습니다.
- 주소나 이메일을 치는 중에는 바꾸지 않습니다(`https://a.com/(c)`, `a->b@x.com`).
- 바꾸기마다 실행 취소 한 단계라서 `Ctrl`+`Z` 로 친 글자를 되돌립니다.

## 규칙 더하기와 끄기

`autoReplace` 에 객체를 주면 기본 규칙에 더해집니다. 값을 빈 문자열로 주면 그 기본 규칙만 꺼집니다. 전부 끄려면 `false` 입니다.

```js
createEditor('#editor', {
  autoReplace: {
    '(사)': '㈳',   // 새 규칙
    '<-': '',        // 기본 규칙 하나 끄기
  },
});

createEditor('#editor', { autoReplace: false }); // 모두 끄기
```

## 자동 링크

`https://`, `http://`, `www.` 로 시작하는 주소와 이메일 주소 뒤에서 스페이스나 `Enter` 를 치면 링크가 됩니다. `www.` 주소는 `https://` 를 붙이고, 이메일은 `mailto:` 링크가 됩니다.

- 주소 바로 뒤에 붙은 한글 조사는 링크에서 빠집니다. `naver.com에서` 는 `naver.com` 까지만 링크입니다.
- 문장 끝 마침표, 쉼표, 닫는 괄호는 빠집니다. 주소 안에 여는 괄호가 있으면 닫는 괄호는 남깁니다(위키 주소).
- 이미 링크 안이거나 코드 안이면 바꾸지 않습니다. 실행 취소 한 번이면 링크가 풀립니다.
- 저장할 때 `linkRel` 옵션(예: `'nofollow ugc'`)이 이 링크에도 붙습니다. [링크](https://82editor.com/docs/links/)를 보세요.

```html
<p>자세한 내용은 <a href="https://www.82editor.com">www.82editor.com</a> 에서 보세요.</p>
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `autoReplace` | boolean \| Record<string, string> | `true` | 치는 동안 기호로 바꾸기. 객체는 규칙 추가, 빈 값은 그 규칙 끄기. |
| `autoLink` | boolean | `true` | 친 웹·이메일 주소를 스페이스나 Enter 뒤에 링크로 바꾸기 |

---

# @멘션

> @ 를 치면 사람을 찾아 넣는 멘션. 검색은 내 서버에서.

Source: https://82editor.com/docs/mentions/

`@` 를 치고 이름을 치면 사람 목록이 뜨고, 고르면 `@이름` 덩어리가 들어갑니다. 댓글, 업무 게시판에서 누군가를 부를 때 씁니다. 사람 목록은 사이트가 `search` 함수로 넘겨 줍니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link',
  mentions: {
    trigger: '@',
    search: (q) => [
      { id: 'minsu', label: '김민수' },
      { id: 'jiyoung', label: '이지영' },
      { id: 'junho', label: '박준호' },
      { id: 'seoyeon', label: '최서연' },
    ].filter((u) => u.label.includes(q) || u.id.includes(q.toLowerCase())),
  },
});
```

## 쓰는 법

- 줄 맨 앞, 공백 뒤, 여는 괄호 뒤에서 `@` 를 치면 시작합니다. `a@b` 처럼 글자에 붙은 @ 는 시작하지 않습니다.
- `@` 만 친 순간에도 빈 검색어로 `search('')` 가 불립니다. 자주 부르는 사람을 돌려주면 좋습니다.
- 검색어는 공백 없이 서른 글자까지입니다. 한글은 조합 중인 글자로도 검색합니다.
- 결과는 여덟 개까지 보이고, 이름 옆에 `id` 가 작게 나옵니다. `↑` `↓`, `Enter`/`Tab`, `Esc` 로 다룹니다.
- 넣은 멘션은 한 덩어리라서 안을 고칠 수 없고, 지우면 한 번에 지워집니다. 뒤에 공백 하나가 따라 들어갑니다.

## 서버에서 찾기

`search` 는 배열이나 Promise 를 돌려주면 됩니다. 글자를 칠 때마다 불리고, 늦게 온 이전 응답은 버립니다.

```js
createEditor('#editor', {
  mentions: {
    search: async (q) => {
      const res = await fetch('/api/members?q=' + encodeURIComponent(q));
      return res.json(); // [{ id: 'minsu', label: '김민수' }, …]
    },
  },
});
```

## 저장되는 HTML

```html
<p><span data-mention="minsu">@김민수</span> 님, 확인 부탁드립니다.</p>
```

서버는 `span[data-mention]` 의 값으로 누구를 불렀는지 알 수 있습니다. 알림을 보낼 때 쓰면 됩니다.

> 저장된 HTML 은 사용자가 고쳐서 보낼 수 있습니다. `data-mention` 값으로 알림을 보내기 전에, 그 사람이 실제로 있는지와 글쓴이가 부를 수 있는 사람인지 서버에서 확인하세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `mentions` | object | — | 주면 멘션이 켜집니다. |
| `mentions.trigger` | string | `'@'` | 목록을 여는 글자 (예: `'#'`) |
| `mentions.search` | (q) => MentionItem[] \| Promise | — | 검색어를 받아 `{ id, label }` 목록을 돌려줍니다. |

---

# 넣을 값 (머지 태그)

> {{name}} 처럼 서버가 나중에 채울 자리를 넣는 메뉴. 메일·알림 템플릿용.

Source: https://82editor.com/docs/merge-tags/

안내 메일, 알림 문자 템플릿처럼 받는 사람마다 이름·주문 번호가 달라지는 글을 쓸 때, `{{name}}` 같은 자리 표시를 넣습니다. 에디터에서는 고칠 수 없는 칩으로 보이고, 저장할 때는 글자 그대로 나가서 서버가 채웁니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link | mergeTag',
  mergeTags: [
    { label: '받는 사람', value: '{{name}}' },
    { label: '주문 번호', value: '{{order_no}}' },
    { label: '오늘 날짜', value: '{{today}}' },
  ],
});
```

## 쓰는 법

- `mergeTag` 툴바 항목(넣을 값)에 `mergeTags` 목록이 `이름  값` 으로 보입니다. 고르면 커서 자리에 칩이 들어갑니다.
- 목록에 있는 값을 직접 끝까지 치면 그 자리에서 칩이 됩니다. 불러온 글(`value`, `setHTML`) 안의 값도 칩으로 보입니다.
- 칩은 한 덩어리라서 안을 고칠 수 없고 한 번에 지워집니다. 코드 블록과 인라인 코드 안의 글자는 칩이 되지 않습니다.
- `full` 프리셋에서는 ⋯ 더 보기 메뉴 안에 있습니다. `basic`, `board` 에는 없으니 툴바에 직접 넣으세요.

## 저장되는 HTML

칩 표시는 저장할 때 벗겨지고 값 글자만 남습니다.

```html
<p>{{name}} 님, 주문하신 상품이 오늘 발송되었습니다.</p>
<p>주문 번호: {{order_no}}</p>
```

## 서버에서 채우기

값의 모양은 자유입니다(`{{name}}`, `%NAME%`, `[이름]`…). 서버의 템플릿 방식에 맞추세요. 채우는 값은 꼭 HTML 이스케이프하세요.

```js
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';');

function fill(html, data) {
  return html.replace(/\{\{(\w+)\}\}/g, (_, key) => esc(data[key] ?? ''));
}

fill(savedHtml, { name: '김민수', order_no: 'A-1024', today: '2026-10-21' });
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `mergeTags` | { label, value }[] | — | 메뉴에 보일 이름(`label`)과 저장될 글자(`value`) |
| `mergeTag` | toolbar item | — | 넣을 값 메뉴 |

---

# Enter 동작

> Enter 가 새 문단을 만들지, 줄만 바꿀지 정하기 (enterMode).

Source: https://82editor.com/docs/enter-mode/

기본은 `Enter` 가 새 문단(`<p>`), `Shift`+`Enter` 가 줄바꿈(`<br>`)입니다. `enterMode: 'br'` 이면 반대가 됩니다. 기존 게시판 글이 `<br>` 로 줄을 나눠 왔거나, Enter 를 쳐도 문단 사이 간격이 생기지 않길 바랄 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'bold | bulletList | table',
  enterMode: 'br',
});
```

## 두 가지 비교

|  | 'p' (기본) | 'br' |
| --- | --- | --- |
| `Enter` | 새 문단 | 줄바꿈 |
| `Shift`+`Enter` | 줄바꿈 | 새 문단 |
| 표 칸 안 `Enter` | 칸 안에서 새 줄 | 줄바꿈 (`Shift`+`Enter` 도 줄바꿈) |

```html
<!-- enterMode: 'p' : 줄마다 Enter -->
<p>첫 줄</p>
<p>둘째 줄</p>

<!-- enterMode: 'br' : 줄마다 Enter -->
<p>첫 줄<br>둘째 줄</p>
```

## 모드와 상관없이 같은 것

- 목록, 제목, 코드 블록, 접은글 제목, 사진 설명에서는 `Enter` 가 원래대로 움직입니다.
- 인용, 강조 박스, 접은글 맨 끝의 빈 줄에서 `Enter` 를 치면 상자 밖으로 나옵니다.
- 코드 블록 맨 끝 빈 줄에서 `Enter` 를 치면 코드 블록을 빠져나옵니다.
- 제목 다음 빈 제목에서 `Enter` 를 치면 본문 문단이 됩니다.

> 어느 쪽이든 문단 사이 간격은 글을 보여 줄 페이지의 CSS 가 정합니다. 기본 모드에서 줄 간격이 너무 넓다면 `p { margin: 0 0 .5em }` 처럼 문단 여백을 줄이는 것도 방법입니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `enterMode` | 'p' \| 'br' | `'p'` | `'p'`: Enter 새 문단, Shift+Enter 줄바꿈. `'br'`: 그 반대. |

---

# 블록 옮기기

> 문단·표·사진을 손잡이로 끌거나 Alt+Shift+↑/↓ 로 옮기기.

Source: https://82editor.com/docs/block-drag/

문단, 제목, 목록, 표, 사진 같은 블록 왼쪽에 마우스를 올리면 손잡이가 뜹니다. 끌어서 놓으면 블록이 그 자리로 옮겨집니다. 키보드로는 `Alt`+`Shift`+`↑`/`↓` 입니다. 잘라내고 붙이는 것보다 빠르고 서식도 그대로입니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | bulletList | table',
  height: 320,
});
```

## 마우스로 끌기

- 옮기는 단위는 본문 맨 위 단계 블록입니다. 목록, 표, 인용, 강조 박스는 통째로 움직입니다.
- 끄는 동안 놓일 자리에 가로줄이 보입니다. 높이가 정해진 에디터에서는 위·아래 가장자리로 끌면 저절로 스크롤됩니다.
- 블록이 두 개 이상일 때만 손잡이가 뜹니다. 글자를 치기 시작하면 숨습니다.
- 터치 화면(휴대폰, 태블릿), 읽기 전용, HTML 소스 보기에서는 손잡이가 없습니다.

## 키보드로 옮기기

- `Alt`+`Shift`+`↑` / `↓`: 커서가 있는 블록을 위·아래 블록과 바꿉니다. 커서는 그 블록 안에 그대로 있습니다.
- 사진을 고른 상태에서는 사진이 든 블록이 움직입니다.
- 지도, 링크 카드, 첨부 파일, HTML 블록을 고르면 뜨는 바에 위로·아래로 단추가 있습니다. 터치 화면에서는 이 단추로 옮깁니다.
- 한 번 옮길 때마다 실행 취소 한 단계입니다.

## 코드로 옮기기

```js
// 맨 위 단계 블록을 다른 블록 앞으로 (null 이면 맨 끝으로)
const blocks = editor.content.children;
editor.moveBlock(blocks[2], blocks[0]);
editor.moveBlock(blocks[0], null);

// 커서가 있는 블록을 한 칸 위·아래로
editor.exec('moveBlockUp');
editor.exec('moveBlockDown');
```

> `moveBlock` 의 첫 인자는 `editor.content` 의 바로 아래 자식이어야 합니다. 아니면 아무 일도 하지 않습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `dragHandle` | boolean | `true` | `false` 면 끌기 손잡이를 띄우지 않습니다. 키보드로 옮기기는 그대로 됩니다. |
| `moveBlock(block, before)` | method | — | 블록을 `before` 앞으로 옮기기. 실행 취소 한 단계. |
| `moveBlockUp` / `moveBlockDown` | command | — | `editor.exec()` 로 부르는 한 칸 옮기기 |

---

# 찾기·바꾸기

> Ctrl+F 로 글 안에서 찾고, Ctrl+H 로 바꾸기.

Source: https://82editor.com/docs/find-replace/

긴 글에서 단어를 찾거나 한꺼번에 바꿀 때 씁니다. 에디터 안에서 `Ctrl`+`F` 는 찾기, `Ctrl`+`H` 는 바꾸기 줄까지 엽니다. 브라우저의 페이지 찾기 대신 에디터 위쪽에 찾기 줄이 열립니다.

```js
createEditor('#editor', {
  toolbar: 'findReplace | undo redo',
});
```

## 쓰는 법

- 글자를 고른 채로 열면(한 줄, 100자 미만) 그 글자가 찾을 말로 들어갑니다.
- 찾는 대로 모두 칠해지고, 지금 위치는 진하게 보입니다. 개수는 `3/7` 처럼 나옵니다. 커서 다음의 첫 결과부터 시작합니다.
- 찾기 칸에서 `Enter` 는 다음, `Shift`+`Enter` 는 이전입니다. 바꿀 내용 칸에서 `Enter` 는 지금 것 하나 바꾸기입니다. `Esc` 로 닫습니다.
- **대소문자 구분**을 켜면 영어 대소문자를 가립니다.
- **모두 바꾸기**는 실행 취소 한 번으로 되돌아옵니다.
- 찾는 말은 문단을 넘지 않습니다. 한 문단 안에서는 굵게처럼 서식이 섞여 있어도 찾습니다.

툴바 항목 이름은 `findReplace` 입니다. `board`, `full` 프리셋에서는 ⋯ 더 보기 메뉴 안에 있고, 툴바에 없어도 단축키는 됩니다. 읽기 전용에서도 찾기는 되고 바꾸기는 안 됩니다.

> 결과 칠하기는 브라우저의 CSS Highlight 기능을 씁니다. 이 기능이 없는 오래된 브라우저에서는 지금 결과만 선택해서 보여 줍니다.

## 코드로 열기

```js
editor.exec('findReplace'); // 찾기
editor.exec('replace');     // 바꾸기 줄까지
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `findReplace` | toolbar item | — | 찾기·바꾸기 줄 열기 |
| `Ctrl`+`F` / `Ctrl`+`H` | shortcut | — | 찾기 / 바꾸기 (맥은 `⌘`) |

---

# 한글 입력

> 한글 조합 중에 에디터가 기다리는 것과, 조합이 끝난 뒤 하는 일.

Source: https://82editor.com/docs/korean-input/

한글은 자모를 모아 한 글자를 만드는 동안(조합 중) 브라우저와 입력기가 글자를 계속 고칩니다. 이때 에디터가 끼어들면 글자가 깨지거나 첫 자모가 따로 남습니다. 82에디터는 조합 중에는 손을 대지 않고, 조합이 끝난 뒤 한 번에 처리합니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList checklist',
  mentions: {
    search: (q) => [
      { id: 'minsu', label: '김민수' },
      { id: 'minji', label: '김민지' },
      { id: 'jiyoung', label: '이지영' },
    ].filter((u) => u.label.includes(q)),
  },
});
```

## 조합 중에 기다리는 것

- 키 처리: 단축키, `Enter`, `Tab`, 사이트가 넣은 `shortcuts` 까지 모두 입력기에 맡깁니다.
- 마크다운 규칙, 자동 링크, 자동 바꾸기, 본문 정리
- 실행 취소 기록. 조합 중 `Ctrl`+`Z` 와 다시 실행은 무시합니다.
- `input`, `change` 이벤트와 textarea 값 맞추기

조합 중에도 하는 일은 하나입니다. 이미 열린 / 메뉴와 @ 멘션 목록은 조합 중인 글자로 검색어를 다시 읽습니다. `@김` 을 치는 동안 목록이 바로 줄어듭니다.

## 조합이 끝나면

- 메뉴 갱신, 실행 취소 기록, `change` 이벤트가 한 번 실행됩니다. 크롬과 사파리는 이벤트 순서가 다르지만 둘 다 한 번만 처리합니다.
- 조합을 시작할 때 그 앞까지 쓴 내용을 실행 취소 단계로 끊어 둡니다.
- 마크다운 규칙과 자동 바꾸기는 조합이 끝난 뒤 치는 스페이스나 기호에서 실행됩니다. `(주)` 는 닫는 괄호를 칠 때 ㈜ 가 됩니다.

## 한국어라서 따로 챙긴 것

- 목록 단추를 누른 직후, 넣을 값(머지 태그) 칩 바로 뒤에서 한글을 칠 때 첫 자모가 따로 남던 문제(`ㄴ님`)를 커서 자리를 바로잡아 막았습니다.
- 읽기 전용일 때는 조합 입력도 막습니다. 크롬은 편집 불가 영역에서도 조합 입력을 받기 때문입니다.
- 자동 링크는 주소 바로 뒤의 조사를 링크에서 뺍니다(`naver.com에서`).
- / 메뉴와 이모지 찾기는 초성으로도 찾습니다(`ㅍ` → 표).

## 플러그인을 만든다면

에디터에 직접 `keydown` 이나 `input` 리스너를 붙인다면 조합 중에는 아무것도 하지 마세요. 에디터가 쓰는 것과 같은 검사입니다.

```js
editor.content.addEventListener('keydown', (e) => {
  if (e.isComposing || e.keyCode === 229) return; // 한글 조합 중
  // …
});

// 글이 바뀐 뒤 할 일은 change 이벤트로 (조합이 끝난 뒤 옵니다)
editor.on('change', (html) => { /* … */ });
```

## 옵션

한글 입력만을 위한 옵션은 없습니다. 조합이 끝난 뒤 실행되는 기능을 끄고 켜는 옵션입니다.

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `markdownShortcuts` | boolean | `true` | [마크다운](https://82editor.com/docs/markdown/) 규칙 |
| `autoReplace` | boolean \| object | `true` | [자동 바꾸기](https://82editor.com/docs/auto-replace/) |
| `autoLink` | boolean | `true` | 주소를 링크로 |
| `mentions` | object | — | [@멘션](https://82editor.com/docs/mentions/) |

---

# 보안 (XSS)

> 에디터가 거르는 것과 서버에서 꼭 다시 걸러야 하는 이유.

Source: https://82editor.com/docs/security/

82editor는 `setHTML`, 붙여넣기, 끌어다 놓기, 소스 보기에서 들어오는 모든 HTML을 허용 목록으로 거릅니다. `script`·`style` 태그, `on*` 속성, `javascript:` 주소, 허용되지 않은 iframe은 남지 않습니다.

> 하지만 브라우저의 에디터는 공격자가 건너뛸 수 있습니다. 저장하기 전에 서버에서 반드시 한 번 더 거르세요.

## 서버에서 거르기

| 언어 | 추천 라이브러리 |
| --- | --- |
| PHP | [HTML Purifier](https://github.com/ezyang/htmlpurifier) |
| Node | [DOMPurify](https://github.com/cure53/DOMPurify) + jsdom, 또는 sanitize-html |
| Java | [OWASP Java HTML Sanitizer](https://github.com/OWASP/java-html-sanitizer), jsoup Safelist |
| Python | nh3 (bleach 후속) |

허용 목록은 에디터와 맞추면 됩니다. 82editor 출력에 쓰이는 태그: `p br div span h1-h6 strong em u s sub sup code pre blockquote ul ol li a img figure figcaption table thead tbody tr th td caption colgroup col hr mark nav iframe font`. 속성은 `style`(글자색·크기·정렬·줄간격 등), `href`, `src`, `alt`, `colspan`, `rowspan`, `data-checklist`, `data-checked`, `data-video`. iframe 은 YouTube·Vimeo·네이버TV·카카오TV·Dailymotion 주소만.

## 보기 화면

- 저장한 HTML을 보여 줄 때도 Content-Security-Policy 로 인라인 스크립트를 막아 두면 한 겹 더 안전합니다.
- 외부 링크에는 `rel="noopener nofollow ugc"` 를 붙이세요 (82editor는 새 창 링크에 noopener를 붙입니다).

---

# 저장되는 HTML

> getHTML 이 돌려주는 HTML, 휴대폰에 맞추는 처리, textarea 동기화.

Source: https://82editor.com/docs/saved-html/

글을 저장할 때는 `editor.getHTML()` 로 HTML을 받습니다. 에디터 전용 표시는 빠지고 허용 목록으로 거른 HTML이 나옵니다. 휴대폰에서 넘치지 않도록 사진과 표에 몇 가지를 덧붙입니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link image table',
  height: 320,
});
```

## 무엇이 바뀌어 나오나

- 빈 에디터는 빈 문자열 `''` 을 돌려줍니다. 빈 `<p><br></p>` 가 저장되지 않습니다.
- 선택 표시, 업로드 중인 사진, 끌기 손잡이 같은 에디터 화면용 요소는 빠집니다.
- **사진**: `style` 에 `max-width: 100%; height: auto` 가 붙고, 너비·높이 속성이 없으면 원본 크기로 `width`·`height` 를 적습니다. 보기 화면에서 사진이 넘치지 않고, 불러오는 동안 글이 덜컹거리지 않습니다.
- **표**: `<div data-table-wrap style="overflow-x: auto">` 로 감싸서 좁은 화면에서 옆으로 밀어 볼 수 있게 합니다. 저장한 글을 다시 불러오면 이 껍데기는 벗겨집니다.
- **지연 로딩**: 두 번째 사진부터 `loading="lazy"` 가 붙습니다. 첫 사진은 보통 바로 보이는 자리라 붙이지 않습니다.
- `linkRel` 을 주면 http(s) 링크마다 `rel` 을 더합니다. [링크](https://82editor.com/docs/links/)를 보세요.

```html
<h2>여름 캠핑 후기</h2>
<p><img src="https://…/camp.jpg" alt="캠핑장" width="640" height="360" style="max-width: 100%; height: auto"></p>
<p><img src="https://…/fire.jpg" alt="모닥불" width="640" height="360" style="max-width: 100%; height: auto" loading="lazy"></p>
<div data-table-wrap="" style="overflow-x: auto"><table>…</table></div>
```

이 처리가 필요 없다면 `responsiveOutput: false`, `lazyImages: false` 로 끕니다. 편집하던 그대로의 HTML이 필요하면 `editor.editHTML()` 을 쓰세요. HTML 소스 보기와 자동 저장 초안은 이쪽을 씁니다.

## textarea 와 함께 쓸 때

`createEditor` 에 `<textarea>` 를 넘기면 내용이 바뀔 때마다, 그리고 폼을 전송하기 직전에 textarea 값을 `getHTML()` 결과로 맞춥니다. 서버는 원래 받던 필드를 그대로 읽으면 됩니다. 자세한 예는 [textarea와 폼 전송](https://82editor.com/docs/textarea-form/)에 있습니다.

## 바뀔 때마다 받기

```js
const editor = createEditor('#editor', {
  onChange: (html) => preview.innerHTML = html,
});
// 또는
editor.on('change', (html) => { /* … */ });
```

`change` 이벤트는 입력이 잠깐 멈춘 뒤 한 번 오고, 결과 HTML이 실제로 달라졌을 때만 옵니다. 글자만 필요하면 `getText()`, 마크다운이 필요하면 `getMarkdown()` ([마크다운](https://82editor.com/docs/markdown/)) 을 씁니다.

> 에디터가 거른 HTML이라도 서버에서 한 번 더 걸러야 합니다. [보안](https://82editor.com/docs/security/)을 보세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `responsiveOutput` | boolean | `true` | 사진에 `max-width:100%; height:auto` 와 원본 너비·높이, 표에 가로 스크롤 상자 |
| `lazyImages` | boolean | `true` | 두 번째 사진부터 `loading="lazy"` |
| `linkRel` | string | - | http(s) 링크에 더할 rel. `nofollow`, `sponsored`, `ugc` 만 받습니다 |
| `onChange` | (html) => void | - | 내용이 바뀔 때마다 저장용 HTML |
| `getHTML()` | method | - | 저장용 HTML. 비었으면 `''` |
| `editHTML()` | method | - | 위 처리를 하지 않은 편집 중 HTML |
| `getText()` | method | - | 블록 사이에 줄바꿈을 넣은 글자 |
| `isEmpty()` | method | - | 글자도 사진·표·동영상도 없으면 true |

---

# 메일용 HTML

> getHTML({ inlineStyles: true }) 로 스타일을 style 속성에 써 넣기.

Source: https://82editor.com/docs/email-html/

메일 프로그램은 `<style>` 과 외부 CSS를 대부분 버립니다. 뉴스레터나 안내 메일 본문을 에디터로 쓴다면 `getHTML({ inlineStyles: true })` 로 받으세요. 에디터에서 보이는 글꼴·크기·색·여백을 태그마다 `style` 속성으로 적어 줍니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | color | bulletList | link',
  contentStyle: 'font-family: Georgia, serif; font-size: 16px; line-height: 1.7;',
  onReady: (ed) => {
    const out = document.createElement('pre');
    out.style.cssText = 'white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto';
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = '메일용 HTML 보기';
    btn.onclick = () => { out.textContent = ed.getHTML({ inlineStyles: true }); };
    ed.statusEl.prepend(btn);
    ed.root.after(out);
  },
});
```

아래 버튼(저장되는 HTML)과 에디터 아래 버튼(메일용 HTML)을 눌러 비교해 보세요.

## 어떻게 동작하나

- HTML을 화면 밖에 에디터 너비로 한 번 그린 뒤, 브라우저가 계산한 스타일을 읽습니다.
- 글꼴, 크기, 굵기, 색, 줄간격, 정렬처럼 이어받는 값은 부모와 다를 때만 적습니다.
- 배경색, 여백(margin·padding), 테두리, 모서리 둥글기처럼 이어받지 않는 값은 태그의 기본 모양과 다를 때만 적습니다.
- 전체를 `<div style="font-family: …; font-size: …; line-height: …; color: …">` 로 감쌉니다.
- `contentStyle` 과 `styles` 메뉴의 클래스로 꾸민 모양도 계산된 값으로 들어갑니다.

```js
const html = editor.getHTML({ inlineStyles: true });
await fetch('/newsletter', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ subject, html }),
});
```

> 계산된 스타일을 읽으므로 에디터가 화면에 붙어 있는 동안 브라우저에서 불러야 합니다. 결과가 길어지니 게시판 글처럼 사이트 안에서 보여 줄 글은 그냥 `getHTML()` 로 저장하세요.

> 저장되는 HTML에 붙는 처리([저장되는 HTML](https://82editor.com/docs/saved-html/))는 여기에도 그대로 들어갑니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `getHTML({ inlineStyles })` | boolean | `false` | true 면 스타일을 style 속성으로 적은 HTML |
| `contentStyle` | string | - | 편집 영역 CSS. 메일용 HTML에도 계산되어 들어갑니다 |

---

# 자동 저장

> 쓰던 글을 브라우저에 임시 저장하고, 다시 열면 복구할지 묻기.

Source: https://82editor.com/docs/autosave/

`autosave` 를 켜면 쓰던 글을 몇 초마다 브라우저(localStorage)에 임시로 저장합니다. 창을 닫거나 브라우저가 꺼졌다가 다시 열면 에디터 위에 "작성 중이던 글이 있어요" 띠가 뜨고, **복구** 또는 **버리기**를 고를 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList',
  autosave: { key: 'docs-autosave-demo', interval: 1000 },
});
```

## 동작

- 내용이 바뀐 경우에만 `interval` 마다 저장합니다 (기본 3초). 에디터를 없앨 때(`destroy()`)도 한 번 저장합니다.
- 저장 키는 `e82:draft:` 뒤에 `key` 를 붙인 것입니다. `key` 를 주지 않으면 페이지 경로(`location.pathname`)를 씁니다.
- 에디터를 열 때 저장된 초안이 처음 내용과 다르면 복구 띠를 보여 줍니다. 복구하면 실행 취소할 수 있는 변경으로 들어갑니다.
- 내용을 모두 지우면 저장된 초안도 지웁니다.
- `<textarea>` 에 붙인 에디터는 폼을 전송할 때 초안을 알아서 지웁니다.

## 저장한 뒤 초안 지우기

fetch 로 저장하는 화면이라면 저장이 성공한 뒤 `clearAutosave()` 를 부르세요. 그래야 다음에 열 때 이미 저장한 글을 다시 복구하자고 묻지 않습니다.

```js
const editor = createEditor('#editor', {
  autosave: { key: 'board-write' },
});

saveButton.addEventListener('click', async () => {
  const res = await fetch('/posts', { method: 'POST', body: editor.getHTML() });
  if (res.ok) {
    editor.clearAutosave();
    editor.markClean();
  }
});
```

> 한 페이지에 에디터가 여럿이거나 글쓰기·수정 화면의 주소가 같다면 `key` 를 따로 주세요 (예: `'post-' + postId`). 같은 키를 쓰면 초안이 서로 덮어씁니다.

초안은 그 브라우저에만 남습니다. 다른 기기로 옮겨 가지 않고, 공용 PC에서는 다음 사람이 볼 수 있습니다. 실수로 지운 내용을 되돌리는 기능은 [이전 버전](https://82editor.com/docs/revisions/), 저장 안 한 채 나가는 것을 막는 기능은 [저장 안 한 변경 알림](https://82editor.com/docs/unsaved-changes/)을 보세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `autosave` | boolean \| object | `false` | true 또는 객체면 켭니다 |
| `autosave.key` | string | 페이지 경로 | localStorage 키 (`e82:draft:` 뒤에 붙음) |
| `autosave.interval` | number | `3000` | 저장 간격(ms) |
| `clearAutosave()` | method | - | 저장된 초안을 지웁니다 |

---

# 저장 안 한 변경 알림

> isDirty, markClean, confirmLeave 로 저장 안 하고 나가는 것 막기.

Source: https://82editor.com/docs/unsaved-changes/

글을 고쳐 놓고 저장하지 않은 채 다른 페이지로 가면 쓴 내용이 날아갑니다. `confirmLeave: true` 를 주면 저장하지 않은 변경이 있을 때 브라우저가 "사이트에서 나가시겠습니까?" 를 묻습니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic underline | link',
  confirmLeave: true,
  onReady: (ed) => {
    const state = document.createElement('span');
    const save = document.createElement('button');
    save.type = 'button';
    save.textContent = '저장';
    const show = () => { state.textContent = ed.isDirty() ? '저장 안 됨' : '저장됨'; };
    save.onclick = () => { ed.markClean(); show(); };
    ed.on('change', show);
    ed.statusEl.prepend(state, save);
    show();
  },
});
```

## 세 가지 API

- `isDirty()`: 처음 불러온 내용, 또는 마지막 `markClean()` 때와 지금 내용이 다르면 true. 고쳤다가 되돌려 같아지면 다시 false 입니다.
- `markClean()`: 지금 내용을 "저장됨"으로 표시합니다. 서버 저장이 성공한 뒤 부르세요.
- `confirmLeave`: true 면 페이지를 떠날 때(`beforeunload`) `isDirty()` 가 true 인 경우에만 묻습니다.

```js
const editor = createEditor('#editor', { confirmLeave: true });

async function save() {
  const res = await fetch('/posts/12', { method: 'PUT', body: editor.getHTML() });
  if (res.ok) editor.markClean(); // 이제 나가도 묻지 않습니다
}
```

`<textarea>` 에 붙인 에디터는 폼을 전송할 때 저장된 것으로 칩니다. 그래서 등록 버튼으로 이동할 때는 묻지 않습니다.

> 확인 창의 문구는 브라우저가 정합니다. 사이트에서 바꿀 수 없습니다. 휴대폰 브라우저는 상황에 따라 묻지 않고 닫기도 하니 [자동 저장](https://82editor.com/docs/autosave/)을 함께 켜 두면 안전합니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `confirmLeave` | boolean | `false` | 저장 안 한 변경이 있으면 떠나기 전에 묻기 |
| `isDirty()` | method | - | 마지막 저장 뒤 바뀌었으면 true |
| `markClean()` | method | - | 지금 내용을 저장됨으로 표시 |

---

# 이전 버전

> 쓰는 동안 1분마다 버전을 남기고, 비교해서 되돌리기.

Source: https://82editor.com/docs/revisions/

글을 쓰는 동안 내용이 바뀌면 일정 간격으로 이전 상태를 버전으로 남깁니다. `revisions` 버튼을 누르면 버전 목록과 지금 글과의 차이가 보이고, 고른 버전으로 되돌릴 수 있습니다. 실행 취소로는 너무 멀리 가야 할 때 씁니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList | revisions',
  revisions: { key: 'docs-revisions-demo', interval: 5000 },
});
```

## 동작

- `interval`(기본 1분)마다, 그리고 에디터에서 포커스가 빠질 때 내용이 바뀌었는지 봅니다. 바뀌었으면 바뀌기 전 상태를 하나 남깁니다.
- 최근 `max`개(기본 20개)만 남기고 오래된 것부터 버립니다.
- 목록에는 시간과 글자 수가 나옵니다. 하나를 고르면 그 버전 뒤로 지운 글은 줄을 긋고, 새로 쓴 글은 밑줄로 보여 줍니다(단어 단위).
- **이 버전으로 되돌리기**는 실행 취소할 수 있는 보통 변경입니다. 잘못 되돌렸으면 `Ctrl`+`Z` 로 돌아옵니다.

## 어디에 남나

옵션 없이 툴바에 `revisions` 만 넣으면 이번 화면에서만 기억합니다(새로 고침하면 사라집니다). `revisions: true` 또는 객체를 주면 localStorage 에 `e82:rev:` + `key` 로 저장해 다시 열어도 남습니다. `key` 를 주지 않으면 페이지 경로를 씁니다.

```js
createEditor('#editor', {
  toolbar: 'board',              // board 와 full 프리셋은 ⋯ 메뉴에 들어 있습니다
  revisions: { key: 'post-' + postId, max: 30 },
});
```

툴바 항목 이름은 `revisions` 입니다. `board`(기본)와 `full` 프리셋의 ⋯ 더보기 메뉴에 있고, `minimal`·`basic` 에는 없습니다.

> 버전은 그 브라우저에만 남습니다. 서버에 버전 기록이 필요하면 저장할 때마다 서버에 따로 남기세요.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `revisions` | toolbar item | - | 이전 버전 창을 여는 버튼 |
| `revisions` | boolean \| object | 이번 화면만 | true 또는 객체면 localStorage 에 저장 |
| `revisions.key` | string | 페이지 경로 | 저장 키 (`e82:rev:` 뒤에 붙음) |
| `revisions.max` | number | `20` | 남길 버전 수 |
| `revisions.interval` | number | `60000` | 버전을 확인하는 간격(ms) |

---

# 글자 수와 제한

> 상태 표시줄의 글자·단어·바이트 수, maxLength, getStats.

Source: https://82editor.com/docs/word-count/

에디터 아래 상태 표시줄에 글자 수, 공백 제외 글자 수, 단어 수, 바이트 수가 나옵니다. 댓글이나 짧은 소개글처럼 길이를 제한해야 하면 `maxLength` 를 줍니다.

```js
createEditor('#editor', {
  toolbar: 'bold italic | link',
  maxLength: 100,
  height: 180,
});
```

## 세는 방법

- **글자**: 줄바꿈을 뺀 글자 수. 한글 한 글자가 1입니다.
- **공백 제외**: 띄어쓰기와 줄바꿈을 모두 뺀 수.
- **단어**: 띄어쓰기로 나뉜 덩어리 수.
- **바이트**: UTF-8 기준입니다. 한글 한 글자는 3바이트로 셉니다.

## maxLength

`maxLength` 를 주면 상태 표시줄이 `87 / 100` 처럼 바뀌고, 넘으면 숫자와 테두리가 빨갛게 됩니다. 입력을 막지는 않습니다. 넘은 상태로 내용이 바뀔 때마다 `maxlength` 이벤트가 오니, 저장 버튼을 막거나 안내를 띄우는 데 쓰세요.

```js
const editor = createEditor('#editor', { maxLength: 2000 });

editor.on('maxlength', ({ length, max }) => {
  submit.disabled = true;
  hint.textContent = length - max + '자 넘었습니다';
});
editor.on('change', () => {
  if (editor.getStats().chars <= 2000) submit.disabled = false;
});
```

> 글자 수 제한은 서버에서도 확인하세요. 서버는 HTML 태그를 뺀 글자로 세야 에디터와 숫자가 맞습니다.

## getStats()

```js
editor.getStats();
// { chars: 87, charsNoSpace: 70, words: 18, bytes: 245, paragraphs: 2 }
```

`paragraphs` 는 비어 있지 않은 문단·제목·목록 항목·인용·코드 블록의 수입니다. 상태 표시줄이 필요 없으면 `statusbar: false` 로 숨깁니다. 이때 아래쪽 높이 조절 손잡이도 함께 사라집니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `statusbar` | boolean | `true` | 상태 표시줄(글자 수, 높이 조절 손잡이) 보이기 |
| `maxLength` | number | - | 글자 수 기준. 넘으면 빨갛게 표시하고 `maxlength` 이벤트 |
| `getStats()` | method | - | `{ chars, charsNoSpace, words, bytes, paragraphs }` |
| `maxlength` | event | - | `{ length, max }`. 넘은 상태에서 바뀔 때마다 |

---

# 읽기 전용

> readOnly 와 setReadOnly 로 고칠 수 없게 보여 주기.

Source: https://82editor.com/docs/read-only/

결재 문서, 마감된 글, 권한이 없는 사람에게 보여 주는 화면처럼 같은 에디터 모양으로 보여 주되 고치지는 못하게 할 때 씁니다. `readOnly: true` 로 시작하거나 `editor.setReadOnly(true)` 로 바꿉니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | link | preview fullscreen',
  readOnly: true,
  onReady: (ed) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = '편집하기';
    btn.onclick = () => {
      ed.setReadOnly(!ed.readOnly);
      btn.textContent = ed.readOnly ? '편집하기' : '읽기 전용으로';
    };
    ed.statusEl.prepend(btn);
  },
});
```

## 읽기 전용에서 달라지는 것

- 글자를 쓰거나 붙여 넣을 수 없고 커서도 보이지 않습니다.
- 툴바 버튼은 대부분 꺼집니다. 켜진 채 남는 것은 `findReplace`(찾기), `preview`, `print`, `fullscreen`, `help` 입니다.
- 체크리스트를 눌러도 체크가 바뀌지 않고, 사진·표·상자를 눌러도 편집 막대가 뜨지 않습니다.
- 접힌 섹션([접기](https://82editor.com/docs/details/))은 저장된 대로 접혀 보이고, 읽는 사람이 눌러 펼칠 수 있습니다. 편집으로 돌아오면 다시 펼쳐집니다.
- 에디터에 `is-readonly` 클래스가 붙습니다. CSS로 모양을 바꿀 때 쓰세요.

```js
const editor = createEditor('#editor', { readOnly: !canEdit });

editButton.addEventListener('click', () => editor.setReadOnly(false));
console.log(editor.readOnly); // 지금 상태
```

> 읽기 전용은 화면에서 막는 것뿐입니다. 고치면 안 되는 글은 서버에서 저장 요청을 거절하세요.

글 보기 화면만 필요하다면 에디터를 띄우지 않고 저장한 HTML을 페이지에 그대로 넣는 편이 가볍습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `readOnly` | boolean | `false` | 읽기 전용으로 시작 |
| `setReadOnly(ro)` | method | - | 읽기 전용 켜기·끄기 |
| `readOnly` | property | - | 지금 읽기 전용인지 |

---

# HTML 소스 보기

> source 버튼으로 HTML을 직접 보고 고치기.

Source: https://82editor.com/docs/source-view/

`source` 버튼을 누르면 편집 영역이 HTML 코드 창으로 바뀝니다. 태그를 직접 고치거나 다른 곳에서 만든 HTML을 붙여 넣을 때 씁니다. 다시 누르면 고친 HTML이 에디터에 들어갑니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold italic | link | source',
});
```

## 사용법

- 단축키: `Ctrl`+`Shift`+`U` 로 열고 닫습니다.
- HTML은 들여쓰기로 정리되어 보이고, 태그와 속성에 색이 칠해집니다.
- 코드 창에서 `Tab` 은 칸 이동 대신 공백 두 칸을 넣습니다.
- 닫으면 HTML을 허용 목록으로 걸러서 넣습니다. `<script>`, `on*` 속성 같은 것은 남지 않습니다. 넣은 결과는 실행 취소할 수 있습니다.
- 아무것도 고치지 않고 닫으면 내용이 그대로입니다(실행 취소 기록도 생기지 않습니다).
- 열려 있는 동안 쓸 수 있는 버튼은 `source`, `preview`, `print`, `fullscreen`, `help`, `undo`, `redo` 뿐입니다.

툴바 항목 이름은 `source` 입니다. `board`(기본)와 `full` 프리셋의 ⋯ 더보기 메뉴에 있습니다. 코드에서는 `editor.toggleSource()` 로 열고 닫고, `source` 이벤트로 열림(true)·닫힘(false)을 받습니다.

```js
editor.on('source', (open) => {
  saveButton.disabled = open; // 소스 창을 닫고 저장하게
});
editor.toggleSource(true);
```

소스 창이 열린 채로 `getHTML()` 을 불러도 코드 창의 HTML을 걸러서 돌려주므로 내용을 잃지 않습니다.

> 방문자가 쓰는 게시판이라면 이 버튼을 빼 두는 편이 좋습니다. 걸러지기는 하지만, 일반 사용자에게는 필요 없는 기능입니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `source` | toolbar item | - | HTML 코드 창 열기·닫기 |
| `toggleSource(open?)` | method | - | 열기(true)·닫기(false)·바꾸기(생략) |
| `source` | event | - | 열리면 true, 닫히면 false |
| `allowedTags` | string[] | - | 허용할 태그 목록 ([보안](https://82editor.com/docs/security/)) |
| `allowedAttributes` | object | - | 태그별 허용 속성 |

---

# 미리보기와 인쇄

> 휴대폰·태블릿·PC 너비로 미리보기, 글만 인쇄하기.

Source: https://82editor.com/docs/preview-print/

`preview` 버튼은 저장될 HTML을 읽는 사람이 보는 모습으로 보여 줍니다. 휴대폰·태블릿·PC 너비를 바꿔 가며 사진과 표가 어떻게 보이는지 확인할 수 있습니다. `print` 버튼은 툴바 없이 글만 인쇄합니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | image table | preview print',
  height: 300,
});
```

## 미리보기

- **휴대폰**(360px), **태블릿**(768px), **PC**(창 너비) 중에서 고릅니다. 처음에는 PC로 열립니다.
- 보여 주는 것은 `getHTML()` 결과입니다. 사진 크기 맞춤, 표 가로 스크롤 같은 [저장되는 HTML](https://82editor.com/docs/saved-html/) 처리가 들어간 모습입니다.
- 툴바 항목 이름은 `preview` 입니다. `board`(기본)와 `full` 프리셋의 ⋯ 더보기 메뉴에 있습니다.

## 인쇄

- 보이지 않는 창에 `getHTML()` 결과와 간단한 인쇄용 CSS를 넣고 브라우저 인쇄 창을 엽니다. 툴바와 에디터 테두리는 나오지 않습니다.
- [페이지 나누기](https://82editor.com/docs/dividers/)(`pageBreak`)를 넣은 곳에서 다음 장으로 넘어갑니다.
- 체크리스트는 ☐ / ☑ 로 찍힙니다.
- 툴바 항목 이름은 `print` 이고, `full` 프리셋의 ⋯ 메뉴에만 들어 있습니다. 다른 프리셋에서는 `toolbar` 에 직접 넣으세요.

두 버튼 모두 [읽기 전용](https://82editor.com/docs/read-only/)과 HTML 소스 보기 중에도 쓸 수 있습니다. 코드에서 열려면 `editor.exec('preview')`, `editor.exec('print')` 를 부릅니다.

> 미리보기와 인쇄는 에디터의 기본 글 모양으로 보여 줍니다. `contentStyle` 로 넣은 CSS는 편집 영역에만 걸려서 여기에는 들어가지 않습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `preview` | toolbar item | - | 휴대폰·태블릿·PC 너비 미리보기 창 |
| `print` | toolbar item | - | 글만 인쇄 |
| `exec('preview')` | method | - | 코드로 미리보기 열기 |
| `exec('print')` | method | - | 코드로 인쇄 창 열기 |

---

# 툴바

> 프리셋 고르기, 버튼 순서 바꾸기, 내 버튼 넣기.

Source: https://82editor.com/docs/toolbar/

## 프리셋

| 이름 | 쓰임 |
| --- | --- |
| `'minimal'` | 댓글창: 굵게·기울임·밑줄·링크·목록 |
| `'basic'` | 간단한 글: 제목·서식·목록·링크·이미지 |
| `'board'` | 기본값. 한 줄: 문단 · 크기 · 굵게 밑줄 취소선 · 글자색 배경색 · 정렬 · 목록 · 링크 사진 동영상 표 · 서식 지우기, 나머지는 ⋯ 더보기 |
| `'full'` | 모든 기능: 특수문자·이모지·찾기·소스·접근성 검사·템플릿 등 |

## 직접 고르기

이름을 빈칸으로 나눠 적은 문자열입니다. `|` 는 구분선입니다. 배열로 넘기면 각 배열이 한 묶음입니다.

```js
createEditor('#editor', {
  toolbar: 'undo redo | heading fontSize | bold italic underline color | alignMenu | bulletList orderedList | link image table | more | findReplace source',
});

// 같은 뜻의 배열
createEditor('#editor', {
  toolbar: [['undo', 'redo'], ['heading', 'fontSize'], ['bold', 'italic', 'underline', 'color'], ['link', 'image', 'table']],
});
```

## 쓸 수 있는 이름

| 묶음 | 이름 |
| --- | --- |
| 기록 | `undo redo` |
| 문단 | `heading fontFamily fontSize lineHeight` |
| 글자 | `bold italic underline strike subscript superscript code color highlight clearFormat caseChange formatPainter` |
| 정렬·목록 | `alignMenu alignLeft alignCenter alignRight alignJustify bulletList orderedList checklist listStyle indent outdent` |
| 넣기 | `link image video table hr hrStyle pageBreak blockquote quoteStyle callout details gallery columns codeBlock specialChars emoji template toc anchor datetime` |
| 밖에서 가져오기 | `embed linkCard file htmlBlock` (`file` 은 uploadFile 또는 uploadUrl 이 있을 때만) |
| 사이트 맞춤 | `styles mergeTag` (`styles`·`mergeTags` 옵션이 있을 때만) |
| 도구 | `findReplace source markdown preview print fullscreen revisions a11y help` |
| 구분 | `\|` 묶음 나누기, `more` 이후는 ⋯ 메뉴 |

> 프리셋 문자열은 `Editor82.PRESETS` 에서 볼 수 있습니다. 휴대폰에서는 사진·굵게·색·제목·목록·정렬·링크·실행 취소가 앞에 오고 나머지는 ⋯ 로 들어갑니다.

## 내 버튼 넣기

```js
editor.addButton('signature', {
  icon: '<svg viewBox="0 0 20 20"><path d="M3 15c3-6 5-6 6-2s3 3 8-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>',
  title: '서명 넣기',
  onAction: (ed) => ed.insertHTML('<p>고객센터 드림</p>'),
});
// 툴바 문자열에 'signature' 를 넣으면 그 자리에 나타납니다.
```

---

# 다국어

> 한국어·영어·일본어·중국어 화면, 문구 바꾸기.

Source: https://82editor.com/docs/i18n/

한국어와 영어는 기본으로 들어 있습니다. `language` 를 주지 않으면 페이지의 `<html lang>` 을 따릅니다. 일본어·중국어(간체)는 번들을 가볍게 하려고 따로 불러와 등록합니다 (CDN 은 `/cdn/v1.1.2/locales/ja.js` 를 본체 다음에 넣으면 끝).

```js
import { createEditor, registerLocale } from '@82editor/core';
import ja from '@82editor/core/locales/ja';

registerLocale('ja', ja);
```

```js
createEditor('#editor', {
  language: 'ja',
  locale: { placeholder: '本文を入力してください' }, // 일부만 바꾸기
});
```

---

# 테마와 contentStyle

> 다크 모드, 색 바꾸기, 보기 화면과 똑같이 보이게 하기.

Source: https://82editor.com/docs/theming/

`theme: 'auto'` 는 운영체제 설정을 따라갑니다. 사이트에 테마 전환 단추가 있다면 `editor.setTheme('dark')` 를 부르세요.

## 색 바꾸기

에디터 색은 CSS 변수입니다. 사이트 색에 맞춰 덮어쓰세요.

```js
.e82 {
  --e82-accent: #0f73e5;
  --e82-radius: 6px;
  --e82-font: 'Pretendard Variable', sans-serif;
}
```

## 보기 화면과 똑같이

게시판 글 보기 화면의 글꼴·크기·줄간격을 편집 영역에도 넣어 두면 쓴 그대로 보입니다.

```js
createEditor('#editor', {
  // 편집 영역(.e82-content) 안에 들어가므로 선택자 없이 속성만, 안쪽 요소는 중첩해서 씁니다
  contentStyle: "font-family: 'Malgun Gothic'; font-size: 10pt; line-height: 1.6; img { max-width: 100%; }",
});
```

---

# 툴바 배치

> 넘치는 버튼 접기·줄바꿈, 촘촘한 툴바, 위에 붙는 툴바, 휴대폰 툴바.

Source: https://82editor.com/docs/toolbar-layout/

툴바에 버튼이 많을 때 어떻게 보일지 정합니다. 기본은 한 줄에 들어가는 만큼만 보이고 나머지는 ⋯ 메뉴로 접습니다. 어떤 버튼을 넣을지는 [툴바](https://82editor.com/docs/toolbar/) 문서를 보세요.

```js
createEditor('#editor', {
  toolbar: 'full',
  toolbarMode: 'wrap',
  toolbarDensity: 'compact',
  toolbarSticky: true,
});
```

## 넘칠 때: 접기와 줄바꿈

- `toolbarMode: 'more'` (기본) 툴바는 한 줄입니다. 들어가지 않는 묶음은 뒤에서부터 통째로 ⋯ 메뉴로 옮깁니다. 묶음 하나도 안 들어가면 그 묶음의 끝 버튼부터 하나씩 옮깁니다. 에디터 너비가 바뀌면 다시 계산합니다.
- `toolbarMode: 'wrap'` 버튼이 넘치면 여러 줄로 내려갑니다. 관리자 화면처럼 넓고 버튼을 다 보여 줘야 할 때 씁니다.
- 두 방식 모두 툴바 문자열의 `more` 뒤에 둔 버튼은 처음부터 ⋯ 메뉴에 들어갑니다. ⋯ 버튼은 넣을 것이 있을 때만 보입니다.

```js
createEditor('#editor', {
  // 앞쪽은 늘 보이고, more 뒤는 ⋯ 메뉴
  toolbar: 'heading | bold underline color | link image | more | findReplace source',
  toolbarMode: 'wrap',
});
```

## 촘촘한 툴바

`toolbarDensity: 'compact'` 는 버튼과 묶음 사이를 좁힙니다. 버튼은 26px(휴대폰에서는 32px)이 됩니다. 댓글창이나 좁은 사이드 패널처럼 툴바가 크게 보이면 안 되는 곳에 맞습니다.

## 위에 붙는 툴바

`toolbarSticky` 는 기본으로 켜져 있습니다. 긴 글을 쓰며 페이지를 내려도 툴바가 화면 위에 붙어 있습니다. 사이트에 고정된 머리글이 있어 툴바가 그 밑에 가려지면 CSS로 붙는 위치를 내리세요.

```css
.e82-toolbar.is-sticky { top: 64px; } /* 사이트 머리글 높이만큼 */
```

`height` 를 숫자로 주면 편집 영역 안에서 스크롤되므로 툴바는 원래 위에 있습니다. 붙는 툴바는 내용만큼 늘어나는 에디터에서 쓸모가 있습니다 ([에디터 크기](https://82editor.com/docs/editor-size/) 참고).

## 휴대폰 툴바

화면 너비가 640px 이하이거나 터치 화면이면 툴바가 휴대폰용으로 바뀝니다.

- 버튼은 누르기 쉬운 40px 크기로 커지고, 툴바는 한 줄로 옆으로 밀어서 봅니다. ⋯ 버튼은 오른쪽 끝에 붙어 있습니다.
- 툴바를 지정하지 않았거나 `'board'` 이면 사진·굵게·글자색·문단·글머리 목록·가운데 정렬·링크·실행 취소만 앞에 두고 나머지는 ⋯ 메뉴로 넣습니다.
- 직접 쓴 툴바 문자열이나 다른 프리셋은 순서를 바꾸지 않고 그대로 한 줄로 보여 줍니다.
- 화면을 돌려 너비가 바뀌면 툴바를 다시 그립니다.

## 키보드로 툴바 다루기

툴바는 `Tab` 한 번에 들어가고, 안에서는 `←` `→` `Home` `End` 로 버튼을 옮겨 다닙니다. 자세한 내용은 [접근성](https://82editor.com/docs/accessibility/)에 있습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `toolbarMode` | `'more' \| 'wrap'` | `'more'` | 넘치는 버튼을 ⋯ 메뉴로 접을지, 다음 줄로 내릴지 |
| `toolbarDensity` | `'normal' \| 'compact'` | `'normal'` | 버튼 간격을 좁힘. 휴대폰에서도 적용 |
| `toolbarSticky` | `boolean` | `true` | 페이지를 내려도 툴바가 위에 붙어 있음 |
| `toolbar` | `string \| array \| false` | `'board'` | 보일 버튼. `false` 면 툴바를 숨김. [툴바](https://82editor.com/docs/toolbar/) 참고 |
| `more` | toolbar item | - | 툴바 문자열에서 이 뒤에 오는 버튼은 ⋯ 메뉴로 |

---

# 에디터 크기

> 높이, 내용만큼 늘어나기, 크기 조절 손잡이, 전체화면, 안내 글.

Source: https://82editor.com/docs/editor-size/

편집 영역의 높이를 정합니다. 높이를 고정하거나, 내용만큼 늘어나게 하거나, 쓰는 사람이 직접 늘리고 전체화면으로 펼치게 할 수 있습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold color | bulletList | link image | fullscreen',
  height: 'auto',
  minHeight: 120,
  maxHeight: 320,
  placeholder: '문의 내용을 적어 주세요',
});
```

위 에디터는 비어 있어서 안내 글이 보입니다. 줄을 늘려 쓰면 320px까지 커지고 그 뒤로는 안에서 스크롤됩니다. 툴바 끝 버튼이나 `Ctrl`+`Shift`+`F` 로 전체화면을 열고 `Esc` 로 닫습니다.

## 높이 정하기

- 아무것도 주지 않으면 편집 영역은 최소 300px이고, 내용이 많아지면 페이지와 함께 길어집니다. 툴바는 위에 붙어 따라옵니다.
- `height: 400` 처럼 숫자를 주면 높이가 고정되고 넘치는 내용은 편집 영역 안에서 스크롤됩니다.
- `height: 'auto'` 는 내용만큼만 커집니다. `minHeight` 로 처음 크기를, `maxHeight` 로 더 커지지 않을 높이를 정하세요. `maxHeight` 를 넘으면 안에서 스크롤됩니다.
- `minHeight` 와 `maxHeight` 는 다른 방식과도 같이 쓸 수 있습니다. 숫자는 모두 px입니다.

```js
// 댓글창: 작게 시작해서 늘어나기
createEditor('#comment', { toolbar: 'minimal', height: 'auto', minHeight: 80, maxHeight: 240 });

// 관리자 글쓰기: 고정 높이
createEditor('#editor', { height: 500 });
```

## 크기 조절 손잡이

상태바 오른쪽 끝의 손잡이를 끌면 높이를 바꿉니다 (가장 작게 120px). `resizable: false` 면 손잡이가 없고, `height: 'auto'` 일 때도 나오지 않습니다. 손잡이는 상태바 안에 있어서 `statusbar: false` 면 같이 숨습니다. 마우스로 끄는 기능이라 휴대폰에서는 쓰지 않습니다.

## 전체화면

- 툴바 항목 이름은 `fullscreen` 입니다. `board` 프리셋에서는 ⋯ 메뉴에, `full` 프리셋에서도 ⋯ 메뉴 쪽에 있습니다.
- `Ctrl`+`Shift`+`F` (맥은 `⌘`+`Shift`+`F`) 로 켜고 끄고, `Esc` 로 닫습니다.
- 전체화면에서는 에디터가 창 전체를 덮고 페이지 스크롤을 막습니다. 글은 가운데 최대 860px 폭으로 보여서 넓은 모니터에서도 읽기 편합니다.
- 읽기 전용일 때도 쓸 수 있습니다.

```js
editor.toggleFullscreen();      // 켜기·끄기
editor.toggleFullscreen(false); // 끄기

editor.on('fullscreen', (open) => {
  document.querySelector('.site-header').hidden = open;
});
```

## 안내 글 (placeholder)

편집 영역이 비어 있을 때 흐린 글씨로 보입니다. 주지 않으면 화면 언어의 기본 문구("내용을 입력하세요", 영어는 "Start writing…")가 나옵니다. 이 글은 화면 읽기 프로그램이 읽는 편집 영역 이름(`aria-label`)으로도 쓰이니 무엇을 쓰는 칸인지 알 수 있게 적으세요. 저장되는 HTML에는 들어가지 않습니다.

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `height` | `number \| 'auto'` | - | 숫자면 고정 높이(px), `'auto'` 면 내용만큼. 안 주면 최소 300px에서 페이지와 함께 길어짐 |
| `minHeight` | `number` | `300` | 편집 영역 최소 높이(px). `height` 를 숫자로 줬거나 `'auto'` 면 기본 최소값은 없음 |
| `maxHeight` | `number` | - | 이보다 커지지 않고 안에서 스크롤 |
| `resizable` | `boolean` | `true` | 상태바의 높이 조절 손잡이. `height: 'auto'` 면 없음 |
| `placeholder` | `string` | 언어별 기본 문구 | 비어 있을 때 보이는 안내 글, 편집 영역의 이름 |
| `statusbar` | `boolean` | `true` | 글자 수 상태바. 끄면 크기 조절 손잡이도 사라짐 |
| `fullscreen` | toolbar item | - | 전체화면 켜기·끄기 (`Ctrl`+`Shift`+`F`) |

---

# 본문 모양 맞추기

> contentStyle 로 보기 화면과 같은 글꼴·크기·줄간격, 글꼴·크기·줄간격·색 목록 바꾸기.

Source: https://82editor.com/docs/content-style/

쓰는 화면과 게시판 보기 화면이 다르게 보이면 쓰는 사람이 헷갈립니다. `contentStyle` 로 편집 영역에 보기 화면의 CSS를 넣고, 글꼴·크기·줄간격·글자색 메뉴의 목록은 사이트에 맞게 바꾸세요.

```js
createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold color',
  contentStyle: `
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    p { margin: 0 0 1em; }
    h2 { padding-bottom: 6px; border-bottom: 2px solid #333; }
  `,
  fontFamilies: [
    '본문=Malgun Gothic, sans-serif',
    '명조=Batang, serif',
    '고정폭=Courier New, monospace',
  ],
  fontSizes: [10, 12, 14, 18, 24],
  fontSizeUnit: 'px',
  lineHeights: [140, 160, 200],
  colors: ['#333333', '#888888', '#d6336c', '#1c7ed6', '#2b8a3e'],
});
```

## contentStyle

문자열로 준 CSS는 이 에디터의 편집 영역 안에만 적용됩니다. 에디터가 CSS 중첩으로 `#에디터ID .e82-content { … }` 안에 감싸 넣기 때문입니다. 그래서 두 가지를 쓸 수 있습니다.

- `font-size: 15px;` 처럼 바로 쓴 선언은 편집 영역 전체(본문)에 붙습니다.
- `p { … }`, `img { … }`, `.lead { … }` 처럼 쓴 규칙은 편집 영역 안의 요소에 붙습니다.
- `body { … }` 는 편집 영역 안에 body 가 없어서 아무 효과가 없습니다. 본문 전체 설정은 선언으로 바로 쓰세요.
- 같은 페이지에 에디터가 여럿이어도 서로 섞이지 않고, 사이트의 다른 부분에도 새지 않습니다.

```js
createEditor('#editor', {
  contentStyle: `
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 10pt;
    line-height: 1.6;
    img { max-width: 100%; }
    table td { border: 1px solid #ccc; }
  `,
});
```

> contentStyle 은 쓰는 화면에만 적용되고 저장되는 HTML에는 들어가지 않습니다. 보기 화면에도 같은 CSS를 두세요. 82editor 스타일시트를 보기 화면에 불러오고 글을 `<div class="e82-view">` 로 감싸면 제목·목록·표·인용 같은 기본 모양이 편집 화면과 같아집니다.

에디터 전체의 기본 글자 크기와 줄간격은 CSS 변수로도 바꿀 수 있습니다. 툴바·대화상자 색은 [테마](https://82editor.com/docs/theming/) 문서를 보세요.

```css
.e82 { --e82-content-size: 15px; --e82-line: 1.6; }
```

## 메뉴 목록 바꾸기

- `fontFamilies` 글꼴 메뉴. `'보일 이름=CSS 글꼴'` 형식이고, `=` 가 없으면 첫 글꼴 이름을 그대로 보여 줍니다. 기본 목록은 Pretendard, 맑은 고딕, 나눔고딕, 나눔명조, 굴림, 돋움, 바탕, 궁서, Arial, Georgia, Times New Roman, Courier New 입니다. 방문자 컴퓨터에 없는 글꼴은 다음 글꼴로 보이니 웹폰트는 사이트에서 불러오세요.
- `fontSizes` 글자 크기 메뉴의 숫자. 단위는 `fontSizeUnit` (기본 `pt`, `px` 도 가능). 기본은 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36 입니다.
- `lineHeights` 줄간격 메뉴의 퍼센트 숫자. 기본은 100, 130, 150, 160, 180, 200, 250 이고, 고르면 문단에 `line-height: 160%` 처럼 들어갑니다.
- `colors` 글자색 팔레트. 기본은 검정부터 분홍까지 13가지입니다. 팔레트 아래 "직접 고르기"와 최근 쓴 색은 그대로 있습니다. 글자를 골랐을 때 뜨는 작은 툴바의 글자색·배경색 팔레트도 이 목록을 씁니다.

각 메뉴 맨 위의 "기본" 항목을 고르면 지정한 글꼴·크기·줄간격이 지워지고 contentStyle 의 값으로 돌아갑니다.

## 저장되는 HTML

```html
<p style="line-height: 160%">
  <span style="font-family: Batang, serif; font-size: 18px; color: #d6336c">강조한 글</span>
</p>
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `contentStyle` | `string` | - | 편집 영역에만 적용할 CSS. 선언은 본문 전체에, 규칙은 안의 요소에 |
| `fontFamilies` | `string[]` | 한국어 글꼴 12개 | `'이름=CSS 글꼴'` 목록 (`fontFamily` 메뉴) |
| `fontSizes` | `number[]` | `[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36]` | 글자 크기 메뉴 (`fontSize`) |
| `fontSizeUnit` | `'pt' \| 'px'` | `'pt'` | 글자 크기 단위 |
| `lineHeights` | `number[]` | `[100, 130, 150, 160, 180, 200, 250]` | 줄간격 메뉴, 퍼센트 (`lineHeight`) |
| `colors` | `string[]` | 13가지 색 | 글자색 팔레트 (`color`) |

---

# 스타일 메뉴

> 사이트에 정해 둔 클래스를 메뉴에서 골라 붙이기 (styles 옵션).

Source: https://82editor.com/docs/styles/

사이트에 "머리말", "안내 박스" 같은 정해진 모양이 있으면 `styles` 로 메뉴를 만드세요. 쓰는 사람은 글자색·크기를 하나하나 고르지 않고 이름으로 고르고, 저장되는 HTML에는 사이트의 클래스가 남습니다.

```js
createEditor('#editor', {
  toolbar: 'styles | bold | bulletList',
  styles: [
    { title: '머리말', block: 'p', className: 'lead' },
    { title: '소제목', block: 'h3', className: 'sub' },
    { title: '안내 박스', block: 'p', className: 'box' },
    { title: '형광펜', inline: 'mark', className: 'hl' },
    { title: '흐린 글씨', inline: 'span', style: 'color: #868e96' },
  ],
  contentStyle: `
    .lead { font-size: 1.15em; color: #495057; }
    .sub { padding-left: 10px; border-left: 4px solid #2f6fed; }
    .box { padding: 12px 16px; background: #f1f3f5; border-radius: 8px; }
    .hl { background: #fff3bf; }
  `,
});
```

## 항목 만들기

`styles` 의 각 항목은 아래 값을 가집니다. `className` 과 `style` 중 하나는 있어야 메뉴에서 현재 스타일을 알아봅니다.

- `title` 메뉴에 보일 이름
- `block` 문단 스타일. 고른 문단을 이 태그로 바꾸고 클래스를 붙입니다 (`'p'`, `'h2'`, `'h3'` 등).
- `inline` 글자 스타일. 고른 글자를 이 태그로 감쌉니다 (`'span'`, `'mark'`, `'small'` 등). 아무것도 고르지 않았으면 하지 않습니다.
- `className` 붙일 클래스 하나. 글자·숫자·`-`·`_` 로 40자까지.
- `style` 클래스 대신 넣을 인라인 CSS. `'color: #868e96'` 처럼 `속성: 값` 을 `; ` 로 이어 쓰세요.

`block` 과 `inline` 을 둘 다 빼면 지금 문단(또는 목록 항목·제목·인용)에 클래스만 붙입니다.

## 켜고 끄기

이미 그 스타일이 붙은 곳에서 같은 항목을 다시 고르면 클래스가 빠집니다. 메뉴 버튼에는 커서 위치의 스타일 이름이 보이고, 메뉴에서도 체크 표시가 붙습니다. 메뉴 항목은 `style` 이 있으면 그 모양으로 미리 보여 줍니다.

## 툴바와 프리셋

- 툴바 항목 이름은 `styles` 입니다. `full` 프리셋의 ⋯ 메뉴에 들어 있고, `board` 에는 없으니 툴바 문자열에 직접 넣으세요.
- `styles` 옵션이 비어 있으면 툴바에 넣어도 버튼이 나오지 않습니다.

## 클래스와 보안 필터

82editor는 원래 붙여넣기나 `setHTML` 로 들어온 `class` 를 모두 지웁니다. `styles` 에 적은 클래스만 예외로 남깁니다. 그래서 다른 사이트에서 붙여 넣은 글에 같은 이름의 클래스가 있으면 그것도 남는다는 점만 알아 두세요.

> `style` 로 넣은 CSS도 보안 필터를 거칩니다. 글자색·배경색·여백·테두리·글자 크기 같은 흔한 속성만 남고 나머지는 저장할 때 빠집니다. 모양이 복잡하면 클래스로 만들고 CSS는 사이트에 두세요.

클래스의 모양은 에디터가 모릅니다. 편집 화면에도 보이게 하려면 위 데모처럼 같은 CSS를 [contentStyle](https://82editor.com/docs/content-style/) 에 넣으세요.

## 저장되는 HTML

```html
<p class="lead">머리말 스타일이 붙은 문단입니다.</p>
<h3 class="sub">소제목</h3>
<p>글자 일부를 고르고 <mark class="hl">형광펜</mark>을 고르면…</p>
<p><span style="color: #868e96">흐린 글씨</span></p>
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `styles` | `StyleFormat[]` | - | 스타일 메뉴 항목 목록. 여기 적은 클래스는 필터를 통과 |
| `title` | `string` | - | 메뉴에 보일 이름 (필수) |
| `block` | `string` | - | 문단을 바꿀 태그 |
| `inline` | `string` | - | 고른 글자를 감쌀 태그 |
| `className` | `string` | - | 붙일 클래스 |
| `style` | `string` | - | 붙일 인라인 CSS |
| `styles` | toolbar item | - | 스타일 메뉴 버튼 |

---

# 접근성

> 접근성 검사 버튼, 키보드만으로 쓰기, 화면 읽기 프로그램.

Source: https://82editor.com/docs/accessibility/

82editor는 키보드만으로 모든 버튼과 메뉴를 쓸 수 있고, 화면 읽기 프로그램이 버튼 이름과 상태를 읽도록 만들어져 있습니다. 쓴 글에 대체 텍스트 없는 사진 같은 문제가 있는지는 접근성 검사 버튼으로 찾습니다.

```js
createEditor('#editor', {
  toolbar: 'heading | bold | link image table | a11y help',
});
```

## 접근성 검사

툴바 항목 이름은 `a11y` 입니다. `board` 와 `full` 프리셋의 ⋯ 메뉴에 있습니다. 누르면 지금 글을 살펴보고 문제 목록을 보여 줍니다.

| 찾는 것 | 바로 고치기 |
| --- | --- |
| 대체 텍스트(`alt`)가 없는 사진 | 목록 안의 입력칸에 바로 적으면 들어갑니다 |
| 머리글 칸(`th`)이 없는 표 | "머리글 행" 버튼으로 첫 행을 머리글로 바꿉니다 |
| 제목 단계를 건너뛴 곳 (제목 1 다음에 바로 제목 3) | - |
| 글자가 없는 링크 | - |

목록의 항목을 누르면 대화상자가 닫히고 그 자리로 스크롤합니다. 사진이면 사진을 고른 상태가 됩니다. 문제가 없으면 "문제가 없어요"라고 나옵니다.

## 키보드로 쓰기

- 툴바는 `Tab` 한 번에 들어갑니다. 안에서는 `←` `→` 로 버튼을, `Home` `End` 로 처음과 끝 버튼으로 갑니다. 툴바를 지나 `Tab` 을 한 번 더 누르면 편집 영역입니다.
- 편집 영역에서 `Shift`+`Tab` 을 누르면 툴바로 돌아갑니다. 다만 목록 안에서는 내어쓰기, 표 안에서는 앞 칸 이동으로 쓰입니다.
- 보통 문단에서는 `Tab` 이 다음 입력칸으로 넘어갑니다. 목록에서는 들여쓰기, 표에서는 다음 칸, 코드 블록에서는 공백 두 칸입니다.
- 드롭다운 메뉴는 열면 첫 항목에 초점이 갑니다. `↑` `↓` 로 움직이고 `Enter` 로 고르며 `Esc` 로 닫으면 초점이 버튼으로 돌아옵니다.
- 대화상자(링크, 사진, 검사 결과 등)는 열리면 첫 입력칸에 초점이 가고, `Tab` 이 대화상자 밖으로 나가지 않습니다. `Esc` 로 닫으면 원래 자리로 초점이 돌아옵니다.
- `Ctrl`+`/` 로 단축키 목록을 엽니다. 전체 목록은 [단축키](https://82editor.com/docs/shortcuts/) 문서에 있습니다.

## 화면 읽기 프로그램

- 편집 영역은 `role="textbox"`, `aria-multiline="true"` 이고, `placeholder` 가 이름(`aria-label`)으로 쓰입니다. 무엇을 쓰는 칸인지 알 수 있게 적으세요.
- 툴바는 `role="toolbar"` 입니다. 아이콘 버튼마다 화면 언어로 된 이름이 있고, 굵게처럼 켜고 끄는 버튼은 `aria-pressed` 로 상태를 알립니다.
- 메뉴를 여는 버튼은 `aria-haspopup`, ⋯ 버튼은 `aria-expanded` 로 열림 상태를 알립니다. 메뉴 항목은 `role="menuitemradio"` 와 `aria-checked` 로 지금 고른 것을 알립니다.
- 상태바의 글자 수, 찾기 결과 수, 알림 메시지는 `aria-live="polite"` 로 읽힙니다.

## 저장되는 글의 접근성

사진을 넣을 때 대체 텍스트를 적을 수 있고, 사진을 누르면 나오는 사진 막대에서도 바꿀 수 있습니다. 표는 표 막대에서 첫 행을 머리글(`th`)로 바꿉니다. 글을 올리기 전에 접근성 검사를 한 번 눌러 보는 습관이면 충분합니다.

```html
<p><img src="/files/map.png" alt="본사 오시는 길 지도"></p>
<table>
  <thead><tr><th>이름</th><th>전화</th></tr></thead>
  <tbody><tr><td>홍길동</td><td>010-0000-0000</td></tr></tbody>
</table>
```

## 옵션

| 이름 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `a11y` | toolbar item | - | 접근성 검사 대화상자 |
| `help` | toolbar item | - | 단축키 목록 (`Ctrl`+`/`) |
| `placeholder` | `string` | 언어별 기본 문구 | 편집 영역의 이름(`aria-label`)으로도 쓰임 |
| `language` | `'ko' \| 'en' \| 'ja' \| 'zh'` | 문서 lang | 버튼 이름과 안내 문구의 언어. [다국어](https://82editor.com/docs/i18n/) 참고 |

---

# React

> React 컴포넌트로 82editor 쓰기.

Source: https://82editor.com/docs/react/

```sh
npm i @82editor/core @82editor/react
```

```js
import { useState } from 'react';
import { Editor82 } from '@82editor/react';
import '@82editor/core/styles.css';

export function WriteForm() {
  const [html, setHtml] = useState('');
  return <Editor82 value={html} onChange={setHtml} options={{ toolbar: 'board', height: 400 }} />;
}
```

- `value` 와 `onChange` 로 제어 컴포넌트처럼 씁니다. 바깥에서 `value` 를 바꾸면 에디터 내용도 바뀝니다.
- 나머지 props 는 [옵션](https://82editor.com/docs/options/)과 같습니다.
- `ref` 로 에디터 인스턴스를 받습니다.
- Next.js 에서도 마운트된 뒤에만 만들어지므로 SSR 에서 문제가 없습니다.

## ref 로 인스턴스 쓰기

```js
import { useRef } from 'react';
import { Editor82, type Editor } from '@82editor/react';

function Write() {
  const ref = useRef<Editor>(null);
  return (
    <>
      <Editor82 ref={ref} options={{ toolbar: 'board' }} />
      <button onClick={() => alert(ref.current?.getStats().chars)}>글자 수</button>
    </>
  );
}
```

---

# Vue

> Vue 컴포넌트로 82editor 쓰기.

Source: https://82editor.com/docs/vue/

```sh
npm i @82editor/core @82editor/vue
```

```html
<script setup>
import { ref } from 'vue';
import { Editor82 } from '@82editor/vue';
import '@82editor/core/styles.css';

const html = ref('');
</script>

<template>
  <Editor82 v-model="html" :options="{ toolbar: 'board', height: 400 }" />
</template>
```

- `v-model` 로 HTML을 주고받습니다.
- 옵션은 props 로 넘기고, 이벤트는 `@change`, `@ready` 처럼 받습니다.
- Nuxt 에서는 `<ClientOnly>` 로 감싸세요.

---

# Svelte

> Svelte 컴포넌트로 82editor 쓰기.

Source: https://82editor.com/docs/svelte/

```sh
npm i @82editor/core @82editor/svelte
```

```html
<script>
  import { Editor82 } from '@82editor/svelte';
  import '@82editor/core/styles.css';

  let html = $state('');
</script>

<Editor82 bind:value={html} options={{ toolbar: 'board', height: 400 }} />
```

- Svelte 5 컴포넌트입니다. `bind:value` 로 HTML을 주고받습니다.
- 컴포넌트 대신 `use:editor82` 액션도 있습니다.

## 액션으로 쓰기

```html
<script>
  import { editor82 } from '@82editor/svelte';
</script>

<div use:editor82={{ toolbar: 'basic', onChange: (html) => console.log(html) }}></div>
```

---

# Angular

> Angular 컴포넌트로 82editor 쓰기.

Source: https://82editor.com/docs/angular/

```sh
npm i @82editor/core @82editor/angular
```

```js
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Editor82Component } from '@82editor/angular';

@Component({
  selector: 'app-write',
  standalone: true,
  imports: [FormsModule, Editor82Component],
  template: `<editor-82 [(ngModel)]="html" [options]="{ toolbar: 'board', height: 400 }"></editor-82>`,
})
export class WriteComponent {
  html = '';
}
// angular.json → "styles": ["node_modules/@82editor/core/dist/styles.css"]
```

- standalone 컴포넌트이며 `ControlValueAccessor` 를 구현해 `ngModel` 과 reactive forms 에서 그대로 씁니다.
- `(change)`, `(ready)` 출력이 있습니다.
- Angular 17 이상.

## Reactive forms

```js
form = new FormGroup({ content: new FormControl('') });
// <form [formGroup]="form"><editor-82 formControlName="content"></editor-82></form>
```

---

# 옵션

> createEditor 에 넘기는 모든 옵션.

Source: https://82editor.com/docs/options/

모든 옵션은 선택입니다. 아무것도 넘기지 않으면 게시판용 툴바, 한국어(문서 언어가 영어면 영어), 밝은 테마로 열립니다.

## 내용과 크기

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `value` | '' | 처음 넣을 HTML |
| `placeholder` | '내용을 입력하세요' | 비어 있을 때 보이는 안내 글 (기본값은 언어별 문구) |
| `height` | - | 편집 영역 높이(px, 넘치면 스크롤). 주지 않으면 최소 300px(`minHeight`)에서 내용만큼 늘어남. `'auto'` 는 `minHeight`·`maxHeight` 사이에서 늘어남 |
| `minHeight` / `maxHeight` | - | `'auto'` 일 때 최소·최대 높이 |
| `resizable` | true | 아래 손잡이로 높이 조절 |
| `readOnly` | false | 읽기 전용 (툴바는 남지만 내용을 바꾸는 명령은 동작하지 않음) |
| `maxLength` | - | 글자 수 제한. 넘으면 상태바가 빨갛게 바뀌고 `maxlength` 이벤트 |
| `statusbar` | true | 글자 수·바이트 상태바 |
| `enterMode` | 'p' | `'br'` 이면 Enter는 줄바꿈(`<br>`), Shift+Enter가 새 문단. 목록·제목은 그대로 |
| `confirmLeave` | false | 저장하지 않은 내용이 있으면 페이지를 떠날 때 물어봄 (`isDirty()` · `markClean()`) |
| `revisions` | 이번 세션만 | `true` 또는 `{ key, max: 20, interval: 60000 }` — 이전 버전을 브라우저에 남기고 비교·되돌리기 |
| `dragHandle` | true | 블록 왼쪽 손잡이로 끌어 옮기기 (터치 화면에선 안 보임, Alt+Shift+↑/↓ 는 항상) |
| `imageTray` | false | 에디터 아래 사진 목록: 누르면 이동, 끌어서 순서 바꾸기, 삭제, 지운 사진 다시 넣기 |

## 툴바와 화면

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `toolbar` | 'board' | `'basic' \| 'board' \| 'full' \| 'minimal'`, 문자열 목록, 또는 `false`. [툴바](https://82editor.com/docs/toolbar/) 참고 |
| `toolbarMode` | 'more' | 넘치는 버튼을 ⋯ 메뉴로 접기(`'more'`) 또는 줄바꿈(`'wrap'`) |
| `toolbarDensity` | 'normal' | `'compact'` 로 툴바 아이콘·그룹 간격을 촘촘하게 (휴대폰에서도 적용, 버튼은 누르기 쉬운 32px) |
| `toolbarSticky` | true | 스크롤해도 툴바가 위에 붙어 있음 |
| `bubbleToolbar` | true | 글자를 고르면 떠오르는 작은 서식 툴바 (모바일에선 꺼짐) |
| `theme` | 'light' | `'light' \| 'dark' \| 'auto'` |
| `language` | 문서 lang | `'ko' \| 'en' \| 'ja' \| 'zh'` |
| `locale` | - | 화면 문구 일부만 바꾸기 |
| `contentStyle` | - | 편집 영역에 넣을 CSS (보기 화면과 똑같이 보이게) |

## 글꼴과 문단

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `fontFamilies` | 맑은 고딕, 나눔고딕, 굴림, 돋움, 바탕, 궁서, Pretendard … | 글꼴 목록 |
| `fontSizes` | 8 9 10 11 12 14 16 18 20 24 28 36 | 글자 크기 목록 |
| `fontSizeUnit` | 'pt' | `'pt'` 또는 `'px'` |
| `lineHeights` | 100 130 160 180 200 | 줄간격(%) 목록 |
| `colors` | 기본 팔레트 | 글자색·배경색 팔레트 |

## 입력 도우미

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `markdownShortcuts` | true | `## `, `- `, `**굵게**` 같은 입력 단축 |
| `slashMenu` | true | 빈 줄에서 `/` 로 여는 명령 메뉴 |
| `autosave` | false | `true` 또는 `{ key, interval }`. 작성 중인 글을 브라우저에 저장하고 다시 열면 복구 안내 |
| `templates` | - | `{ title, html, description? }[]` |
| `mentions` | - | `{ trigger: '@', search(q) }` |
| `shortcuts` | - | `{ keys: 'Mod+Shift+K', run(editor) }[]` |
| `autoLink` | true | 입력한 웹·메일 주소를 스페이스나 Enter 뒤에 링크로 바꿈 (바로 Ctrl+Z 하면 되돌림) |
| `autoReplace` | true | `(c)`→©, `->`→→, `(주)`→㈜ 등. 객체로 규칙 추가, 값을 `''` 로 두면 그 규칙은 끔 |
| `markdownPaste` | true | 마크다운 글(제목·목록·표·코드)을 붙이면 서식으로 바꿈. 알림의 [글자 그대로] 로 되돌림 |
| `styles` | - | `{ title, block?, inline?, className?, style? }[]` — 사이트 CSS의 class 를 고르는 스타일 메뉴 (그 class 만 저장 HTML에 남음) |
| `mergeTags` | - | `{ label, value: '{{name}}' }[]` — 편집 중엔 칩, 저장하면 글자 그대로 (서버가 채움). 직접 쳐도 칩이 됨 |

## 이미지와 붙여넣기

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `uploadImage` | - | `(file, { onProgress }) => Promise<url>`. 없으면 base64로 넣음 |
| `uploadUrl` | - | 함수 대신 URL로 올리기. 응답 JSON의 `url` 또는 `location` |
| `uploadHeaders` / `uploadField` | - / 'file' | 업로드 요청 헤더와 필드 이름 |
| `imageMaxSize` | - | 바이트 단위 최대 크기 (줄인 뒤의 크기로 검사) |
| `imageResize` | { maxWidth: 1600 } | 가로가 이보다 큰 JPEG·PNG·WebP는 올리기 전에 브라우저에서 줄임 (`quality` 0.85). `format: 'webp'` 면 모두 WebP로 바꿔 올림. `false` 면 원본 그대로. 아이폰 HEIC 사진은 읽을 수 있는 브라우저(사파리)에서 JPG로 바꿈 |
| `imageAccept` | 'image/*,.heic,.heif' | 파일 선택 창 형식 |
| `responsiveOutput` | true | 저장 HTML의 이미지에 `max-width:100%; height:auto`와 원래 가로·세로 크기, 표에는 옆으로 스크롤되는 상자 → 사이트 CSS 없이도 휴대폰에서 넘치지 않음 |
| `lazyImages` | true | 저장 HTML에서 첫 이미지를 뺀 나머지에 `loading="lazy"` |
| `linkRel` | - | 저장할 때 모든 웹 링크에 붙일 rel. 방문자 글이면 `'nofollow ugc'` |
| `pasteMode` | 'clean' | `'clean' \| 'plain' \| 'keep'` |
| `allowedTags` / `allowedAttributes` | 기본 허용 목록 | 거르기 규칙 덮어쓰기 |
| `allowedIframeHosts` | - | 기본 동영상 사이트·구글 지도 외에 허용할 iframe 주소 (`'host'` 또는 `'host/경로'`). 걸러지면 알림으로 알려 줌 |
| `fetchLinkMeta` | - | `(url) => Promise<{ title, description?, image?, siteName? }>` — 링크 카드에 제목·사진 (페이지 읽기는 서버에서) |
| `uploadFile` | - | `(file, { onProgress }) => Promise<url>` — 파일 첨부. 없으면 `uploadUrl` 로 올림 |
| `fileMaxSize` / `fileAccept` | - | 첨부 최대 크기(바이트)와 형식 (예: `'.pdf,.hwp,.zip'`) |

## 기타

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `plugins` | - | [플러그인](https://82editor.com/docs/plugins/) 목록 |
| `telemetry` | true | 하루 한 번 도메인과 버전만 82editor.com에 알림. `false` 로 끔 |
| `onChange` / `onReady` / `onFocus` / `onBlur` | - | 이벤트 단축 ([이벤트](https://82editor.com/docs/events/)) |

---

# API

> 에디터 인스턴스의 메서드.

Source: https://82editor.com/docs/api/

| 메서드 | 설명 |
| --- | --- |
| `getHTML()` | 저장용 깨끗한 HTML (에디터 전용 표시는 빠짐) |
| `getHTML({ inlineStyles: true })` | 메일·뉴스레터용: 글꼴·크기·여백·테두리를 style 속성으로 써 넣은 HTML |
| `getMarkdown()` / `setMarkdown(md)` | 마크다운으로 꺼내기·넣기 (마크다운에 없는 것은 HTML 로 남김) |
| `moveBlock(block, before)` | 맨 위 단계 블록 옮기기 (실행 취소 한 번) |
| `setHTML(html)` | 내용 바꾸기 (거르기 적용, 실행 취소 기록에 남음) |
| `getText()` | 글자만 |
| `insertHTML(html)` / `insertText(text)` | 커서 자리에 넣기 |
| `isEmpty()` | 빈 글인지 |
| `getStats()` | `{ chars, charsNoSpace, words, bytes, paragraphs }` |
| `focus()` / `blur()` | 포커스 |
| `undo()` / `redo()` | 실행 취소·다시 실행 |
| `exec(command, value?)` | 명령 실행. 예: `exec('bold')`, `exec('fontSize', '14pt')` |
| `queryState(command)` | 지금 켜져 있는지 (굵게 등) |
| `setReadOnly(bool)` / `setTheme(theme)` | 읽기 전용·테마 바꾸기 |
| `addButton(name, spec)` / `addCommand(name, fn)` | 버튼·명령 추가 |
| `on(event, fn)` / `off(event, fn)` | [이벤트](https://82editor.com/docs/events/) |
| `isDirty()` / `markClean()` | 저장하지 않은 변경이 있는지 / 지금 내용을 저장된 것으로 표시 (저장 요청이 끝난 뒤 부르기, textarea 폼 제출은 자동) |
| `getImages()` | 본문에 있는 이미지 주소 목록 |
| `getUnusedUploads()` | 이 에디터에서 올렸지만 지금 본문에 없는 이미지 주소. 저장할 때 서버로 보내 지우면 쓰레기 파일이 안 쌓임 |
| `destroy()` | 에디터 없애기 (textarea면 다시 보임) |
| `root` / `content` | 바깥 요소 / 편집 영역 요소 |

```js
const ed = createEditor('#editor');
ed.exec('heading', 'h2');
ed.insertHTML('<p>새 문단</p>');
console.log(ed.getStats().bytes, 'bytes');
```

---

# 이벤트

> change, paste, upload 등 에디터가 보내는 이벤트.

Source: https://82editor.com/docs/events/

| 이벤트 | 값 | 언제 |
| --- | --- | --- |
| `change` | HTML | 내용이 바뀐 뒤 (150ms 묶음, 한글 조합 중엔 보내지 않음) |
| `input` | - | 입력할 때마다 |
| `focus` / `blur` | - | 포커스 |
| `ready` | - | 처음 그려진 뒤 |
| `selectionchange` | - | 커서·선택이 바뀔 때 |
| `paste` | `{ html, raw, source }` | 붙여넣기 정리 후, 넣기 전. `source` 는 `'word' \| 'excel' \| 'hwp' \| 'gdocs' \| 'web' \| 'text'`. 핸들러가 문자열을 돌려주면 그 HTML을 넣음 |
| `upload:start` · `upload:progress` · `upload:success` · `upload:error` | `{ file, … }` | 이미지 업로드 단계 |
| `image:remove` | `{ src }` | 이미지가 본문에서 빠짐 (실행 취소로 돌아올 수 있으니 지우기는 저장할 때 `getUnusedUploads()`로) |
| `fullscreen` / `source` | boolean | 전체화면·소스 보기 전환 |
| `maxlength` | `{ length, max }` | 글자 수 제한을 넘었을 때 |
| `destroy` | - | 없어지기 직전 |

```js
editor.on('change', (html) => saveDraft(html));

// 붙여넣기 출처별로 손보기
editor.on('paste', ({ html, source }) => {
  if (source === 'hwp') return html.replace(/font-family:[^;"]+;?/g, '');
});
```

---

# 플러그인과 명령

> 버튼·명령·단축키·붙여넣기 규칙을 묶어 플러그인으로 만들기.

Source: https://82editor.com/docs/plugins/

플러그인은 `{ name, init(editor) }` 객체입니다. `init` 에서 버튼·명령·이벤트를 붙이고, 정리할 일이 있으면 함수를 돌려주세요. 에디터가 없어질 때 불립니다.

```js
const wordCountLimit = {
  name: 'word-limit',
  init(editor) {
    const check = () => {
      const { words } = editor.getStats();
      editor.root.classList.toggle('is-over', words > 500);
    };
    editor.on('change', check);
    return () => editor.off('change', check);
  },
};

const stamp = {
  name: 'stamp',
  init(editor) {
    editor.addCommand('stamp', (ed) => ed.insertHTML('<p><mark>확인 완료</mark></p>'));
    editor.addButton('stamp', { icon: '확인', title: '확인 도장', onAction: (ed) => ed.exec('stamp') });
  },
};

createEditor('#editor', {
  plugins: [wordCountLimit, stamp],
  toolbar: 'board | stamp',
  shortcuts: [{ keys: 'Mod+Shift+S', run: (ed) => ed.exec('stamp') }],
});
```

---

# 스마트●●터 2에서 옮기기

> 네이버 스마트●●터 2.0 을 쓰는 게시판을 82editor로 바꾸는 순서.

Source: https://82editor.com/docs/migrate-se2/

스마트●●터 2.0 은 textarea를 숨기고, 전송 직전에 `oEditors.getById['ir1'].exec('UPDATE_CONTENTS_FIELD', [])` 로 값을 옮깁니다. 82editor는 이 동기화를 자동으로 하므로 그 줄을 지우면 됩니다.

## 바꾸기 전

```html
<textarea name="ir1" id="ir1"></textarea>
<script src="/se2/js/service/HuskyEZCreator.js"></script>
<script>
  var oEditors = [];
  nhn.husky.EZCreator.createInIFrame({ oAppRef: oEditors, elPlaceHolder: 'ir1', sSkinURI: '/se2/Smart●●itor2Skin.html' });
  function submitContents() {
    oEditors.getById['ir1'].exec('UPDATE_CONTENTS_FIELD', []);
    document.forms[0].submit();
  }
</script>
```

## 바꾼 뒤

```html
<textarea name="ir1" id="ir1"></textarea>
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<script>
  Editor82.createEditor('#ir1', { toolbar: 'board', height: 400, uploadUrl: '/upload.php' });
  function submitContents() { document.forms[0].submit(); }
</script>
```

- 서버는 그대로 `ir1` 필드를 읽습니다.
- 기존 글은 그대로 열립니다. 스마트●●터가 만든 `<p><span style="font-family: 나눔고딕">` 형태도 유지됩니다.
- 사진 첨부 팝업 대신 [uploadUrl](https://82editor.com/docs/image-upload/) 하나면 됩니다. 응답은 `{"url": "..."}`.
- iframe 이 아니라 페이지 안에서 그려지므로 사이트 CSS와 섞이지 않게 `.e82` 아래로만 스타일이 들어갑니다.

---

# Sum●●●ote에서 옮기기

> jQuery 없이, 같은 textarea와 같은 업로드 서버로.

Source: https://82editor.com/docs/migrate-jquery-editor/

Sum●●●ote는 jQuery가 필요하고 값을 꺼낼 때 `sum●●●ote('code')` 를 부릅니다. 82editor는 의존성이 없고, textarea에 씌우면 폼 전송 때 값이 자동으로 들어갑니다.

## 바꾸기 전

```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="sum●●●ote-lite.min.css" rel="stylesheet">
<script src="sum●●●ote-lite.min.js"></script>
<textarea id="sum●●●ote" name="content"></textarea>
<script>
  $('#sum●●●ote').sum●●●ote({
    height: 400,
    callbacks: { onImageUpload: (files) => upload(files[0]) },
  });
  const html = $('#sum●●●ote').sum●●●ote('code');
</script>
```

## 바꾼 뒤

```html
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<textarea id="sum●●●ote" name="content"></textarea>
<script>
  const editor = Editor82.createEditor('#sum●●●ote', {
    height: 400,
    uploadImage: (file) => upload(file), // return the image URL
  });
  const html = editor.getHTML();
</script>
```

| Sum●●●ote | 82editor |
| --- | --- |
| `$(el).sum●●●ote('code')` | `editor.getHTML()` |
| `$(el).sum●●●ote('code', html)` | `editor.setHTML(html)` |
| `$(el).sum●●●ote('isEmpty')` | `editor.isEmpty()` |
| `$(el).sum●●●ote('destroy')` | `editor.destroy()` |
| `callbacks.onChange` | `editor.on('change', fn)` |
| `callbacks.onImageUpload` | `uploadImage(file) => url` |
| `toolbar: [[...]]` | `toolbar: 'board'` 또는 이름 목록 ([툴바](https://82editor.com/docs/toolbar/)) |
| `lang: 'ko-KR'` | `language: 'ko'` |

> jQuery를 Sum●●●ote 때문에만 불러왔다면 이제 지워도 됩니다.

---

# To●●t UI Editor 대안

> To●●t UI Editor 저장소가 보관(archive)된 뒤, WYSIWYG로 쓰던 화면을 옮기는 방법.

Source: https://82editor.com/docs/markdown-editor-alternative/

To●●t UI Editor(NHN) GitHub 저장소는 2026년 9월 보관(archive) 상태가 되어 더 이상 수정이 나오지 않습니다. 마크다운이 아니라 WYSIWYG 모드로 HTML을 저장하던 화면이라면 82editor로 그대로 옮길 수 있습니다.

## 바꾸기 전

```js
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/to●●tui-editor.css';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'wysiwyg',
  hooks: {
    addImageBlobHook: async (blob, callback) => callback(await upload(blob), ''),
  },
});
const html = editor.getHTML();
```

## 바꾼 뒤

```js
import { createEditor } from '@82editor/core';
import '@82editor/core/styles.css';

const editor = createEditor('#editor', {
  height: 500,
  uploadImage: (file) => upload(file), // URL을 돌려주면 됩니다
});
const html = editor.getHTML();
```

| To●●t UI Editor | 82editor |
| --- | --- |
| `editor.getHTML()` / `setHTML()` | `editor.getHTML()` / `setHTML()` |
| `hooks.addImageBlobHook` | `uploadImage(file) => url` |
| `editor.on('change', fn)` | `editor.on('change', fn)` (HTML이 인자로 옵니다) |
| `initialEditType: 'markdown'` | 마크다운 원문 저장은 하지 않습니다. 대신 `## `, `- ` 같은 마크다운 입력 단축을 지원합니다. |
| `@toast-ui/react-editor` | `@82editor/react` |

> 마크다운 원문을 그대로 저장해야 한다면 82editor보다는 마크다운 전용 에디터가 맞습니다.

---

# CK●●itor 4 대안

> 지원이 끝난(2023년 6월) CK●●itor 4를 쓰는 게시판을 키 없이 옮기는 방법.

Source: https://82editor.com/docs/legacy-editor-alternative/

CK●●itor 4는 2023년 6월 무료 지원이 끝났고, 이후 보안 수정은 유료 LTS로만 나옵니다. CK●●itor 5로 올리면 구조가 완전히 바뀌고 상용 사이트는 라이선스 키가 필요합니다. 게시판처럼 HTML을 저장하는 화면이라면 82editor가 더 가까운 대안입니다.

## 바꾸기 전

```html
<textarea name="content" id="content"></textarea>
<script src="/ck●●itor/ck●●itor.js"></script>
<script>
  CK●●ITOR.replace('content', { height: 400, filebrowserUploadUrl: '/upload.php' });
  // 전송 전: CK●●ITOR.instances.content.updateElement();
</script>
```

## 바꾼 뒤

```html
<textarea name="content" id="content"></textarea>
<link rel="stylesheet" href="https://82editor.com/cdn/v1.4.0/82editor.css">
<script src="https://82editor.com/cdn/v1.4.0/82editor.min.js"></script>
<script>
  const editor = Editor82.createEditor('#content', { height: 400, uploadUrl: '/upload.php' });
</script>
```

| CK●●itor 4 | 82editor |
| --- | --- |
| `CK●●ITOR.instances.x.getData()` | `editor.getHTML()` |
| `CK●●ITOR.instances.x.setData(html)` | `editor.setHTML(html)` |
| `updateElement()` | 필요 없음 (textarea 자동 동기화) |
| `filebrowserUploadUrl` | `uploadUrl` (응답 `{"url": "..."}`) |
| `editor.on('change', fn)` | `editor.on('change', fn)` |
| `config.toolbar` | `toolbar: 'board'` 또는 이름 목록 |

> CK●●itor 4의 업로드 응답은 `{"uploaded": 1, "url": "..."}` 형식이었는데, 82editor는 `url` 만 읽으므로 기존 업로드 서버를 그대로 써도 됩니다.

---

# 자주 묻는 질문

> 정말 무료인지, 회사 사이트에 써도 되는지, 데이터는 어디로 가는지.

Source: https://82editor.com/docs/faq/

## 정말 무료인가요? 회사 사이트에도요?

네. MIT 라이선스입니다. 상업용·사내용·납품용 모두 무료이고 라이선스 키도 없습니다. 출처 표기도 필수가 아닙니다 (LICENSE 파일만 지우지 말아 주세요).

## 작성한 글이 82editor.com 으로 가나요?

아니요. 글 내용은 어디에도 보내지 않습니다. 하루 한 번 어느 도메인에서 어느 버전을 쓰는지만 알립니다(사용 현황 집계). `telemetry: false` 로 끌 수 있고, localhost·사내 주소에서는 처음부터 보내지 않습니다.

## 인터넷이 안 되는 사내망에서도 되나요?

CDN 파일을 내려받아 내 서버에 두면 됩니다. 외부로 나가는 요청은 위 사용 현황 하나뿐이고, 사내 주소에서는 보내지 않습니다.

## 어떤 브라우저를 지원하나요?

최신 Chrome·Edge·Safari·Firefox, 삼성 인터넷, iOS·안드로이드 브라우저, 카카오톡 인앱 브라우저. Internet Explorer는 지원하지 않습니다.

## 버그는 어디에 알리나요?

[포럼](https://82editor.com/forum/)의 버그 게시판에 남겨 주세요. 재현 순서와 브라우저를 적어 주시면 빨리 고칩니다.