基于Vue和markdown-it的markdown编辑器

完美降价 (perfect-markdown)

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

perfect-markdown是基于Vue和markdown-it的Markdown编辑器。 核心灵感来自mavonEditor的实现，因此perfect-markdown几乎具有mavonEditor的所有功能。 此外，perfect-markdown还基于mavonEditor扩展了一些功能。

View Demo 查看演示 View Github 查看Github

安装完美降价 (Install perfect-markdown)

$ npm install perfect-markdown --save

用法 (Usage)

main.js:

main.js ：

import Vue from 'vue'
    import store from '@/store' // vuex is required in perfect-markdown
    import pmd from 'perfect-markdown'
    // use
    Vue.use(pmd, { store }) // register pmd vuex module

editor.vue

editor.vue

<div id="main">
    <pmd
        v-model="value"
        :showToolbar="true"
        :showTextarea="true"
        :uploadImgFn="uploadFn"
        :uploadFileFn="uploadFn"
        :plugins="{katex: true}"
        :imgWidthHeightAttr="{width: true, height: false}"
    ></pmd>
</div>

webpack.base.conf.js

webpack.base.conf.js

{
        test: /\.md$/,
        loader: 'raw-loader'
    }

API (API)

道具 (props)

name	type	default	describe
value	String	''	textarea value
showToolbar	Boolean	true	show toolbar
showTextarea	Boolean	true	show the textarea
uploadImgFn	Function	funtion	uploadImg
uploadFileFn	Function	funtion	uploadFile
plugins	Object	{}	katex or mathjax plugin, { katex: true } or { mathjax: true }. (mathjax is more powerful than katex, but it rendering efficiency is lower)
customLeftToolbar	Boolean	false
customRightToolbar	Boolean	false
imgWidthHeightAttr	Object	{width: false, height: false}	this is default output [name](url), and all true will output [name =WxH](url)
...	...	...	....

名称	类型	默认	描述
值	串	''	文本值
showToolbar	布尔型	真正	显示工具栏
showTextarea	布尔型	真正	显示文字区域
uploadImgFn	功能	功能	uploadImg
uploadFileFn	功能	功能	上传文件
外挂程式	目的	{}	katex或mathjax插件，{katex：true}或{mathjax：true}。 (mathjax比katex更强大，但渲染效率较低)
customLeftToolbar	布尔型	假
customRightToolbar	布尔型	假
imgWidthHeightAttr	目的	{宽度：假，高度：假}	这是默认输出[name](url)，所有true都会输出[name = WxH](url)
...	...	...	....

上传img文件 (upload img file)

<div>
    <pmd ref=md :uploadImgFn="imgFn" :uploadFileFn="fileFn"></pmd>
</div>
export default {
    methods: {

        imgFn(payload) {
            const ret = await this.upload(payload); // the payload has the file(File) param from pmd
            return {
                upload: true, // required
                url: ret.data.url
            };
        },
        fileFn(payload) {
            const ret = await this.upload(payload); // the payload has the file(File) param from pmd
            return {
                upload: true, // required
                url: ret.data.url
            };
        }
    }
}

插槽 (slot)

<template>
    <div>
        <pmd
            v-if="renderType === 0"
            v-model="form.content"
            :uploadImgFn="uploadFn"
            :uploadFileFn="uploadFn"
            :plugins="{mathjax: true}"
            :customLeftToolbar="false"
        >


            <template slot="toolbarLeftBefore"><span><i class="iconfont icon-clean"></i></span></template>
            <template slot="toolbarLeftAfter"><span><i class="iconfont icon-clean"></i></span></template>
            <template slot="toolbarRightBefore"><span><i class="iconfont icon-clean"></i></span></template>
            <template slot="toolbarRightAfter"><span><i class="iconfont icon-clean"></i></span></template>
        </pmd>
    <div>
<template>

vuex模块api (vuex module api)

<template>
    <div>
        <pmd>
        </pmd>
    </div
</template>
import { mapActions, mapGetters } from 'vuex';
export default {
    computed: {
        ...mapGetters({
            editorIsSplit: 'markdownBody/getEditorIsSplit',
            editorIsFullscrean: 'markdownBody/getEditorIsFullscrean',
            textareaContent: 'markdownBody/getTextareaContent'
        })
    },
    methods: {
        ...mapActions({ setTextareaContent: 'markdownBody/setTextareaContent' })
    }
}

翻译自: https://vuejsexamples.com/a-markdown-editor-based-on-vue-markdown-it/