JSTree节点添加按钮后重命名显示HTML代码的问题求助

这个问题我之前也碰到过，根源在于JSTree渲染节点和处理重命名的逻辑不一样——渲染时会解析node.text里的HTML，但重命名的输入框会把它当成纯文本直接显示。给你两个靠谱的解决方案：

核心思路是把节点的原始纯文本存在节点的data属性里，node.text只用来存储带按钮的渲染内容。重命名时用原始文本填充输入框，保存后再重新生成带按钮的HTML。

步骤1：初始化节点时存储原始文本 #

// 初始化节点（或动态添加节点时）
var bookNode = {
  text: "<button>Search</button>Books",
  data: { originalText: "Books" } // 存原始纯文本
};
$('#jstree').jstree('create_node', null, bookNode);

步骤2：重命名前替换输入框内容 #

监听before_edit事件，把重命名输入框的内容替换成原始纯文本：

$('#jstree').on('before_edit.jstree', function(e, data) {
  // 找到重命名输入框，设置为原始文本
  const renameInput = data.element.querySelector('.jstree-rename-input');
  renameInput.value = data.node.data.originalText;
});

步骤3：重命名后更新节点内容 #

监听after_edit事件，更新原始文本并重新生成带按钮的HTML，最后刷新节点：

$('#jstree').on('after_edit.jstree', function(e, data) {
  const newText = data.text;
  // 更新原始文本
  data.node.data.originalText = newText;
  // 重新生成带按钮的渲染文本
  data.node.text = `<button>Search</button>${newText}`;
  // 刷新节点显示
  $('#jstree').jstree('refresh_node', data.node);
});

这个方法更符合JSTree的设计逻辑——node.text始终存储纯文本，按钮作为独立的DOM元素添加到节点上，完全避免HTML和文本混存的问题。

步骤1：初始化/节点加载后添加按钮 #

监听ready和create_node事件，给节点的锚点元素添加按钮：

// 页面加载完成后给现有节点加按钮
$('#jstree').on('ready.jstree', function() {
  addSearchButtons();
});

// 动态新增节点后加按钮
$('#jstree').on('create_node.jstree', function() {
  addSearchButtons();
});

// 封装添加按钮的函数
function addSearchButtons() {
  $('#jstree').find('.jstree-node').each(function() {
    const $anchor = $(this).find('.jstree-anchor');
    // 避免重复添加按钮
    if (!$anchor.find('.search-btn').length) {
      $anchor.prepend('<button class="search-btn">Search</button>');
    }
  });
}

步骤2：处理按钮点击事件（可选） #

如果需要给按钮绑定点击逻辑，直接通过类名绑定即可：

$(document).on('click', '.search-btn', function() {
  const $node = $(this).closest('.jstree-node');
  const node = $('#jstree').jstree('get_node', $node);
  console.log('搜索节点:', node.data.originalText || node.text);
  // 这里写你的搜索逻辑
});

这种方法下，node.text始终是纯文本，重命名时输入框只会显示节点的真实名称，完全不会出现HTML代码。

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