TinyMCE问题：删除外部表格时编辑器Div被误删，如何限制仅删编辑器内表格？

I get it—when your inline TinyMCE editor is nested inside an external table, using the built-in table delete button wipes out the whole container table (and your editor div along with it) instead of just the tables you created inside the editor. Let's fix that with a simple check to distinguish between the outer container table and the tables you add within the editor.

Step 1: Mark the Outer Container Table #

First, add a unique class to your outer table so we can easily identify it later. Let's use editor-outer-table:

<table class="editor-outer-table">
  <tr>
    <td>
      <div class="tinymce-body">
        <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
        <ul>
          <li>Content Management systems (<em>e.g. WordPress, Umbraco</em>)</li>
          <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
          <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
          <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
          <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
        </ul>
        <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
      </div>
    </td>
  </tr>
</table>

Step 2: Add Custom Logic to Block Deleting the Outer Table #

We'll use TinyMCE's setup callback to hook into table deletion events and override the default behavior to protect our outer table. Here's the modified initialization code:

tinymce.init({
  selector: ".tinymce-body",
  inline: true,
  plugins: 'table',
  toolbar: 'table',
  setup: function(editor) {
    // Listen for the table remove event to block deletion of the outer table
    editor.on('tableremove', function(e) {
      const targetTable = e.target;
      if (targetTable.classList.contains('editor-outer-table')) {
        e.preventDefault();
        alert("You can't delete the outer container table—only tables created inside the editor can be removed.");
      }
    });

    // Optional: Override the table delete command for extra control
    editor.addCommand('mceTableDelete', function() {
      const selectedTable = editor.selection.getNode().closest('table');
      if (selectedTable && !selectedTable.classList.contains('editor-outer-table')) {
        editor.dom.remove(selectedTable);
      } else {
        alert("You can't delete the outer container table.");
      }
    });
  }
});

How This Works #

• The editor-outer-table class acts as a flag to tell our code which table is off-limits.
• The tableremove event listener checks if the table being deleted is the outer container—if it is, we stop the default delete action and show a quick alert.
• For extra safety, we override the mceTableDelete command to directly handle deletion logic, ensuring only tables created inside the editor (not the outer container) get removed.

This setup lets your users safely delete tables they create within the editor without accidentally wiping out the editor's parent table.

内容的提问来源于stack exchange，提问作者JayaPriya