TinyMCE

A rich-text (HTML) editor item backed by TinyMCE. The library loads on demand from a CDN the first time the item renders. Register it under a comp name with registerEditorItem and combine it with fill: true to stretch it to the available height.

Usage

import { TinyMCE } from "@svar-ui/react-editor";

Prop	Type	Default	Description
value	string	-	HTML content. Bound to the field key when used as an editor item.
toolbar	string	"undo redo | bold italic"	TinyMCE toolbar configuration string.
licenseKey	string	"gpl"	TinyMCE license key, passed to tinymce.init({ license_key }).
skin	string	""	TinyMCE skin ("oxide" / "oxide-dark"). Empty auto-detects from the active SVAR theme.
focus	boolean	false	Focuses the editor when value is set.
onChange	({ value }: { value: string }) => void	-	Fires on content change with the full current HTML.

Loads TinyMCE from a public CDN at runtime.

Filling the available height

By default editor has a fixed height, use fill: true to stretch the editor to the max available height. See item config and input controls for details.

Example

import { Editor, registerEditorItem, TinyMCE } from "@svar-ui/react-editor";

registerEditorItem("tinymce", TinyMCE);

const items = [
  { comp: "tinymce", key: "content", toolbar: "undo redo | bold italic | bullist numlist", fill: true }
];

const values = { content: "<p>Hello</p>" };

<Editor items={items} values={values} placement="sidebar" autoSave={false} />

Related articles

• Input controls
• registerEditorItem