Editor42 installed from NPM

When to use

When your project has a bundler — Vite, Webpack, Rollup — and you want the editor to be a dependency like any other, versioned in your lockfile rather than fetched from a CDN at run time.

How it works

import editor42 from 'editor42' and call editor42.init(). The one extra option is base_url: a bundler moves your code into a hashed file, so the editor cannot find its own skins, icons and plugins by itself. Point it at the CDN, as here, or at a copy of those folders in your public directory.

How to start using

Install the editor as a package and import it: npm install editor42. A bundler rewrites your code into a hashed file, so tell the editor where its skins, icons, themes and plugins live with base_url — the CDN, or your own copy of them.

See the NPM install page for both options.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import editor42 from "editor42";

editor42.init({
  selector: "#editor",
  base_url: "https://cdn.editor42.com/editor42/latest",
  height: 460,
  menubar: false,
  plugins: "lists link code",
  toolbar: "undo redo | bold italic | bullist numlist | link code",
  content_style: `
    body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
  `
});

HTML

<h1>Editor42 from npm</h1>
<p class="hint">The <code>editor42</code> package, imported like any other dependency and bundled with your app.</p>

<textarea id="editor">
<h2>Installed from npm</h2>
<p>This editor was imported as a module: <code>import editor42 from 'editor42'</code>. No script tag, no global setup &mdash; your bundler treats it like any other package.</p>
<p>The one thing a bundler cannot do for you is guess where the editor's own files live, because it rewrites your code into a hashed bundle somewhere else. That is what <code>base_url</code> is for: it points at the folder holding <code>skins/</code>, <code>icons/</code>, <code>themes/</code>, <code>models/</code> and <code>plugins/</code>.</p>
<ul>
  <li>Point it at the CDN, as this demo does</li>
  <li>Or copy those folders into your own public directory and point it there</li>
</ul>
</textarea>

SASS

.hint {
  margin-bottom: 20px;
  color: var(--demo-muted-color);
}