vue markdown_Vue.js的Markdown编辑器组件

vue markdown

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

Vue.js Markdown Editor component.

Vue.js Markdown编辑器组件。

View Demo 查看演示 Download Source 下载源

安装 (Install)

npm install v-markdown-editor

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

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

// global register
Vue.use(Editor);

要求 (Require)

Bootstrap 4 & Fontawesome

Bootstrap 4和Fontawesome

例 (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>

自定义提交表单输入名称 (Custom submit form input name)

<template>
    <div class="container">
       <markdown-editor name="html"></markdown-editor>
    </div>
</template>

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

vue markdown