如何在XWiki的jsTree节点上添加更多自定义链接？

我之前在XWiki里整合jsTree的时候也踩过一模一样的坑！jsTree默认会自动清理节点里的自定义链接、onClick事件这类交互元素，把它们替换成#，不过有几个实用的解决方案，你可以挨个试试：

方法1：通过data属性传递自定义配置 + 事件绑定（最推荐） #

jsTree不会清理节点data字段里的自定义属性，我们可以把链接地址或动作标记存在这里，然后通过监听jsTree的节点选择事件来处理交互，完全避开它的默认清理机制。

比如在XWiki页面的脚本区（或通过XWiki的脚本服务添加）写这段代码：

// 初始化jsTree并配置节点数据
$('#myJSTree').jstree({
  'core': {
    'data': [
      {
        'text': '父节点',
        'children': [
          // 给子节点添加自定义data属性
          {
            'text': '跳转到我的页面',
            'data': { 'targetUrl': '/xwiki/bin/view/MySpace/MyTargetPage' }
          },
          {
            'text': '打开自定义弹窗',
            'data': { 'action': 'openCustomModal' }
          }
        ]
      }
    ]
  }
})
// 监听节点选择事件
.on('select_node.jstree', function(e, data) {
  const nodeInfo = data.node.data;
  // 判断自定义动作并执行
  if (nodeInfo.targetUrl) {
    window.location.href = nodeInfo.targetUrl;
  } else if (nodeInfo.action === 'openCustomModal') {
    // 这里可以调用XWiki的模态框API或者自定义逻辑
    XWiki.widgets.Modal.createModal({
      content: '<p>这是自定义弹窗内容</p>',
      title: '自定义动作'
    });
  }
});

这种方法的好处是既符合jsTree的设计规范，又不会触发它的内容过滤，同时还能和XWiki的现有API无缝配合。

方法2：开启check_callback允许自定义HTML #

jsTree默认会过滤节点文本中的HTML内容，我们可以通过配置check_callback来允许节点的HTML渲染，同时加载html_data插件来支持HTML格式的节点文本。

示例代码：

$('#myJSTree').jstree({
  'core': {
    // 允许节点创建/编辑时保留自定义HTML
    'check_callback': function(operation) {
      return operation === 'create_node' || operation === 'rename_node';
    },
    'data': [
      {
        'text': '<span onclick="runMyCustomFunc()">点击执行自定义函数</span>',
        'children': []
      }
    ]
  },
  // 确保加载html_data插件（XWiki的jsTree宏一般已包含）
  'plugins': ['html_data']
});

// 注意：自定义函数要在XWiki的安全上下文里注册，比如用XWiki的脚本服务
function runMyCustomFunc() {
  alert('自定义事件触发了！');
}

⚠️ 注意：XWiki有安全过滤机制，如果你直接在节点文本里写onClick事件，可能会被XWiki的内容过滤器拦截。建议通过XWiki的$services.javascript.addInlineScript方法来注册你的自定义函数，或者在页面设置里开启“允许脚本执行”（仅限信任的页面）。

方法3：利用XWiki jsTree宏的自定义节点配置 #

如果你是用XWiki自带的jsTree宏来生成树，也可以直接在宏的内容里给节点添加自定义data属性，然后配合页面脚本监听事件，逻辑和方法1一致。

比如宏调用代码：

{{jstree id="myTree"}}
* 父节点
** [{'data': {'targetUrl': '/xwiki/bin/view/MySpace/MyPage'}}] 跳转页面节点
** [{'data': {'action': 'showInfo'}}] 显示信息节点
{{/jstree}}

然后再添加和方法1一样的事件监听脚本即可。

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