Skip to main content

Web Component Installation

@editor42/editor42-webcomponent registers <editor42-editor>, a W3C custom element wrapping Editor42. It works anywhere HTML works — plain pages, Astro, htmx, Solid, Qwik, or any framework with no component of its own. There is no account, no sign-up and no key of any kind.

Install​

npm install @editor42/editor42-webcomponent

or for Yarn users:

yarn add @editor42/editor42-webcomponent

Basic Setup​

<script src="node_modules/@editor42/editor42-webcomponent/dist/editor42-webcomponent.js"></script>

<editor42-editor></editor42-editor>

With no src attribute 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​

The element's own text content is its starting value, and the element is form-associated — give it a name and it submits with the surrounding <form> like any other field:

<form action="/save" method="post">
  <editor42-editor name="article">
    &lt;p&gt;Hello from Editor42&lt;/p&gt;
  </editor42-editor>
  <button type="submit">Save</button>
</form>

Self-Hosting​

<editor42-editor src="/js/editor42/editor42.min.js"></editor42-editor>

Any full script URL works.

Pinning a Version​

<editor42-editor channel="42.0.0"></editor42-editor>

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

Editor Options​

Common options are attributes — toolbar, menubar, plugins, height, width, content_css, resize, skin and more:

<editor42-editor height="400" menubar="false" plugins="lists link"></editor42-editor>

A full configuration object can be referenced by name through the config attribute:

<script>
  window.editorConfig = { height: 400, menubar: false, plugins: 'lists link' };
</script>

<editor42-editor config="editorConfig"></editor42-editor>

Editor events are on-* attributes naming a global handler (on-Init, on-Change, on-KeyUp, …). See the Configuration Options for the full option list.

Migrating from @tinymce/tinymce-webcomponent​

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

The deprecated <tinymce-editor> tag is still registered as an alias, so existing markup keeps working, and TinyMCE-style numeric channel values resolve to latest.

All API-key and licence-key handling has been removed. The api-key attribute is still accepted so existing markup compiles, but it does nothing: no key is read, stored or sent anywhere, and no request ever reaches a vendor cloud.

The element 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 Web Component demo.