先上代码:
<template>
<div v-html="marked(content)"></div>
</template>
<script>
....
....
methods:{
markdown (content) {
var renderer = new marked.Renderer()
renderer.image = (href, title, text) => {
return '<a @click="showFullImage">' + text + '</a>'
}
marked.setOptions({
renderer: renderer,
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: (code) => {
return hljs.highlightAuto(code).value
}
})
return marked(content)
}
}
</script>
我在使用vue做一个工具,需要输入框中的markdown代码转为html,然后展示出来。
其中我想做的一个功能是,当用户输入:
![pic](www.example.com/img.jpg "title")
使用marked的自定义渲染函数,转换成html(已经实现):
<a @click="showFullImage">title</a>'
现在的问题是,在展示的时候,使用v-html无法完成函数绑定。各位大神有没有好的方法?
简洁的说法是,我需要自己生成一段vue格式的html字符串,然后将这个字符串渲染出来,里面有各种vue指令需要绑定,该怎么做呢?
@SayGoodBey ,恰好看到你问了,那就写出我的方法吧。
我是在一个子组件中实现的,你可以动态的添加该子组件:
下面的
content
是markdown格式的数据,../common/markdown
文件是自己写好的基于marked的解析函数,它会将Markdown
格式析为Vue
格式的字符串:用下面的方法即可以实现点击图片时,会输出信息。当然其他的vue处理方法同样支持。
额,解决这个问题是为了写一个支持Markdown格式的评论系统。所以顺便在这里推荐一下:
Wildfire: A drop-in replacement for other comment plug-ins.
一定要点进去,好看又好用的评论系统。