VUE2整合markdown编辑器 mavon-editor

GITEE文档
文档中详细介绍了自定义工具栏等

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, // 预览
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

文中对于图片上传未提及，后面会进行补充。

安装

npm install mavon-editor --save
1

封装发布组件

<template>
    <div>
        <mavon-editor
            v-model="newContent"
            ref="md"
            style="min-height: 550px;"
        />
    </div>
</template>

<script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
    // 注册
    components: {
        mavonEditor,
    },
    props: {
        content: {
            type: String,
            default: null
        }
    },
    created() {
    },
    mounted() {
    },
    computed:{
        newContent: {
            get: function () {
                return this.content;
            },
            set: function (val) {
                this.$emit('receiveContent',val);
            }
        }
    },
    data() {
        return {
            //及时转的html
            html: '',
        }
    },
    methods: {
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

使用发布组件

<markdown-editor :content="params.content" @receiveContent="receiveContent"></markdown-editor>
1

//接收内容
        receiveContent(content) {
            this.params.content = content;
        },
1
2
3
4

效果如下图：

封装预览组件

<template>
    <div class="content_div">
        <mavon-editor class="md" :value="content"
                      :subfield="false"
                      :toolbars="toolbars"
                      defaultOpen="preview"
                      :scrollStyle="true"></mavon-editor>
    </div>
</template>
<script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
    name: "MarkdownEditorPreview",
    created() {
    },
    mounted() {
    },
    components: {
        mavonEditor,
    },
    props: {
        content: {
            type: String,
            default: ""
        }
    },
    methods: {
    },
    data() {
        return {
            toolbars: {
                // 导航目录
                navigation: true,
            }
        }
    }
}
</script>
<style scoped lang="scss">
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

使用预览组件

<markdown-editor-preview :content="data.content"></markdown-editor-preview>
1

效果如下图：