Rosmeli Quintero Rosmeli Quintero - 1 month ago 6x
Javascript Question

How do I disable/enable tools based on content on ContentTools?

I'm using the ContentTools plugin in my page. I need a way to disable and enable tools based con the content that the user is editing. For example, in all the content, there's only one

where I want to the user be able to upload a image, and so on.


This question has been asked before in the project's GitHub issues here:

Basically the recommended way to approach this is to monitor for the focus event against elements and then update the toolbox based on what tools you want that element to support. How you flag what tools are available in an element is up to you but the example below tests for the existence of a CSS class against the element to determine which tools to show:

# Define a set of tools for elements flagged as text only

# Monitor the editor for focus events
var editor = ContentTools.EditorApp.get();
editor.myToolsState = 'all-tools';
ContentEdit.Root.get().bind('focus', function (element){

  # If the element with focus has the CSS class `text-only` set the
  # tools in the toolbox to `TEXT_ONLY_TOOLS`...
  if (element.domElement().classList.contains('text-only')) {
    if (editor.myToolsState != 'text-only') {
      editor.myToolsState = 'text-only';

  # ...otherwise set the tools in the toolbox to `DEFAULT_TOOLS`.
  } else {
    if (editor.myToolsState != 'all-tools') {
      editor.myToolsState = 'all-tools';

Clearly if you have lots of variations you might want to set up a dictionary of CSS classes (or perhaps data-tools attributes) that map to tool sets rather that creating a large set of if tests.