vue-freemde

What it is

一個可以自定義編輯和渲染的Vue-Markdown元件, 基於simplemde

Github: github.com/yansenlei/v…

Demo: jsfiddle.net/leiys/s2jw8…

安裝

$ npm i vue-freemde -S
複製程式碼

使用

Import globally

import Vue from 'vue';
import VueFreemde from 'vue-freemde';
import App from './App';

Vue.config.productionTip = false;
Vue.use(VueFreemde);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});
複製程式碼

Import locally

import VueFreemde from 'vue-freemde';

export default {
  name: 'app',
  components: {
    VueFreemde,
  },
  data() {
    return {
      data: '',
      configs: {
        spellChecker: false,
        autofocus: true,
        toolbar: ['bold', 'italic', 'strikethrough', '|', 'link', 'image', {
          name: 'custom',
          action: (markdown) => {
            const data = markdown.value()
            this.$emit('save', data)
          },
          className: 'fa fa-save',
          title: 'Save'
      }],
      markdown () {
          // custom render
          return render('# title')
      },
      inlineAttachmentOptions: {
        onFileReceived (file) {
          // upload to your server, get image url...
          this.settings.setAttachmentUrl(url, this)
        }
      }
      }
    }
  },
  computed: {
    editor () {
      return this.$refs.Markdown.editor
    }
  }
};
複製程式碼

Use in template

<template>
  <div id="app">
    <vue-freemde v-model="data" ref="Markdown" :configs="configs"></vue-freemde>
  </div>
</template>
複製程式碼

Configs 配置資訊

• markdown: 自定義渲染器鉤子，預設為marked
• view: 渲染結束的鉤子，用於繫結事件或基於元素的渲染
• inlineAttachmentOptions: 貼上/拖拽 圖片引數
  • onFileReceived: 接收圖片的鉤子, 引數: file.
  • progressText: default '![uploading file...]()'
  • urlText: '![]({filename})'.
  • errorText: 'Error uploading file'.

更多配置資訊參見: freemde configuration

License

歡迎提交Issues、PR

MIT - yansenlei