Closed HealerLZH closed 1 year ago
我不太熟悉它提供示例的方式,不过,如果它有提供html
的示例。你应该可以直接复制到你的文章当中
编辑没问题。markdown-it 解析的时候当成了普通文本显示出来。难受
给个codepen的示例看看呀
我编辑的时候是用的您的编辑器。渲染是用的markdown-it
在您编辑器里面的预览是正常的。然后在nuxt框架中使用的是markdown-it render来渲染md。它将这段ifram当成了普通文本来显示。您组件有nuxt中的使用吗,如果找不到解决办法,我可能会您编辑器配套的渲染组件在nuxt服务端渲染。
如果在编辑器中可用,那完全可以通过导出的MdPreview
组件直接展示文章,表现是和编辑器预览一样的,你不需要再去写一遍markdown-it
相关的代码
原因是这样,最初后台是vue2,用的是一个其他的md编辑器,后来后台改vue3原来的那款编辑器没有v3版本,就找到了您这款。 客户端展示那边用的是nuxt2。
<div
id="markdown-body"
class="mx-auto md:mb-12"
v-html="$md.render(article.content || '')"
></div>
"@nuxtjs/markdownit他有一个$md.render方法,实现在服务端就将md转换为html,然后将完整的html页面返回到用户浏览器上。由此,页面上的其他内容,以及md的内容都以爬虫可识别的html标签形式传输。这样就达到了seo的效果。
天哪。就是这个html: true
。正常渲染了。
markdownit: {
preset: 'default',
linkify: true, // 将类似 URL 的文本自动转换为链接。
html: true,
breaks: true, // 转换段落里的 '\n' 到 <br>。
use: [
'markdown-it-highlightjs',
'markdown-it-task-lists',
[
'markdown-it-link-attributes',
{
attrs: {
target: '_blank', // md中的链接新页面打开
rel: 'noopener',
},
},
],
],
},
非常感谢,对您的能力感到倾佩。
解析渲染方面您的组件应该@nuxtjs/markdownit是一个逻辑,在nuxt3中应该也会有很好的表现。和后面升级到nuxt也会都切换过来。感谢开源
我正在使用编辑器用于文章编辑。希望在内容中嵌入codepen示例。请问可以做到吗,应该怎么做。