vue中使用markdown
参考资料:https://github.com/hinesboy/mavonEditor
https://www.jianshu.com/p/aca26ec75ec3
示例:
<template>
<div>
<!--markdown编辑-->
<no-ssr>
<mavon-editor :toolbars="toolbars" v-model="value"/>
</no-ssr>
<!--markdown展示-->
<!--在 mavon-editor 标签中添加class="md" 和在上一层嵌套<no-ssr>都可以达到解析markdown语法的效果 -->
<mavon-editor class="md" previewBackground="white" :toolbarsFlag="false" defaultOpen='preview' :subfield="false"
:editable="false" :scrollStyle="true" :toolbars="toolbars" :value="value"/>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
value: '',
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存(触发events中的save事件)
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}
}
},
}
</script>