如何在Vue3中渲染Markdown字段？

nvbavucw 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(166)

我遵循Nova文档并将Markdown field链接到TEXT database type：

Markdown::make('Content', 'content_text')

字符串
我想在我的Web应用程序中以正确的格式呈现它：

的数据
但它只呈现string content，取消了以下格式：

的
field data是这样获取的：

const state = reactive({
    content: ""
})

axios.get('/donate')
    .then(res => {
        const data = res.data[0]
        state.content = data['content_text']
    })

型
并像这样传递给模板：

<p>{{ state.content }}</p>

型
我如何让Markdown工作？
我使用Vue3, Laravel8, Nova3

vue.js

来源：https://stackoverflow.com/questions/69774257/how-to-render-markdown-field-in-vue3

1条答案

按热度按时间

gupuwyp21#

这就是它的工作原理。首先安装marked和DOMPurify库：

npm i marked dompurify

字符串
然后在Vue3 component中设置它们：

<script setup>
import {reactive} from "vue";
import marked from 'marked';
import DOMPurify from 'dompurify';

const state = reactive({
    content: ""
})

state.content = DOMPurify.sanitize(marked(YOUR_MARKDOWN));

</script>

型
然后在template中渲染它：

<div v-html="state.content"></div>

型
DOMPurify库应该sanitize html，从而使v-html的使用安全。
如果你遇到了令人讨厌的devtools warnings：

DevTools failed to load source map: Could not load content for http://localhost:3000/js/purify.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

型
由于DOMPurify引起的错误，我发现最简单的方法是通过以下方式阻止它们：
1.进入devtools settings（点击Chrome Devtools中的齿轮符号）
1.禁用Javascript source maps和CSS source maps

赞(0）回复(0）举报 2023-08-07

我来回答

如何在Vue3中渲染Markdown字段？

1条答案

相关问题

热门标签

最新问答