<!-- 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"
  ]
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js