Vue Wysiwyg

A simple wysiwyg editor for Vue.js by MYCURE Inc.

Demo

Install

NPM

$ npm install @mycure/vue-wysiwyg

Yarn

$ yarn add @mycure/vue-wysiwyg

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@mycure/vue-wysiwyg/dist/mc-wysiwyg.js"></script>
<script>
  Vue.use(McWysiwyg.default);
  new Vue({
    el: '#app',
  });
</script>

Usage

As a global plugin

import Vue from 'vue';
import VueWysiwyg from '@mycure/vue-wysiwyg';

Vue.use(VueWysiwyg);

As a local component

<template>
  <div>
    <mc-wysiwyg v-model="html"></mc-wysiwyg>
  </div>
</template>

<script>
import { McWysiwyg } from '@mycure/vue-wysiwyg';
export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: ''
    }
  }
}
</script>

Props

height - Number - Sets the min-height of the editor container.

<mc-wysiwyg v-model="html" :height="500"></mc-wysiwyg>

hide - Object - Pass the object property hide to hide certain features in the editor.

Sample

In example below, strikethrough and table will be hidden.

<template>
  <div>
    <mc-wysiwyg v-model="html" :hide="hide"></mc-wysiwyg>
  </div>
</template>

<script>
import { McWysiwyg } from '@mycure/vue-wysiwyg';
export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: '',
      hide: {
        strikethrough: true,
        table: true
      }
    }
  }
}

hide Properties

| property | type | default | | -------- | ---- | ------- | | bold | Boolean | false | | italic | Boolean | false | | underline | Boolean | false | | strikethrough | Boolean | false | | heading | Boolean | false | | alignLeft | Boolean | false | | alignCenter | Boolean | false | | alignRight | Boolean | false | | ol | Boolean | false | | ul | Boolean | false | | url | Boolean | false | | table | Boolean | false | | indent | Boolean | false | | outdent | Boolean | false |

Incoming Features

For feature request please create a new issue.

• [ ] Add image
• [x] Height props
• [x] Configuration to show/hide features
• [ ] Custom font
• [ ] Paragraph
• [ ] Quote
• [ ] Code
• [ ] Custom HTML