perfect-markdown

What is 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.

Links

codepen demo

Install perfect-markdown

$ npm install perfect-markdown --save

Usage

main.js:

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

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>

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)
...	...	...	....

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 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' })
    }
}

add i18n

jaHelpMD and messages refer to /src/lang/en

setHelp('ja', jaHelpMD)
setLangMessages('ja', messages)
setI18nLocale('ja')

Changelog

Detailed changes for each release are documented in the release notes.

Licence

Apache 2.0

Copyright (c) 2019-present