tiptap markdown table 无法渲染

156 阅读1分钟

接口返回markdown格式的table数据无法渲染

| 排名 | 城市   | 场次 | 胜 | 平 | 负 | 积分 |
|------|--------|-----|----|----|----|------|
| 1    | 南通   | 3   | 3  | 0  | 0  | 9    |

一直以为是\n 没有被正确渲染,后面发现chatgpt复制的能正常渲染,看他们复制出来代码也是一样的,感觉他们可能做了特殊处理,看他们代码发现他们同时复制text/plain, text/html的两种

重新修改复制方法也搞成复制两种格式

export function copyToClipboard(e) {
  let clipboardItemData;
  // 处理输入参数,根据类型创建不同的剪贴板数据
  if (typeof e === "string") {
    // 如果是字符串,创建纯文本格式的剪贴板项
    clipboardItemData = {
      "text/plain": e,
    };
  } else {
    // 如果是对象,遍历每个条目并转换为Blob对象
    clipboardItemData = e;
  }

  // 将所有值转换为Blob对象(如果还不是的话)
  const normalizedData = Object.fromEntries(
    Object.entries(clipboardItemData).map(([mimeType, content]) => {
      if (typeof content === "string") {
        // 如果内容是字符串,创建具有指定MIME类型的Blob
        return [mimeType, new Blob([content], { type: mimeType })];
      } else {
        // 否则直接使用现有内容(假设已经是Blob或其他合适的类型)
        return [mimeType, content];
      }
    })
  );

  debugger;
  // 创建剪贴板项
  const clipboardItem = new ClipboardItem(normalizedData);

  // 写入剪贴板
  navigator.clipboard
    .write([clipboardItem])
    .then(() => {
      // 成功回调
      console.log("success");
    })
    .catch((event) => {
      // 失败回调
      console.log("uuuu", event);
    });
}

// table 数据复制方式
copyToClipboard({
  "text/plain": text,
  "text/html": markedParse(text), // markdown 渲染后的html代码
})

image.png

image.png

image.png