Editor42 as a Web Component

When to use

When there is no framework to hang a component on — a server-rendered page, Astro, htmx, Solid, Qwik — or when you simply want the editor to be a tag.

How it works

The script registers <editor42-editor> as a custom element. Common options are attributes, the element's own text content is its starting value, and because it is form-associated, a name is all it takes to submit with the surrounding form — the demo reads it straight out of FormData.

How to start using

Install the element with npm install @editor42/editor42-webcomponent, load it once, and write <editor42-editor> anywhere markup goes — plain HTML, Astro, htmx, Solid or Qwik. It is form-associated, so a name is all it needs to submit.

See the Web Component install page for the attribute list and the move from @tinymce/tinymce-webcomponent.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import '@editor42/editor42-webcomponent';

document.getElementById('article-form').addEventListener('submit', function (event) {
  event.preventDefault();
  const data = new FormData(event.target);
  document.getElementById('output').textContent = data.get('article').trim();
});

HTML

<h1>Editor42 as a Web Component</h1>
<p class="hint">The <code>&lt;editor42-editor&gt;</code> custom element &mdash; markup only, and it submits with the form like any other field.</p>

<form id="article-form">
  <editor42-editor
    name="article"
    height="420"
    menubar="false"
    plugins="lists link code"
    toolbar="undo redo | bold italic | bullist numlist | link code"
  >
    &lt;h2&gt;Editor42 as a custom element&lt;/h2&gt;
    &lt;p&gt;There is no framework here at all. The element registers itself, reads its own text content as the starting value, and takes the common options as attributes.&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;It works in plain HTML, Astro, htmx, Solid, Qwik &mdash; anywhere markup does&lt;/li&gt;
      &lt;li&gt;It is form-associated: give it a &lt;code&gt;name&lt;/code&gt; and submit&lt;/li&gt;
    &lt;/ul&gt;
  </editor42-editor>

  <p class="mt-3"><button class="btn btn-primary" type="submit">Submit the form</button></p>
</form>

<pre id="output" class="state"></pre>

SASS

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

.state {
  max-height: 160px;
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  white-space: pre-wrap;
}