Clean WYSIWYG Editor For Vue.js

Description:

A simple clean WYSIWYG editor component for comments, CMS, Blog, etc.

How to use it:

1. Import the component after installed.

import VueWysiwyg from '@mycure/wysiwyg';

2. Create a WYSIWYG editor component in your template.

<template>
  <div>
    <mc-wysiwyg v-model="html"></mc-wysiwyg>
  </div>
</template>
export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: ''
    }
  }
}

3. Hide editor buttons using the hide prop. All possible buttons:

  • bold
  • italic
  • underline
  • strikethrough
  • heading
  • alignLeft
  • alignCenter
  • alignRight
  • ol
  • ul
  • url
  • table
  • indent
  • outdent
<template>
  <div>
    <mc-wysiwyg v-model="html" :hide="hide"></mc-wysiwyg>
  </div>
</template>
export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: '',
      hide: {
        // editor buttons here
      }
    }
  }
}

Download Details:

Author: mycurelabs

Live Demo: https://mycurelabs.github.io/vue-wysiwyg/

Download Link: https://github.com/mycurelabs/vue-wysiwyg/archive/master.zip

Official Website: https://github.com/mycurelabs/vue-wysiwyg

Install & Download:

# Yarn
$ yarn add @mycure/vue-wysiwyg

# NPM
$ npm install @mycure/vue-wysiwyg --save

You Might Be Interested In:

Add Comment