可以自定义编辑和渲染的Vue-Markdown

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