<body>
<main>
<section>
<h1>Toolbar Only</h1>
<textarea class="toolbar"></textarea>
</section>
<section>
<h1>Simple Toolbar and Menu</h1>
<textarea class="menu"></textarea>
</section>
<section>
<p>These two editors have the same plugins and options - however one is through the toolbar buttons, and the
other has a simpler toolbar but access to the menus.</p>
<p>Refer to <a href="https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar" target="_blank">toolbar</a>,
<a href="https://www.tiny.cloud/docs/configure/editor-appearance/#menu" target="_blank">menu</a>
and <a href="https://www.tiny.cloud/docs/configure/editor-appearance/#menubar" target="_blank">menubar</a>
in the TinyMCE 5 documentation for full details on configuring your toolbars and emnus.</p>
</section>
</main>
</body>body {
margin: 2rem 1.5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
main {
max-width: 720px;
margin: auto;
}
section {
margin-bottom: 3rem;
}
h1 {
font-size: 1.75rem;
font-weight: bold;
}
tinymce.init({
selector: "textarea.toolbar",
plugins: [
"advlist autolink autosave autoresize link image lists charmap hr anchor",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime nonbreaking",
"table template paste textcolor importcss textpattern spellchecker help"
],
menubar: false,
toolbar: [
"undo redo | bold italic underline strikethrough | alignleft aligncenter alignright | blockquote | formatselect",
"cut copy paste removeformat | searchreplace | bullist numlist | outdent indent | hr | link unlink anchor image code | inserttime",
"table | subscript superscript | charmap | visualchars visualblocks nonbreaking | template spellchecker"
],
height: 600
});
tinymce.init({
selector: "textarea.menu",
plugins: [
"advlist autolink autosave autoresize link image lists charmap hr anchor",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime nonbreaking",
"table template paste textcolor importcss textpattern spellchecker help"
],
menubar: "edit view insert format table tools help",
toolbar:
"formatselect | bold italic underline strikethrough | bullist numlist | link image | spellchecker",
height: 600
});
External CSS
This Pen doesn't use any external CSS resources.