Make Selected Tables Editable in TinyMCE

A read-only editor is useful when users should view a template without changing its main structure. But sometimes, selected areas still need to remain editable—for example, a table where users enter prices, dates, or project details.

TinyMCE can support this approach by combining HTML’s contenteditable attribute with predefined CSS classes.

The main idea

Keep the editor content protected, but assign a special class such as editablecontent to tables that users are allowed to modify. Template authors can select this class directly from the TinyMCE table properties dialog.

The table_class_list option defines which table classes appear in that dialog:

tinymce.init({
  selector: "textarea",
  plugins: "table",
  menubar: "table",
  toolbar: "table",

  table_class_list: [
    { title: "None", value: "" },
    { title: "Editable Table", value: "editablecontent" },
    { title: "Other Table Type", value: "other_table_class" }
  ]
});

When the template author chooses Editable Table, TinyMCE adds the following class to the table:

<table class="editablecontent">

Your application can then detect this class and make only that table editable.

Why use predefined classes?

• Template authors do not need to edit HTML.
• Editable areas are clearly controlled.
• The same class can be reused across many templates.
• Other table options, such as border styles, can be added to the same list.

For larger configurations, TinyMCE also supports nested class menus. This helps organize editable states, visual styles, and other table types into separate groups.