MYCURE | Vue Wysiwyg Editor

Vue Wysiwyg

A simple wysiwyg editor for Vue.js

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

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

Demo

Download

#vue #wysiwyg #vue-editor