/vue-wysiwyg

A simple wysiwyg editor for Vue.js

Primary LanguageVueMIT LicenseMIT

Vue Wysiwyg

npm bundle size npm npm

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

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
  • Height props
  • Configuration to show/hide features
  • Custom font
  • Paragraph
  • Quote
  • Code
  • Custom HTML