getHTML 的结果被 html2md 转换的结果不正确

本贴最后更新于 647 天前,其中的信息可能已经时移俗易

有个问题哈,

getHTML 的结果被 html2md 转换的结果不正确,比如:

  1. 部分代码块的的标识转换没了

这应该是 lute 通用的转换函数所至,

时间有限, 还未阅读全部文档,

有哪位大佬有这两个 api 无损转换的例子吗

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    311 引用 • 1666 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • lzsk

    我也有这个问题 大佬方便沟通一下吗

    1 回复
  • 其他回帖
  • wangzf-no1
    作者

    我目前有三个方案,

    1. 在调用 html2md 前处理 html 字符串,
      <div class="language-mindmap">- 教程</div> 转换成 <pre><code class="language-mindmap">- 教程</code></pre>
    2. 更改如下涉及到 lute 的方法,对输出的 HTML 做手脚
      export const getHTML = (vditor: IVditor) => {
          if (vditor.currentMode === "sv") {
              return vditor.lute.Md2HTML(getMarkdown(vditor));
          } else if (vditor.currentMode === "wysiwyg") {
              return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
          } else if (vditor.currentMode === "ir") {
              return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
          }
      };
      
    3. 更改 lute 的 HTML2Md 方法,对 md 的转换规则做特殊支持
  • wangzf-no1
    作者

    我用的是 第一个方案

    
    function transformHtml(html) {
      const box = document.createElement('div');
      box.innerHTML = html;
      const supMap = {};
      // 注意: 有先后顺序,脚注也可以包含自定义区块
      const selector = [
        // sup: class="footnotes-ref"
        {
          css: 'sup.footnotes-ref',
          convert: (node) => {
            const a = node.querySelector('a');
            const href = a && a.getAttribute('href');
            const [_, id] = /#(.+)/g.exec(href) || [];
            const mark = a.innerText;
            supMap[id] = mark;
            node.outerHTML = `[^${mark}]`;
          }
        },
        // supDefs:,
        {
          css: 'div.footnotes-defs-div',
          convert: (node) => {
            let defIndex = 1;
            const defs = node.querySelectorAll('.footnotes-defs-ol>li');
            const refs = node.querySelectorAll('.footnotes-defs-ol .vditor-footnotes__goto-ref');
            // 去掉内容的跳转
            refs.forEach(node => node.outerHTML = '');
    
            const result = Array.from(defs).map(li => {
              const id = node.getAttribute('id');
              // 注意这里的div,不加这层容器解释的内容不正确
              return `<div>[^${supMap[id] || defIndex++}]: ${li.innerHTML}</div>`;
            }).join('');
    
            node.outerHTML = result;
          }
        },
    
        // customCode
        {
          // language-math
          css: 'div[class^="language-"]',
          convert: (node) => {
            const clsName = node.getAttribute('class');
            const [_, language] = /\blanguage-([^\s]+)/g.exec(clsName);
            let str = '';
            switch (language) {
              case 'math':
                str = `$$
                ${node.innerText}
                $$`
                break;
              default:
                str = `<pre><code class="${clsName}" >${node.innerHTML}</code></pre>`
            }
            node.outerHTML = str;
          }
        }
    
      ]
    
    
    
      selector.forEach(({ css, convert }) => {
        box.querySelectorAll(css).forEach(convert)
      });
    
      return box.innerHTML;
    }
    

推荐标签 标签

  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 118 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 28 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 15 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 470 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 2 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 598 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    15 引用 • 7 回帖 • 9 关注
  • 安装

    你若安好,便是晴天。

    128 引用 • 1184 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 683 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 3 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 350 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 44 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 96 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 24 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 317 关注
  • CodeMirror
    1 引用 • 2 回帖 • 114 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 150 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 492 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 177 关注