vue markdown的简单使用

 

1.简介

一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。
编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，

2.安装

npm i -S vue-meditor
cnpm i -S vue-meditor

3.在项目中使用

markdown.vue

<template>
  <div class="markdown">
    <div class="edit">
      <markDown height="800px" width="100%"></markDown>
    </div>

  </div>
</template>
<script>
import markDown from "../../components/markdown/markdown-editor";
export default {
  components: {
    markDown
  },
  data() {
    return {
      article: {
        title: "",
        tag: ""
      }
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    loadAll() {
      return [{ value: "vue" }, { value: "node.js" }];
    },
    handleSelect(item) {
      console.log(item);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    }
  }
};
</script>
<style lang="less" scoped>
.markdown {
  padding: 20px;
  .edit {
    width: 100%;
  }
}
</style>

子组件：markdown-editor.vue

<template>
  <div class="markdown">
    <mavonEditor v-model="content" ref="md"  :style="{width:width,height:height}" @imgAdd="$imgAdd" @change="changeMavon" />
  </div>
</template>
<script>
import mavonEditor from "vue-meditor";

export default {
  components: {
    mavonEditor
  },
  props: {
     width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "600px"
    }
  },
  data() {
    return {
      content: "",
      configs: {}
    };
  },
  mounted() {},
  methods: {
    changeMavon() {},
    $imgAdd() {}
  }
};
</script>
<style scoped>
.markdown {
  width: 100%;
}
</style>

4.props

名称	类型	说明	默认值
title	String	编辑器标题，默认为空，不显示	-
titleStyle	Object	标题样式，如果自定义标题时可自行编写样式	-
initialValue	String	编辑器初始化内容	-
width	Number	编辑器宽度	-
height	Number	编辑器高度，单位 px	600
theme	String	代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub	Light
autoSave	Boolean	是否自动保存	true
interval	Number	自动保存频率，单位毫秒	10000
toolbars	Object	工具栏配置，具体功能详见工具栏功能配置表	-
mode	Number	初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑	-

5.events

名称	说明
on-save	自动保存或者手动保存时触发，返回当前编辑器内原始输入内容和转以后的内容

6.工具栏配置

名称	说明	默认显示
strong	粗体	是
italic	斜体	是
overline	删除线	是
h1	标题1	是
h2	标题2	是
h3	标题3	是
h4	标题4	否
h5	标题5	否
h6	标题6	否
hr	分割线	是
quote	引用	是
ul	无序列表	是
ol	有序列表	是
code	代码块	是
link	链接	是
image	image	是
table	表格	是
checked	已完成列表	是
notChecked	未完成列表	是
shift	预览	是
print	打印	否
theme	主题切换	是
fullscreen	全屏	是
exportmd	导出为*.md文件	是
importmd

7工具栏配置

// 例：
const config = {
    print:false // 隐藏掉打印功能
}
<MarkDown :toolbars="config"/>

 这里只是简单的介绍了，而已，自己动手试试，很简单的，也可以自己去配置MarkDown