如何允许用户选中Fancytree节点中的文本？

我之前也遇到过一模一样的困扰！Fancytree默认通过CSS样式禁用了节点文本的选择功能，不过咱们有几个简单的办法可以搞定：

方案1：修改CSS全局允许文本选择 #

这是最直接的办法，只需要给Fancytree的标题元素添加允许文本选择的样式：

.fancytree-title {
  user-select: text !important;
  -webkit-user-select: text !important; /* 适配Chrome、Safari等webkit内核浏览器 */
  -moz-user-select: text !important; /* 适配Firefox */
}

添加这段CSS后，所有节点的标题文本就可以像普通网页文本一样选中复制了，完全不影响节点的点击、展开等原有功能。

方案2：通过JS实现交互性复制（比如一键复制/点击选中） #

如果需要更灵活的交互，比如点击节点自动选中文本，或者右键菜单一键复制，可以在Fancytree初始化时配置事件：

$("#tree").fancytree({
  // 保留你的其他配置项...
  // 点击节点时自动选中文本
  activate: function(event, data) {
    const titleElement = data.node.span;
    // 创建选区并选中节点文本
    const selectionRange = document.createRange();
    selectionRange.selectNodeContents(titleElement);
    const windowSelection = window.getSelection();
    windowSelection.removeAllRanges();
    windowSelection.addRange(selectionRange);
  },
  // 添加右键菜单复制选项
  contextMenu: {
    menu: function(node) {
      return [
        {
          title: "复制节点文本",
          action: function(node) {
            // 使用剪贴板API复制文本
            navigator.clipboard.writeText(node.title)
              .then(() => alert("文本已成功复制到剪贴板"))
              .catch(err => console.error("复制失败：", err));
          }
        }
      ];
    }
  }
});

这个方案适合需要提升用户体验的场景，不用手动拖动选中文本。

方案3：临时允许文本选择（比如按住Ctrl键时） #

如果不想全局开启文本选择，只想在特定操作下允许，可以添加鼠标事件监听：

// 按住Ctrl点击时允许选择文本
$("#tree").on("mousedown", ".fancytree-title", function(e) {
  if (e.ctrlKey) {
    $(this).css({
      "user-select": "text",
      "-webkit-user-select": "text",
      "-moz-user-select": "text"
    });
  }
});
// 鼠标松开后恢复默认样式
$("#tree").on("mouseup", ".fancytree-title", function() {
  $(this).css({
    "user-select": "",
    "-webkit-user-select": "",
    "-moz-user-select": ""
  });
});

这样用户只有按住Ctrl键点击节点时，才能选中文本，平时还是保持原有交互逻辑。

我个人最推荐方案1，简单高效，除非你有特殊的交互需求，否则这个方案完全够用。

内容的提问来源于stack exchange，提问作者Jim Malone