TOAST UI Editor: save Markdown while authors switch to WYSIWYG

Try that choice with a short invented release note:

## Library desk update

- The pickup shelf moves beside the return desk.
- Bring your confirmation number.

**Starts Monday.**

The heading, list, and emphasis give you something meaningful to compare after switching modes. A plain sentence would hide conversion problems.

Create an editor with an explicit starting format

In an existing JavaScript build, install a compatible @toast-ui/editor version and keep it pinned in the lockfile. Import its stylesheet as well as the constructor. The project's getting-started instructions cover package and CDN loading.

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const initialMarkdown = [
  '## Library desk update',
  '',
  '- The pickup shelf moves beside the return desk.',
  '- Bring your confirmation number.',
  '',
  '**Starts Monday.**'
].join('\n');

const editor = new Editor({
  el: document.querySelector('#release-editor'),
  height: '420px',
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  initialValue: initialMarkdown,
  usageStatistics: false
});

Provide the release-editor container in the page before this code runs. The height and preview layout are presentation choices; change them to suit the space available in your application.

The editor's declared API types distinguish markdown and wysiwyg modes, setMarkdown(), setHTML(), and the corresponding getters. Pay attention to the uppercase HTML spelling when following current API code; an older snippet using a different method name may target an earlier release.

Capture the source your destination expects

Connect your own labeled buttons and output fields to the instance:

document.querySelector('#edit-visually').addEventListener('click', () => {
  editor.changeMode('wysiwyg');
});

document.querySelector('#capture-markdown').addEventListener('click', () => {
  document.querySelector('#markdown-output').textContent = editor.getMarkdown();
});

document.querySelector('#capture-html').addEventListener('click', () => {
  document.querySelector('#html-output').textContent = editor.getHTML();
});

Use separate pre elements for markdown-output and html-output. Both contain source text for inspection. Neither capture uploads a file or saves a record. Your application's existing write operation needs to store the Markdown after the user confirms the change.

In WYSIWYG mode, change “Monday” to “Tuesday.” Capture Markdown and check that the revised day appears with emphasis. Capture HTML and check for the corresponding heading, two list items, and emphasized text. Exact whitespace and wrapper strings can vary; the useful comparison is whether the intended content and structure survived.

Test a round trip before importing a large document

Retain the original .md source. Load it, switch modes, make one small edit, capture Markdown, and compare the result in your repository's renderer. Start with any tables, fenced code, or embedded HTML that your actual document uses. Do not infer that arbitrary HTML and styling can make a lossless trip through a Markdown editing model.

If the destination is GitHub, the GitHub Markdown guide covers the renderer and repository context. A local editor preview and the repository's final page are separate places to inspect.

For a page whose visitors only read the note, TOAST UI provides a dedicated Viewer. Pass the saved Markdown to its initialValue; do not add a full editing interface just to display it. The viewer and editor also have different stylesheet entry points.

Keep the .md file as the maintained source when that is your team's format. Reopen the saved version in the destination, then check the changed day and the original two instructions before replacing the previous release note.