WYSIWYG Markdown Editor

Edits Markdown visually and saves plain Markdown files. It runs inside StandaloneEditor with the flavour WYSIWYGMarkDown, in the same way as the Simple HTML and Markdown editors. Open any file with ?pageName=/Some/Page&fileName=notes.md.

Views

• Visual: edit with the toolbar and shortcuts, no Markdown needed.
• Source: edit the Markdown directly in the Markdown editor (CodeMirror).
• Split: source and visual side by side, kept in step as you type in either one. On narrow screens they stack.

A file that is opened and saved without visual edits is saved exactly as it was written. Visual edits regenerate the Markdown in a standard layout (see below). If a file contains something visual editing would change, a warning says so when it opens and again on the first visual edit. Use Source to edit such files safely.

Supported Markdown

CommonMark plus GitHub-style tables and strikethrough, rendered with markdown-it and written back with turndown (see /OpenForum/Javascript/MarkDown).

Feature	Written as
Headings 1 to 4	# Heading to #### Heading
Bold, italic, strikethrough, inline code	**bold**, *italic*, ~~struck~~, `code`
Lists, nested lists	- item, 1. item, nested items indented to match
Links and images	[text](url), 
Quotes and rules	> quote, ---
Code blocks	Fenced with three backticks and an optional language
Tables	GitHub tables with a header row; a line break inside a cell is kept as <br>
HTML comments	Kept as they are
kbd, sup, sub, u, mark, ins, abbr, details, summary, iframe, video, audio	Kept as HTML, since Markdown has no syntax for them

Not supported in the visual view: footnotes (they become plain text), and other raw HTML, which is simplified to its Markdown equivalent. Images that are uploaded or pasted are stored inside the file as data URLs.

Pasting from Word, Google Docs or web pages converts the content to Markdown. Colours, fonts and layout are removed, and a note says so. Pasting into a code block always pastes plain text.

Keyboard shortcuts

Keys	Action
Ctrl+B, Ctrl+I, Ctrl+Shift+X, Ctrl+E	Bold, italic, strikethrough, inline code
Ctrl+Alt+1 to 4	Heading level 1 to 4 (press again to remove)
Ctrl+Shift+8, Ctrl+Shift+7, Ctrl+Shift+9	Bullet list, numbered list, quote
Ctrl+K	Insert or edit a link
Ctrl+Z, Ctrl+Y or Ctrl+Shift+Z	Undo, redo
Tab, Shift+Tab	Next or previous table cell (Tab in the last cell adds a row)
Ctrl+Enter	Start a new paragraph after a code block, table or quote
Arrow keys, Home, End	Move along the toolbar when it has focus; Escape returns to the text

Embedding in your own app

Embed the editor with StandaloneEditor, as the Journal does with the Simple HTML editor. A working example with its own interface, autosave and a word count is at /OpenForum/Editor/Editors/WYSIWYGMarkDownEditor/Example.

OpenForum.includeScript("/OpenForum/Editor/Editors/StandaloneEditor.js");

var myEditor = new StandaloneEditor({
  flavour: "WYSIWYGMarkDown",
  elementId: "MyEditorHost",
  editingPageName: "/MyApp/Notes",
  editingFileName: "notes.md",
  editorPage: "/MyApp/",
  ui: "/MyApp/my-editor-ui.html.fragment",
  autoSave: true,
  canSetPageTitle: false
});

Option	Use
flavour	WYSIWYGMarkDown
elementId	The element the editor is placed in.
editingPageName, editingFileName	The file to edit.
editorPage	Always set this to your own page. Without it, StandaloneEditor reopens the last file edited with this flavour on any page in the browser, ignoring editingPageName and editingFileName, and autosave then writes to that file.
ui	Your own page fragment instead of the standard File, Desktop and Actions bar. It must contain an element with id="editor&editorId;". Copy the confirmRetrieveModal from the example too: without it, unsaved changes kept in the browser can't be offered back after a crash or reload. In the fragment, &editor; is replaced with the editor object, for example for a Save button.
autoSave	Saves every 10 seconds while there are changes. This is one page-wide setting shared by every StandaloneEditor on the page.
canSetPageTitle	Set to false so the browser tab title isn't changed.
editorsPage	Only for testing a Development copy of the editor: where editor scripts are loaded from.

• Wait until myEditor.getCodeMirror() != null before using the editor.
• To react to edits, wrap myEditor.storeChanges and call the original from your version. Don't replace it: the original keeps the browser copy used for recovery.
• myEditor.getValue() and myEditor.setValue(markdown) read and write Markdown. myEditor.save() saves.
• myEditor.getEditor().setMode("visual"), "source" or "split" changes the view; getMode() reads it.
• Several editors can be used on one page.