<!-- Appears on Tiny Blueprint (https://www.tiny.cloud/blog/) in articles:
- Building better user interfaces for text entry--><main>
<section>
<h1>Simple</h1>
<p>A textarea with the class "simple" that has a simpler and more basic toolbar. This useful for editor
instances where authors still need to have some basic HTML - such as simple as paragraph preservation and
making text bold or adding a list.</p>
<textarea class="simple"></textarea>
</section>
<section>
<h1>Advanced</h1>
<p>On the same page, a different textarea with the class "advanced" uses a different configuration that gives
the author more advanced editing features. This is useful for an article or full content editor where more
specific and advanced features are required.</p>
<textarea class="advanced"></textarea>
</section>
</main>
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;
}
/* A simple TinyMCE configuration that will be applied to textarea elements with the class "simple" */
tinymce.init({
selector: "textarea.simple",
plugins: "advlist lists spellchecker autoresize wordcount",
min_height: 120,
menubar: false,
toolbar: "bold italic underline | bullist numlist | spellchecker"
});
/* A more advanced TinyMCE toolbar configuration that will be applied to textarea elements with the class "advanced" */
tinymce.init({
selector: "textarea.advanced",
plugins:
"casechange advcode advlist lists spellchecker formatpainter autoresize visualblocks tinydrive image link media imagetools wordcount",
min_height: 380,
menubar: false,
toolbar: [
"bold italic underline | forecolor | formatselect | alignleft aligncenter alignright | bullist numlist",
"cut copy paste formatpainter removeformat | casechange visualblocks | spellchecker | link image media | code"
]
});
This Pen doesn't use any external CSS resources.