<main>
  <section>
    <h1>Noneditable Class: Table Example</h1>
    <p>This is an example of the <a href="https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#example-using-noneditable_class" target="_blank">noneditable</a>
      class in TinyMCE to demonstrate making a table noneditable, but include elements that are editable.</p>
    <p>In this example, the header area cannot be changed, but writers can add more rows to the body of the table, as well
      as edit the total dollar value.</p>
    <textarea>
            <table class="nonedit">
                <thead>
                <tr>
                    <th style="width:60%;">Item</th>
                    <th style="width:10%;">Quantity</th>
                    <th style="width:15%;">Cost</th>
                    <th style="width:15%;">Subtotal</th>
                </tr>
                </thead>
                <tbody class="editcontent">
                <tr>
                    <td>Item 1</td>
                    <td>2</td>
                    <td>$10.00</td>
                    <td>$20.00</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="3">Total</td>
                    <td class="editcontent">$20.00</td>
                </tr>
                </tfoot>
            </table>
        </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: "table code",
  toolbar: "code",
  menubar: false,
  noneditable_class: 'nonedit',
  editable_class: 'editcontent',
  min_height: 380
});