Question

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

Answer 1

此问题之前曾在项目的GitHub问题中提出过：https://github.com/GetmeUK/ContentTools/issues/173

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

# 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测试。

如何根据ContentTools上的内容禁用/启用工具？

1 个答案: