# Vue Wysiwyg

[![npm bundle size](https://camo.githubusercontent.com/f9196744cbe8e5fcad5f0511bdd0f980d5b931e14a3a5b86b54e2c6c5495b9c3/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e2f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/f9196744cbe8e5fcad5f0511bdd0f980d5b931e14a3a5b86b54e2c6c5495b9c3/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e2f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265) [![npm](https://camo.githubusercontent.com/18df04b892702322ce63b085c51800d71b97d586be159c89a452b3316372b9d0/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/18df04b892702322ce63b085c51800d71b97d586be159c89a452b3316372b9d0/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265) [![npm](https://camo.githubusercontent.com/de8b3e4e9ccf90e3cf1bc362775f352e7e0d5c23bb7f9b7d55f579093c0bbccf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64772f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/de8b3e4e9ccf90e3cf1bc362775f352e7e0d5c23bb7f9b7d55f579093c0bbccf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64772f406d79637572652f7675652d777973697779673f7374796c653d666c61742d737175617265)

A simple wysiwyg editor for Vue.js by [MYCURE Inc.](https://mycure.md/)

## [**Demo**](https://mycurelabs.github.io/vue-wysiwyg/)

## Install

### **NPM**

```bash
$ npm install @mycure/vue-wysiwyg
```

### **Yarn**

```bash
$ yarn add @mycure/vue-wysiwyg
```

### **CDN**

```html
<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**

```javascript
import Vue from 'vue';
import VueWysiwyg from '@mycure/vue-wysiwyg';

Vue.use(VueWysiwyg);
```

### **As a local component**

```html
<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.

```html
<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](https://github.com/mycurelabs/vue-wysiwyg/issues/new).

* [ ] &#x20;Add image
* [x] &#x20;Height props
* [x] &#x20;Configuration to show/hide features
* [ ] &#x20;Custom font
* [ ] &#x20;Paragraph
* [ ] &#x20;Quote
* [ ] &#x20;Code
* [ ] &#x20;Custom HTML