Vue.js的Vue Markdown编辑器组件

v-markdown编辑器 (v-markdown-editor)

Vue Markdown Editor component for Vue.js.

Vue.js的Vue Markdown编辑器组件。

View Demo 查看演示 View Github 查看Github

安装 (Install)

npm install v-markdown-editor

import 'v-markdown-editor/dist/v-markdown-editor.css';

import Vue from 'vue'
import Editor from 'v-markdown-editor'

// global register
Vue.use(Editor);

使用CDN (Use CDN)

<link href="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>

<link href="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">

<script src="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>

更改 (Change)

1.2.0
- Support Fontawsome &  Material Design Icons 
- Remove jQuery

例 (Example)

<template>
    <div class="container">
        <markdown-editor :options="options"></markdown-editor>
    </div>
</template>


<script>
   
    export default {

        data() {
            return {
                // default options, see more options at: http://codemirror.net/doc/manual.html#config
                options: {                   
                    // lineNumbers: true,
                    // styleActiveLine: true,
                    // styleSelectedText: true,
                    // lineWrapping: true,
                    // indentWithTabs: true,
                    // tabSize: 2,
                    // indentUnit: 2
                }

            }

        }

    }

</script>

模型 (v-model)

<template>
    <div class="container">
        <markdown-editor v-model="value"></markdown-editor>
    </div>
</template>


<script>
   
    export default {

        data() {
            return {
                value: 'Hello world!'
            }

        }

    }

</script>

工具列 (Toolbar)

// full toolbar: clipboard redo undo | bold italic strikethrough heading | image link | numlist bullist code quote | preview fullscreen

<template>
    <div class="container">
       <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor>
    </div>
</template>

添加自定义按钮 (add custom button)

<template>
    <div class="container">
       <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen | upload" :extend="custom"></markdown-editor>
    </div>
</template>

<script>

    export default {
        data() {
            return {              

                custom: {
                    'upload': {
                        cmd: 'upload',
                        ico: 'fas fa-upload',
                        title: 'Upload File'
                    }
                }
            }
        },       


        created() {
            this.$root.$on('markdown-editor:upload', function (md) {
                md.drawImage({url:'https://i.imgur.com/CbCXhBe.png', title:'this image title'});
            });

        }


    }

</script>

手柄编辑器 (Handle editor)

<template>
    <div class="container">
       <markdown-editor ref="md"></markdown-editor>

         <button @click="replace" class="btn btn-primary">Handle</button>

    </div>
</template>


<script>

    export default {
       
        methods: {          

            replace(){

                // more info: https://codemirror.net/doc/manual.html#api

                this.$refs.md.editor.replaceSelection("Handle editor");
            }
        },  


    }

</script>

自动调整大小 (Auto resize)

<markdown-editor height="auto"></markdown-editor>

按钮主题 (Button Theme)

<markdown-editor theme="primary"></markdown-editor>

翻译自: https://vuejsexamples.com/vue-markdown-editor-component-for-vue-js/