@letsnova/perfect-markdown

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'
    // 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>

webpack.base.conf.js

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

i18n

we support i18n and integrated Chinese Simplified(zh-CN) and English(en)，default Chinese Simplified.

    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
    consoloe.log(pmd)
    pmd.setI18nLocale('en') // set locale english
    // also we can add new language package through the following methods
    // pmd.setLangMessages(lang, messages) // set lang and translation
    // pmd.setHelp(lang, helpMd) // set lang and help doc, the doc is a markdown file

pmd.setLangMessages(lang, messages) messages demo

{

        editor: {
            preview: 'preview'
        },
        toolbar: {
            left: {
                bold: 'Bold',
                italic: 'Italic',
                title: 'Header',
                h1: 'Header 1',
                h2: 'Header 2',
                h3: 'Header 3',
                h4: 'Header 4',
                h5: 'Header 5',
                underline: 'Underline',
                throughline: 'Strikethrough',
                mark: 'Mark',
                sub: 'Subscript',
                sup: 'Superscript',
                left: 'left',
                center: 'center',
                right: 'right',
                quotation: 'Quote',
                ul: 'Ul',
                ol: 'Ol',
                code: 'Code',
                table: 'Table',
                link: 'Link',
                image: 'Image',
                video: 'Video',
                fromNetwork: 'From network',
                fromLocal: 'Local',
                attachment: 'attachment',
                clear: 'Clear',
                imageName: 'Image Name',
                imageLink: 'Image Link',
                cancel: 'Cancel',
                confirm: 'Confirm',
                videoLink: 'Video Link',
                linkName: 'Link Name',
                attachmentName: 'Attachment Name',
                attachmentLink: 'Attachment Link',
                fileName: '【Attachment】'
            },
            right: {
                split: 'Split ',
                fullscreen: 'Fullscreen',
                import: 'Import',
                export: 'Export',
                print: 'Print',
                help: 'Help',
                downloadFileName: 'unkown.md'

            }
        },
        autoTextarea: {
            placeholder: 'please input'
        }
    }

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

Changelog

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

Licence

Apache 2.0

Copyright (c) 2019-present