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

Solution 1:

This question has been asked before in the project's GitHub issues here: https://github.com/GetmeUK/ContentTools/issues/173

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
TEXT_ONLY_TOOLS = [
    [
        'bold',
        'italic',
        'link'
    ]
];

# Monitor the editor for focus eventsvar 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';
      editor.toolbox().tools(TEXT_ONLY_TOOLS);
    }

  # ...otherwise set the tools in the toolbox to `DEFAULT_TOOLS`.
  } else {
    if (editor.myToolsState != 'all-tools') {
      editor.myToolsState = 'all-tools';
      editor.toolbox().tools(ContentTools.DEFAULT_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.