-
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我目前有三个方案,
- 在调用
html2md
前处理 html 字符串,
把<div class="language-mindmap">- 教程</div>
转换成<pre><code class="language-mindmap">- 教程</code></pre>
- 更改如下涉及到 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); } };
- 更改 lute 的
HTML2Md
方法,对 md 的转换规则做特殊支持
- 在调用