mountEditor()

mountEditor mounts the editor inside an element of any page.

const mountEditor: (
	element: HTMLElement,
	options?: EmbedEditorProps
) => EmbedEditorHandle & { destroy: () => void; update: (options: EmbedEditorProps) => void };

Standalone entry only: import it from @embededitor/full/standalone. In a React app, use EmbedEditor.

Parameters

HTMLElement

required

The element to mount into. The editor adds a host element inside it and fills its box, so give it a height. An element holds one editor: mounting it again takes over the first one, whose handle then rejects every command with NOT_AVAILABLE.

EmbedEditorProps

default:"{}"

Every prop EmbedEditor takes, layout included. See Props.

Returns

The editor’s handle, EmbedEditorHandle: its commands, reads and events. See Commands. Beside them:

(options: EmbedEditorProps) => void

Renders new options in the same editor, the same handle on it. It takes the full options again, like new React props, not a patch. Calling it after destroy throws.

() => void

Unmounts the editor and removes its host element. Every command waiting, and every one called after, rejects with NOT_AVAILABLE.

Behavior

src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
mountEditor touches the DOM, so call it from an event handler or an effect, never during a server render.

Example

main.js

import { mountEditor } from '@embededitor/full/standalone';

const options = {
	onProcess: ({ dest, state }) => {
		console.info(dest.name, dest.size, state);
	},
	src: '/photos/sunset.jpg'
};

// <div id="editor" style="height: 600px"></div>
const editor = mountEditor(document.getElementById('editor'), options);

// switch the language: pass the full options again
const setLanguage = lang => {
	editor.update({ ...options, lang });
};

// when the page no longer needs the editor
const removeEditor = () => {
	editor.destroy();
};

Without a bundler, serve the package’s dist folder as it is and import the entry from there. See Plain HTML.

Overview

Entry Points

Commands

Reference

Parameters

Returns

Behavior

Example

​Parameters

​Returns

​Behavior

​Example

Parameters

Returns

Behavior

Example