wangzf-no1
关注
86413 号成员,2022-07-11 16:22:34 加入
141
个人主页 浏览
1h41m
在线时长
  • getHTML 的结果被 html2md 转换的结果不正确

    2022-07-26 10:06

    我用的是 第一个方案

    
    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;
    }
    
  • getHTML 的结果被 html2md 转换的结果不正确

    2022-07-13 11:04

    我目前有三个方案,

    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 的转换规则做特殊支持