如何实现鼠标选中并复制jQuery JsTree中的节点文本内容

问题结论 #

• 可以实现用户鼠标选中并复制jsTree节点文本的需求
• 该需求仅通过CSS就能完成，不需要额外编写JavaScript逻辑

实现原理 #

jsTree默认样式中给节点文本容器.jstree-anchor设置了user-select: none属性，禁止了文本选中行为，只要覆盖该属性即可恢复选中能力。

具体实现代码 #

新增CSS样式 #

/* 覆盖jstree默认禁止选中的样式 */
.jstree-default .jstree-anchor {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <style>
    .jstree-default .jstree-anchor {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
    }
  </style>
</head>
<body>
  <div id="tree"></div>
  <script>
    $(document).ready(function() {
      $('#tree').jstree({
        'core': {
          'data': [
            { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
            { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
            { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
            { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
          ]
        }
      });
    });
  </script>
</body>
</html>

效果说明 #

添加上述CSS后，直接用鼠标选中任意节点的文本内容，按下常规复制快捷键即可完成复制，不会影响jsTree原有展开、折叠节点的交互逻辑。如果项目中使用了节点拖拽、点选多选等特殊交互，可以根据实际需求调整CSS的作用范围，避免影响原有功能。

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