@mycure/vue-wysiwyg v1.3.0

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/vue@2.x/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

Incoming Features

For feature request please create a new issue.

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