vue-freemde

0.1.0 • Public • Published

vue-freemde

npm version Build Status license

What it is

A Vue Markdown Editor for Custom Editing and Rendering

Live Demo: try coding with jsfiddle

2018-12-15 23.56.19.gif

install

$ npm i vue-freemde -S

How to use

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'
      }],
      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: Custom markdown renderer hook. default use marked renderer.
  • view: The rendered callback hook, Used for binding events or element-based rendering.
  • inlineAttachmentOptions: Paste Image Parameters.
    • onFileReceived: Paste Image Received, param: file.
    • progressText: default '![uploading file...]()'
    • urlText: '![]({filename})'.
    • errorText: 'Error uploading file'.

and more configs see: freemde configuration

License

😃 if you have any comments or wish to contribute to this project, you are welcome to submit Issues or PR.

MIT - yansenlei

Package Sidebar

Install

npm i vue-freemde

Weekly Downloads

22

Version

0.1.0

License

MIT

Unpacked Size

2.37 MB

Total Files

45

Last publish

Collaborators

  • leiys