HomeGitHubMYCURECareers

👀Vue Wysiwyg

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

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/[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
      }
    }
  }
}
</script>

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.

Last updated

Was this helpful?