Getting Started

Installation

Install @wysimark/js using

npm i --save @wysimark/standalone

yarn add @wysimark/standalone

pnpm add @wysimark/standalone

Usage

Basic Usage

Make sure there is a <div> element in your HTML to render the editor in.

<html>
  <body>
    <div id="editor-container"></div>
  </body>
</html>

Then import the createWysimark method from @wysimark/standalone.

Pass the <div> element and a value for the initialMarkdown content to the createWysimark method.

import { createWysimark } from "@wysimark/standalone"

/**
 * Get the editor container element
 */
const container = document.getElementById("editor-container")

/**
 * Create the Wysimark component
 */
const wysimark = createWysimark(container, {
  initialMarkdown: "# Hello World",
})

Usage with File Uploads

To support file attachment uploads, image uploads and server-side image resizing:

Get a free upload API key and generate an authToken at https://www.portive.com. You'll need to create a free account which includes 1 GB of free upload storage. It takes under 3 minutes to get an auth token from start to finish.
Pass the authToken to the useEditor hook.

import { createWysimark } from "@wysimark/standalone"

/**
 * Get the editor container element
 */
const container = document.getElementById("editor-container")

/**
 * Create the Wysimark component
 */
const wysimark = createWysimark(container, {
  initialMarkdown: "# Hello World",
  authToken: "AUTH_TOKEN_GOES_HERE",
})

createWysimark

Use the createWysimark method to create an editor inside of an HTML Element.

Example usage:

// Assumes the existence of an HTML element with id="editor"

const wysimark = createWysimark(document.getElementById("editor"), {
  initialMarkdown: "# Hello World",
})

// NOTE: Returns a `Wysimark` object

createWysimark options:

type UseEditorOptions = {
  initialMarkdown?: string
  authToken?: string
  height?: string | number
  minHeight?: string | number
  maxHeight?: string | number
  onChange?: (markdown: string) => void
  throttleInMs?: number
  placeholder?: string
}

initialMarkdown: string

Set the initial content of the editor using a string in Markdown.

If the editor is supposed to start empty, provide an empty string "" for the value.

Example

// Assumes the existence of an HTML element with id="editor"

const wysimark = createWysimark(document.getElementById("editor"), {
  initialMarkdown: "# Hello World",
})

// NOTE: Returns a `Wysimark` object

authToken?: string

Set the authToken from Portive for uploading files and images which enables these features. Portive is the company behind the Wysimark editor.

If you don't need or want to support uploads, you can omit this option. If the authToken is not provided, the upload attachments and images features will be disabled and pasting or dropping files into the editor won't work. Pasting and dropping text will continue to work.

height?: number | string

Sets the css height for the Editor.

This is the same as setting the minHeight and the maxHeight separately.

If the value is set as a number the value will be set in px. If the value is set as a string make sure the units are included like 16em or 200px.

minHeight?: number | string

Sets the css min-height for the Editor.

If the value is set as a number the value will be set in px. If the value is set as a string make sure the units are included like 16em or 200px.

maxHeight?: number | string

Sets the css max-height for the Editor.

If the value is set as a number the value will be set in px. If the value is set as a string make sure the units are included like 16em or 200px.

onChange?: (markdown: string) => void

Sets a callback function that will be called whenever the content of the editor changes. The callback will be called with the current markdown content of the editor.

Example:

const wysimark = createWysimark(container, {
  initialMarkdown: "# Hello World",
  onChange: (markdown) => {
    console.log(markdown)
  },
})

For performance reasons, the onChange callback is throttled to only be called once every 1000ms by default. This can be changed by setting the throttleInMs option.

throttleInMs?: number

Sets the number of milliseconds to throttle the onChange callback. The default value is 1000 which means the onChange callback will only be called once every 1000 ms.

placeholder?: string

String to display when the editor is empty.

Wysimark

The Wysimark object is returned by the createWysimark method.

const wysimark = createWysimark(document.getElementById("editor"), {
  initialMarkdown: "# Hello World",
})

Some methods are available on the Wysimark method which you can use to interact with the editor.

getMarkdown: () => string

Use the getMarkdown method to get the markdown value of the editor.

In this example, we are using the getMarkdown method to get the markdown value of the editor when the button is clicked.

const wysimark = createWysimark(document.getElementById("editor"), {
  initialMarkdown: "# Hello World",
})

const button = document.getElementById("button")

button.addEventListener("click", () => {
  const markdown = wysimark.getMarkdown()
  console.log(markdown)
})

setMarkdown: (markdown: string) => void

Use the setMarkdown method to set the markdown value of the editor.

In this example, we are using the setMarkdown method to set the markdown value of the editor when the button is clicked.

const wysimark = createWysimark(document.getElementById("editor"), {
  initialMarkdown: "# Hello World",
})

const button = document.getElementById("button")

button.addEventListener("click", () => {
  wysimark.setMarkdown("# Goodbye World")
})