TinyMCE Table Dropdown Plugin

If you've ever used TinyMCE for table editing, you'll know that the experience isn't usually a good one.  To prevent clutter, most developers configure the toolbar to have just the Insert/Edit Table button, which isn't nearly enough to do anything useful with tabular data.  In fact, TinyMCE's table plugin has 12 tools (i.e. buttons) available for working with tables.  The problem is they take up a lot of real estate.  They make an otherwise simple toolbar very intimidating and unintuitive for novice users.  The fact of the matter is, most people who use TinyMCE may not even need to work with tables, so those extra 12 buttons will just be in their way.

In Surreal CMS version 3, we tried to solve this problem by using only the Insert/Edit Table button in the toolbar.  For other functions, the user just needed to right-click on the table to bring up a contextual menu with additional table options.  For the most part this worked, but we saw a lot of support requests from people who never even knew there was a context menu available.  In addition, the use of context menus in web applications is still a rather controversial matter.

So with the development of Surreal CMS v4 underway, we needed a better solution to this dilemma.  Here are the facts that we faced:

  • Most people won't be working with tables in the CMS
  • At the same time, a lot of people still need this functionality
  • The built-in TinyMCE tablecontrols feature dumps 12 buttons into the toolbar—every option is essential when working with tables, but it clutters the toolbar and intimidates novice users

Our solution was to create a SplitButton control that combined all of the necessary options into a single dropdown.  When the button is clicked, the Insert/Edit Table dialog appears.  When the arrow is clicked, you get the rest of the table options neatly organized in a TinyMCE dropdown.

The plugin is very lightweight and contains only one small JavaScript file—no CSS, images, or language packs required.  The plugin is also theme-ready and localization-ready, as it uses standard TinyMCE classes and terms.

We think that this is a very elegant solution for a very much overlooked UI problem, so for the sake of better usability in apps that use TinyMCE, we have released the code under the MIT license for all to use and share.  If you're interested in this plugin, you can download and contribute to it on GitHub.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.