如何基于ContentTools上的内容禁用/启用工具? [英] How do I disable/enable tools based on content on ContentTools?

问题描述

我在页面中使用ContentTools插件.我需要一种方法来禁用和启用基于用户正在编辑的内容的工具.例如，在所有内容中，只有一个我希望用户可以上传图像的div，依此类推.

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 div where I want to the user be able to upload a image, and so on.

推荐答案

在此项目的GitHub问题中，之前曾有人问过此问题:

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

基本上，建议的解决方法是针对元素监视focus事件，然后根据希望该元素支持的工具来更新工具箱.如何标记元素中可用的工具取决于您，但是下面的示例根据元素测试CSS类的存在，以确定要显示哪些工具:

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 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';
      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);
    }
  }
});

很显然，如果您有很多变化，则可能需要设置一个CSS类字典(或data-tools属性)，该字典映射到工具集，而不是创建大量的if测试.

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.

这篇关于如何基于ContentTools上的内容禁用/启用工具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！