Editor42 as a jQuery plugin

When to use

When the page already runs on jQuery and you would rather keep talking to the field the way the rest of your code does.

How it works

One call — $('#editor').editor42({...}) — turns a textarea into an editor. The integration also patches .html(), .val(), .text(), .append() and friends, so they read from and write to the editor rather than the hidden textarea underneath it; the two buttons show exactly that.

How to start using

Install the integration with npm install @editor42/editor42-jquery, load it after jQuery, and call $(el).editor42(). It patches .html(), .val(), .text() and friends so they talk to the editor.

See the jQuery install page for self-hosting and the move from @tinymce/tinymce-jquery.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import '@editor42/editor42-jquery';

$('#editor').editor42({
  height: 420,
  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; }'
});

$('#read').on('click', function () {
  $('#output').text($('#editor').html().trim());
});

$('#append').on('click', function () {
  $('#editor').append('<p>Appended through jQuery at ' + new Date().toLocaleTimeString() + '.</p>');
});

HTML

<h1>Editor42 with jQuery</h1>
<p class="hint">The <code>@editor42/editor42-jquery</code> integration: <code>$(el).editor42()</code>, and the usual jQuery accessors talk to the editor.</p>

<textarea id="editor">
<h2>Editor42 as a jQuery plugin</h2>
<p>This textarea was turned into an editor with one call: <code>$('#editor').editor42({...})</code>.</p>
<p>The integration also patches jQuery's own accessors, so <code>.html()</code>, <code>.val()</code>, <code>.text()</code>, <code>.append()</code> and friends read from and write to the editor instead of the hidden textarea underneath it.</p>
<ul>
  <li><code>$('#editor').html()</code> returns what you see</li>
  <li><code>$('*:editor42')</code> matches every bound element</li>
</ul>
</textarea>

<p class="mt-3">
  <button id="read" class="btn btn-primary" type="button">$('#editor').html()</button>
  <button id="append" class="btn btn-secondary" type="button">$('#editor').append(…)</button>
</p>

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

<script src="https://democdn.com/frameworks/jquery/3.3.1/jquery-3.3.1.min.js"></script>

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;
}