A full-featured Editor42 WYSIWYG HTML editor
When to use
How it works
editor42.init(). This demo enables Editor42's built-in open-source plugins (lists, image, table, accordion, emoticons, and more) and keeps every secure default in place — iframe sandboxing and XSS sanitization stay on.How to start using
Editor42 loads from a single CDN <script> tag — no build step and no API key. Call editor42.init() on your <textarea> and you are done.
See the CDN quick-start, or self-host the bundle.
Open in CodePlay
Live Demo
JavaScript
editor42.init({
selector: "#editor",
license_key: "gpl",
height: 720,
menubar: "edit view insert format tools table help",
toolbar_mode: "wrap",
plugins: "lists advlist link autolink image table accordion emoticons code searchreplace visualblocks wordcount help",
toolbar: [
"bold italic underline strikethrough | blocks | alignleft aligncenter alignright | bullist numlist outdent indent",
"link unlink | image table emoticons blockquote hr | forecolor backcolor | removeformat | code"
],
image_caption: true,
image_advtab: true,
link_default_protocol: "https",
details_initial_state: "expanded",
details_serialized_state: "collapsed",
content_style: `
body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
figure.image { display: table; margin: 0; }
figure.image img { display: block; }
figure.image figcaption { display: table-caption; caption-side: bottom; text-align: center; font-size: .85em; color: #999; padding-top: 6px; }
figure.align-right { float: right; margin: 4px 0 12px 20px; }
figure.align-left { float: left; margin: 4px 20px 12px 0; }
`
});
HTML
<div class="wrap">
<textarea id="editor">
<h1>The Quiet Houseplant</h1>
<figure class="image align-right">
<img src="https://cdn.editor42.com/demo/img/monstera.jpg" alt="A large split-leaf Monstera deliciosa in a bright greenhouse" width="320" height="212">
<figcaption>Lush, healthy foliage — a sign of the right light and just enough water.</figcaption>
</figure>
<p>Houseplants are one of the simplest ways to bring a room to life, and the best ones practically look after themselves. This guide covers a handful of <em>wonderfully forgiving</em> plants and a <span style="background-color: #fff3b0;">five-minute weekly habit</span> that keeps them lush and healthy.</p>
<p>Each plant here thrives on bright, indirect light and only occasional watering. They are sold under friendly common names, and each has a botanical name worth knowing — a <a href="https://en.wikipedia.org/wiki/Dracaena_trifasciata" target="_blank" rel="noopener">snake plant</a>, for instance, is <code>Dracaena trifasciata</code>. Common names vary from place to place, but the botanical name always points to the very same plant. 🌱</p>
<p><strong>Good to know:</strong> these plants love a little independence — let the soil dry out between waterings and they will reward you with steady, healthy growth.</p>
<h2>A quick comparison</h2>
<table style="width: 100%;">
<thead>
<tr style="background-color: #ecf0f1;">
<th>Plant</th>
<th>Light</th>
<th>Water</th>
<th style="text-align: right;">Care level</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #eafaf1;">
<td><strong>Snake plant</strong></td>
<td>Low to bright</td>
<td>Every 2–3 weeks</td>
<td style="text-align: right;">Effortless</td>
</tr>
<tr>
<td><strong>Pothos</strong></td>
<td>Medium, indirect</td>
<td>Weekly-ish</td>
<td style="text-align: right;">Easy</td>
</tr>
<tr>
<td><strong>Monstera</strong></td>
<td>Bright, indirect</td>
<td>Weekly</td>
<td style="text-align: right;">Easy</td>
</tr>
</tbody>
</table>
<h2>A simple weekly routine</h2>
<ol>
<li>Lift each pot. If it still feels heavy, the soil is holding plenty of water, so you can happily wait.</li>
<li>When a pot feels light, water slowly until a little drains from the bottom.</li>
<li>Tip out any water left in the saucer so the roots stay healthy and aerated.</li>
<li>Give the pot a quarter turn so your plant grows evenly toward the light.</li>
</ol>
<h2>Pick your spot</h2>
<ul>
<li>Bright, indirect light (near a sunny window)
<ul style="list-style-type: circle;">
<li><a href="https://en.wikipedia.org/wiki/Monstera_deliciosa" target="_blank" rel="noopener">Monstera</a></li>
<li><a href="https://en.wikipedia.org/wiki/Epipremnum_aureum" target="_blank" rel="noopener">Pothos</a></li>
</ul>
</li>
<li>Low light (hallways and north-facing rooms)
<ul style="list-style-type: circle;">
<li><a href="https://en.wikipedia.org/wiki/Dracaena_trifasciata" target="_blank" rel="noopener">Snake plant</a></li>
</ul>
</li>
</ul>
<blockquote>
<p>To plant a garden is to believe in tomorrow.</p>
<p>— <cite>Audrey Hepburn</cite></p>
</blockquote>
<hr>
<h2>Frequently asked questions</h2>
<details class="editor42-m-accordion">
<summary>Which plant should I start with?</summary>
<p>The snake plant is famously easy: it is happy in almost any light and only needs watering every couple of weeks, making it a perfect first plant.</p>
</details>
<details class="editor42-m-accordion">
<summary>How often should I water them?</summary>
<p>Most of these plants like to dry out between drinks — roughly every one to three weeks, depending on how much light they get. When you are unsure, it is always safe to wait a few more days.</p>
</details>
<details class="editor42-m-accordion">
<summary>Do they need feeding or misting?</summary>
<p>A little balanced houseplant feed once a month in spring and summer is plenty, and none is needed in winter. Misting is optional — these plants are happy in normal room humidity.</p>
</details>
<p>Start with one plant — <s>or two</s> or five, if you have the windowsills for it — keep the easy weekly rhythm, and watch your space come to life. For more, see the <a href="https://en.wikipedia.org/wiki/Houseplant" target="_blank" rel="noopener">Houseplant</a> article on Wikipedia.</p>
</textarea>
</div>
<script src="https://cdn.editor42.com/editor42/latest/editor42.min.js"></script>
CSS
body {
padding: 24px;
background: #f6f8fa;
}
.wrap {
max-width: 960px;
margin: 0 auto;
}