解决ClipboardJS无法复制HTML生成的含图片代码段问题

问题原因 #

你当前的ClipboardJS默认只会复制元素的文本内容，无法直接获取包含图片标签、段落标签的完整HTML源码，因此需要自定义ClipboardJS的内容获取逻辑。

解决步骤 #

1. 修改ClipboardJS初始化逻辑 #

通过ClipboardJS的text配置项，指定复制内容为目标容器的HTML源码：

var clipboard = new ClipboardJS("#copyButton", {
  text: function() {
    // 获取生成内容的完整HTML代码
    return $("#TexArea-output").html();
  }
});

2. 完善用户反馈（可选） #

添加复制失败的提示，并自动重置tooltip文本，提升使用体验：

clipboard.on("error", function(e) {
  $(e.trigger).attr("data-original-title", "复制失败！").tooltip("show");
  setTimeout(() => {
    $(e.trigger).attr("data-original-title", "复制HTML").tooltip("hide");
  }, 2000);
});

3. 完整代码示例 #

$(document).ready(function () {
  // 初始化ClipboardJS，指定复制目标容器的HTML代码
  var clipboard = new ClipboardJS("#copyButton", {
    text: function() {
      return $("#TexArea-output").html();
    }
  });

  clipboard.on("success", function (e) {
    $(e.trigger).attr("data-original-title", "已复制！").tooltip("show");
    e.clearSelection();
    // 2秒后重置tooltip提示文本
    setTimeout(() => {
      $(e.trigger).attr("data-original-title", "复制HTML").tooltip("hide");
    }, 2000);
  });

  clipboard.on("error", function(e) {
    $(e.trigger).attr("data-original-title", "复制失败！").tooltip("show");
    setTimeout(() => {
      $(e.trigger).attr("data-original-title", "复制HTML").tooltip("hide");
    }, 2000);
  });

  $("#send").click(function () {
    let message = $("#messageGpt").val();
    let engine = $("#engine").val();

    $.post(
      "' . $url . '",
      { message: message, engine: engine },
      function (data) {
        $("#TexArea-output").html(data);
        $("#copyButton").removeClass("d-none");
      }
    );
  });
});

可选：格式化HTML代码（美观输出） #

如果需要复制带缩进、格式工整的HTML，可以添加一个简单的格式化函数：

function formatHTML(html) {
  return html
    .replace(/></g, ">\n<")
    .replace(/^\s*\n/gm, "")
    .split("\n")
    .map((line, index, arr) => {
      let depth = 0;
      // 计算当前行的标签嵌套深度
      if (index > 0) {
        depth = arr.slice(0, index).reduce((acc, l) => {
          return acc + (l.match(/</g) || []).length - (l.match(/>/g) || []).length;
        }, 0);
      }
      return "  ".repeat(Math.max(0, depth)) + line.trim();
    }).join("\n");
}

然后修改ClipboardJS的text函数：

text: function() {
  return formatHTML($("#TexArea-output").html());
}

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