Skip to content

signmeuptwice/vue-wysiwyg

 
 

Repository files navigation

A fork of the MYCURE Inc. wysiwyg editor for Vue.js

Demo

Install

NPM

$ npm install @wakeio/vue-wysiwyg

Usage

As a global plugin

import Vue from 'vue';
import wysiwyg from '@wakeio/vue-wysiwyg';

Vue.use(wysiwyg);

As a local component

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

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

Props

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

<wysiwyg v-model="html" :height="500"></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>
    <wysiwyg v-model="html" :hide="hide"></wysiwyg>
  </div>
</template>

<script>
import wysiwyg from '@wakeio/vue-wysiwyg';
export default {
  components: {
    wysiwyg
  },
  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

About

Fixing issues for the mycurelabs Vue JS wysiwyg editor

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 68.1%
  • HTML 18.2%
  • CSS 6.9%
  • JavaScript 6.8%