<main>
  <section>
    <h1>Noneditable Class: Styling noneditable blocks</h1>
    <p>This is an example of styling the <a href="https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#example-using-noneditable_class/" target="_blank">noneditable</a>
      content blocks in TinyMCE to give your authors visual cues as to what is not editable.</p>
    <textarea>
            <p>Thank you for your change request.</p>
            <p>We are happy to inform you that your request has been fully approved.</p>
            <p class="nonedit">Please note that this change may take up to 24 hours to appear on your account.</p>
            <p>If you have any further queries, please contact your customer care representative.</p>
        </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 {
  color: rgb(25, 118, 210);
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: rgb(145, 180, 225);
}

tinymce.init({
  selector: "textarea",
  plugins: "code",
  toolbar: "code",
  menubar: false,
  content_style:
  `.nonedit {
    border: dashed 1px rgb(144, 164, 174);
    padding: 1.75rem 0.25rem 0.25rem 0.25rem;
    position: relative;
    background-color: rgba(207, 216, 220, 0.2);
}

.nonedit:before {
    content: 'Non-editable content';
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(207, 216, 220);
    font-size: 11px;
    padding: 0.25rem 0.45rem;
}`,
  min_height: 380,
  noneditable_class: "nonedit"
});