Skip to main content

Svelte Installation

@editor42/editor42-svelte is a thin wrapper around Editor42 that makes it a Svelte 5 component. There is no account, no sign-up and no key of any kind.

Install​

npm install @editor42/editor42-svelte

or for Yarn users:

yarn add @editor42/editor42-svelte

Svelte 5 is required — the component is written with runes.

Basic Setup​

<script>
  import Editor from '@editor42/editor42-svelte';
</script>

<Editor conf={{ height: 400 }} value="<p>Hello from Editor42</p>" />

With no extra props the editor script is loaded from https://cdn.editor42.com on the latest channel. That pointer only ever moves for security and bug-fix releases, because the Editor42 major version is fixed forever.

Reading and Writing the Content​

value is bindable, so the content travels both ways:

<script>
  import Editor from '@editor42/editor42-svelte';

  let content = $state('<p>Hello from Editor42</p>');
</script>

<Editor bind:value={content} conf={{ height: 400, plugins: 'lists link' }} />

Self-Hosting​

Point the component at your own copy of the script, using the full file URL:

<Editor scriptSrc="/js/editor42/editor42.min.js" />

Pinning a Version​

<Editor channel="42.0.0" />

channel accepts latest, a latest-N alias, or an exact version.

Editor Options​

Everything else is an Editor42 option, passed through conf:

<Editor conf={{ height: 400, menubar: false, plugins: 'lists link' }} />

See the Configuration Options for the full list.

Migrating from @tinymce/tinymce-svelte​

npm uninstall @tinymce/tinymce-svelte
npm install @editor42/editor42-svelte

Change the import to @editor42/editor42-svelte and you are done. scriptSrc, channel and conf keep their names, and TinyMCE-style numeric channels resolve to latest.

All API-key and licence-key handling has been removed. The corresponding props are still accepted so existing code compiles, but they do nothing: no key is read, stored or sent anywhere, and no request ever reaches a vendor cloud.

The wrapper div class defaults to editor42-wrapper (it was tinymce-wrapper); set the cssClass prop if your styles target the old name.

The component also drives a stock TinyMCE if that is what is already loaded on the page, which keeps the switch reversible.

See the migration guide for the editor side of the move.

Live Demo​

See it running, with its full source: the Svelte demo.