Everything the core exports

One page of options, methods and attributes. The framework packages re-export all of it.

On this page

createEditor(options)

Every option, with its default. All of them are optional.

createEditor options
Option	Type	Default	Description
`element`	`HTMLElement \| string \| <textarea>`		Container, CSS selector or textarea (hidden and kept in sync). Omit it to create the editor detached and append `editor.root` yourself.
`content`	`string \| JSON`		Initial content: HTML (always sanitized) or ProseMirror JSON.
`extensions`	`AnyExtension[]`	`[StarterKit]`	The feature set.
`editable`	`boolean`	`true`	Allow editing.
`autofocus`	`boolean \| "start" \| "end"`	`false`	Focus on creation.
`placeholder`	`string`		Text shown when the editor is empty.
`ariaLabel, ariaLabelledBy, ariaDescribedBy`	`string`		Accessible name and description of the editing area.
`language`	`string`	`<html lang>`	UI language. Built in: `en`, `ar`.
`languages`	`EditorLanguage[]`		Add or replace UI languages.
`labels`	`Partial<Labels>`		Override single UI strings.
`dir`	`"ltr" \| "rtl" \| "auto"`		Base direction of the content.
`contentLang`	`string`		`lang` of the content, used for spellcheck and screen readers.
`urlPolicy`	`UrlPolicy`		`{ protocols, allowDataImages, allowRelative }`. Allowed link and image URLs.
`inputRules`	`boolean`	`true`	Markdown-style shortcuts: `#` , `` , `1.` , `>` , fenced code, `bold*`…
`ui`	`UIOptions \| false`	`built-in UI`	Toolbar, custom items, status bar, theme and shortcuts. `false` = headless.

ui options

The built-in toolbar, status bar and theme. Pass false instead for a headless editor.

ui options
Option	Type	Default	Description
`toolbar`	`string[] \| false`	`DEFAULT_TOOLBAR`	Item names and `"\|"` separators. `false` hides the toolbar.
`items`	`Record<string, ItemSpec>`		Custom or overriding toolbar buttons, referenced by name in `toolbar`.
`statusbar`	`{ elementPath, wordCount, characterCount } \| false`		Status bar content. `characterCount` can take `{ limit }`.
`theme`	`"auto" \| "light" \| "dark"`	`"auto"`	Color theme of the editor.
`stickyToolbar`	`boolean`	`true`	Keep the toolbar visible while scrolling long documents.
`shortcuts`	`{ toolbar, help, find, link }`	`Alt-F10, Alt-0, Mod-f, Mod-k`	Key bindings of the built-in UI.

Callbacks

Pass them as options. The framework packages always call the latest function.

Editor callbacks
Name	Type	Description
`onCreate`	`(editor) => void`	The editor was created.
`onUpdate`	`(editor) => void`	The content changed.
`onSelectionUpdate`	`(editor) => void`	The selection changed.
`onFocus, onBlur`	`(editor, event) => void`	The editing area gained or lost focus.
`onDestroy`	`() => void`	The editor was destroyed.
`onContentError`	`(error: Error) => void`	Content could not be loaded.

Editor methods

What createEditor() returns.

Editor methods
Method	Returns	Description
`getHTML()`	`string`	Clean, sanitized HTML. Save this.
`getJSON()`	`JSONContent`	ProseMirror JSON.
`getText({ blockSeparator })`	`string`	Plain text. Blocks are separated by `\n\n` by default.
`setContent(content, { emitUpdate, addToHistory })`	`void`	Load HTML or JSON. `emitUpdate` and `addToHistory` are off by default.
`clearContent()`	`void`	Empty the document.
`isEmpty, isFocused, isEditable`	`boolean`	Read-only state flags.
`setEditable(editable)`	`void`	Turn editing on or off.
`setOptions(options)`	`void`	Change the runtime options: `editable`, `placeholder`, `aria*`, `dir`, `contentLang`.
`commands.name()`	`boolean`	Run one command, e.g. `editor.commands.toggleBold()`.
`can().name()`	`boolean`	Would the command work here?
`chain().…run()`	`boolean`	Several commands in one transaction and one undo step.
`isActive(name, attrs?)`	`boolean`	Is a mark or node active, e.g. `isActive("heading", { level: 2 })`.
`getAttributes(name)`	`object`	Attributes at the selection, e.g. a link's `href`.
`on(event, fn)`	`() => void`	Listen to an editor event. Returns an unsubscribe function.
`subscribe(fn)`	`() => void`	Store-style subscription that fires on every change.
`announce(message)`	`void`	Send a message to screen readers.
`focus(), blur()`	`void`	Move focus in or out.
`destroy()`	`void`	Remove the editor and its listeners.

Commands

Run them with editor.commands.name(), test them with editor.can().name() and combine them with editor.chain()…run().

Commands by area
Area	Commands
Marks	`toggleBold toggleItalic toggleUnderline toggleStrike toggleCode toggleSubscript toggleSuperscript unsetAllMarks`
Color	`setTextColor(color) unsetTextColor setHighlight(color?) unsetHighlight toggleHighlight(color?)`
Blocks	`setParagraph setHeading(level) toggleHeading(level) clearNodes toggleBlockquote toggleCodeBlock setHorizontalRule setHardBreak`
Lists	`toggleBulletList toggleOrderedList toggleTaskList sinkListItem liftListItem`
Links and images	`setLink({ href, text?, title?, newTab? }) unsetLink setImage({ src, alt, caption? }) updateImage`
Tables	`insertTable({ rows, cols, withHeaderRow, caption }) addRowBefore addRowAfter addColumnBefore addColumnAfter deleteRow deleteColumn deleteTable mergeCells splitCell toggleHeaderRow toggleHeaderColumn setTableCaption`
Layout	`setTextAlign("start" \| "center" \| "end" \| "justify") setTextDirection("ltr" \| "rtl" \| "auto") unsetTextAlign unsetTextDirection`
Find	`setSearch({ query, caseSensitive, wholeWord }) findNext findPrevious replaceCurrent(text) replaceAll(text) clearSearch`
General	`undo redo focus blur selectAll`

Attributes

placeholder, readonly, disabled, dir, content-lang and label follow later changes. value, language and toolbar are read when the editor starts.

owe-editor attributes
Name	Type	Description
`name`	`string`	Form field name. The form submits the editor's HTML under it.
`placeholder`	`string`	Placeholder text.
`readonly`	`boolean`	Makes the content read-only.
`disabled`	`boolean`	Disables the editor and leaves it out of the form.
`dir`	`ltr \| rtl \| auto`	Base direction of the content.
`content-lang`	`string`	`lang` of the content (spellcheck and screen readers).
`label`	`string`	Accessible name. Or point a `<label for>` at the element's `id`.
`value`	`HTML string`	Initial content as HTML. Read once, when the editor is created.
`language`	`string`	UI language, e.g. `ar`. Read once. Defaults to `<html lang>`.
`toolbar`	`string`	Toolbar items separated by spaces (`"bold italic \| link"`), or `none`. Read once.

Properties

Set options before the element is added to the page.

owe-editor properties
Name	Type	Description
`editor`	`Editor \| null`	The live editor, or `null` while the element is not in the document.
`value`	`string`	The content as HTML. Setting it loads new content.
`options`	`EditorOptions`	More `createEditor()` options. Set it before the element is added to the page. Attributes win over it.
`form`	`HTMLFormElement \| null`	The surrounding `<form>`, or `null`.

Events

Both bubble, so you can listen on the form.

owe-editor events
Name	Type	Description
`input`	`Event`	On every change. `event.target.value` has the HTML.
`change`	`Event`	When the editor loses focus after a change.

Entry points

What each import path gives you.

Package entry points
Import	Type	Description
`open-wysiwyg-editor`	`ESM + CJS + .d.ts`	The engine, every extension and the accessible UI.
`open-wysiwyg-editor/headless`	`ESM + CJS + .d.ts`	The engine and extensions without UI code.
`open-wysiwyg-editor/element`	`ESM + CJS + .d.ts`	Defines the `<owe-editor>` element.
`open-wysiwyg-editor/style.css`	`CSS`	Editor, UI and content styles (also `style.min.css`).
`open-wysiwyg-editor/content.css`	`CSS`	Content styles only, for pages that display saved HTML (also `content.min.css`).
`dist/open-wysiwyg-editor.global.js`	`IIFE`	A script tag build. Exposes `window.OpenWysiwygEditor` and defines `<owe-editor>`.

Edit this page on GitHub