1.安装
npm install mavon-editor --save
2.在plugins中创建vue-markdown.js
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
3.在nuxt.config.js中引入
css: [
{ src: "mavon-editor/dist/css/index.css" },
],
plugins: [
{ src: "~plugins/vue-markdown.js", ssr: false },
],
4.在页面中使用举例
<template>
<div>
<no-ssr><mavon-editor :toolbars="markdownOption" v-model="handbook"/></no-ssr>
</div>
</template>
<script>
export default {
data() {
return {
markdownOption:{
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: false, // 全屏编辑
readmodel: false, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存(触发events中的save事件)
navigation: true, // 导航目录
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
subfield: true, // 单双栏模式
preview: true, // 预览
},
handbook:"#### 这是手册",
},
};
</script>
版权声明:本文为weixin_36185028原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。