Vue.js的Markdown编辑器组件 - v-markdown-editor

Vue.js的Markdown编辑器组件 - v-markdown-editor
插件名称 v-markdown-editor
发布时间 2020年11月29日
插件作者 nasa8x

一个简单,干净的所见即所得的Markdown编辑器,用于Vue.js。由Bootstrap 4和Font Awesome标志性字体提供支持。

安装和下载:

# NPM
$ npm install v-markdown-editor--save

用法:

安装,导入组件。

import Css from './css/layout.css'
import 'bootstrap'

import Vue from 'vue'
import App from './app.vue'
import router from './router';
import store from './store'
import Editor from '../src/index'

Vue.use(Editor);

const app = new Vue({
  el: '#app', 
  store,
  router,
  render: h => h(App)
})


export { app, router, store }

示例应用程序。

<template>
  <div class="container">

      <!-- <transition name="fade" mode="out-in">
          <router-view class="view" keep-alive></router-view>
      </transition> -->

      <div class="form-group">
          <markdown-editor v-model="value"></markdown-editor>
      </div>

      <div class="form-group">
          <button @click="val" class="btn btn-primary">Change</button>
      </div>

      <div class="form-group">
          <pre>{{value}}</pre>
      </div>



      <div class="form-group">
          <markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen" buttonClass="btn btn-outline-success"></markdown-editor>
      </div>

  </div>
</template>


<script>
  export default {
      data() {
          return {
              value: 'Hello world'
          }
      },
      methods: {
          val() {
              this.value = "jjkjlkjljlkjlkjlkjlkj"
          }
      }
  }
</script>