vue-wysiwyg-fixed/README.md

A WYSIWYG HTML editor for Vue.js

This is a fork of [chmln/vue-wysiwyg](https://github.com/chmln/vue-wysiwyg) that solves some issues I was having with copy paste.

[![](https://user-images.githubusercontent.com/11352152/30252159-1bbb9cfe-963b-11e7-966c-b44116c74a86.png)](https://chmln.github.io/vue-wysiwyg/)

## Usage


### Install vue-wysiwyg-fixed

``` bash
npm install vue-wysiwyg-fixed --save
```
OR

``` bash
yarn add vue-wysiwyg-fixed
```

In your `main.js`:

```js
import wysiwyg from "vue-wysiwyg-fixed";
Vue.use(wysiwyg, {}); // config is optional. more below
```

Also make sure to load the stylesheet.
The exact syntax will depend on what preprocessor you use.

```css
@import "~vue-wysiwyg-fixed/dist/vueWysiwyg.css";
```

In your components:
```html
<wysiwyg v-model="myHTML" />
```

## Config options

All keys are optional.

```js
{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px",

  // set to 'true' this will insert plain text without styling when you paste something into the editor.
  forcePlainTextOnPaste: true,

  // set to 'true' this will strip tags when you paste something into the editor (ignored if forcePlainTextOnPaste = true).
  stripTagsOnPaste: true,

  // If stripTagsOnPaste = true then use this option to allow tags (attributes will still be stripped)
  allowedTags: [],

  // specify editor locale, if you don't specify this, the editor will default to english.
  locale: 'hu'
}
```
Available Modules:
 - bold
 - italic
 - underline
 - justifyLeft
 - justifyCenter
 - justifyRight
 - headings
 - link
 - code
 - orderedList
 - unorderedList
 - image
 - table
 - removeFormat
 - separator

Available Locales:
 - english (default)
 - hungarian

Note on the image upload API endpoint:
- Image is uploaded by `multipart/form-data`
- Your endpoint must respond back with a string, the URL for the image - e.g. `http://myapp.com/images/12345.jpg`