Skip to main content

NPM Installation

The editor42 package is the editor itself — the same build the CDN serves, ready for a bundler. There is no account, no sign-up and no key of any kind.

Install​

npm install editor42

or for Yarn users:

yarn add editor42

Basic Setup​

import editor42 from 'editor42';

editor42.init({
  selector: '#my-editor'
});

The package also sets window.editor42 (and window.tinymce, for compatibility) when it loads, so existing code that reaches for the global keeps working.

Where the Editor Loads Its Files From​

Editor42 is not a single file. Skins, icons, themes, models and plugins are fetched at runtime, relative to the script that loaded the editor — and a bundler rewrites your code into a hashed file somewhere else, so the editor cannot guess that path. Tell it with base_url.

From the CDN​

The fastest option, and the one to start with:

editor42.init({
  selector: '#my-editor',
  base_url: 'https://cdn.editor42.com/editor42/latest'
});

From your own project​

Copy the runtime folders out of the package into your public directory — skins/, icons/, themes/, models/ and plugins/ from node_modules/editor42/ into public/editor42/ — then point at your copy:

editor42.init({
  selector: '#my-editor',
  base_url: '/editor42'
});

In Vite that copy is a job for vite-plugin-static-copy; in Webpack, for copy-webpack-plugin.

TypeScript​

Type definitions ship inside the package, so nothing extra is needed:

import editor42, { Editor, EditorOptions } from 'editor42';

const options: EditorOptions['init_instance_callback'] = (editor: Editor) => {
  console.log(editor.id + ' is ready');
};

Framework Components​

Using a framework? Each one has its own component with the same options:

React · Vue · Angular · Svelte · jQuery · Web Component

Configuration​

Editor42 uses the same configuration options as TinyMCE. See the Configuration Options for the full list.

Live Demo​

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