# @gc-julien/vue-wysiwyg-improved-html

> An improvement of the classic WYSIWYG HTML editor for Vue.js

Latest version **1.7.17** (published 2020-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gc-julien/vue-wysiwyg-improved-html
pnpm add @gc-julien/vue-wysiwyg-improved-html
yarn add @gc-julien/vue-wysiwyg-improved-html
bun add @gc-julien/vue-wysiwyg-improved-html
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.17 |
| Published | 2020-11-18 |
| First published | 2020-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 4 |
| Unpacked size | 351.4 KB |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gregory |
| Maintainers | gc-julien |
| Keywords | vue, vue2, wysiwyg, html, editor |

## Links

- npm: https://www.npmjs.com/package/@gc-julien/vue-wysiwyg-improved-html
- Repository: https://github.com/luxor-git/vue-wysiwyg-improved
- Homepage: https://github.com/luxor-git/vue-wysiwyg-improved#readme
- Issues: https://github.com/luxor-git/vue-wysiwyg-improved
- npm.io page: https://npm.io/package/@gc-julien/vue-wysiwyg-improved-html

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.13
- [debounce](https://npm.io/package/debounce.md) ^1.1.0
- [sanitize-html](https://npm.io/package/sanitize-html.md) ^1.21.1
- [vue2-dropzone](https://npm.io/package/vue2-dropzone.md) ^3.6.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.7.17 (latest) — 2020-11-18
- 1.7.16 — 2020-11-18
- 1.7.15 — 2020-11-18

## README

Forked from [vue-wysiwyg](https://github.com/chmln/vue-wysiwyg)

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


## Usage
Works in IE11 (no, really, it does).

### Install vue-wysiwyg

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

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

In your `main.js`:

```js
import wysiwyg from "vue-wysiwyg";
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/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,

  // forces HTML on paste
  forceHtmlOnPaste: true,

  //sanitize-html options
  htmlSanitizeOptions: {},

  // if true, clears selection every time an action is issued
  clearSelection: false
}
```
Available Modules:
 - bold
 - italic
 - underline
 - justifyLeft
 - justifyCenter
 - justifyRight
 - headings
 - link
 - code
 - orderedList
 - unorderedList
 - image
 - table
 - removeFormat
 - separator

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`

---
_Source: https://npm.io/package/@gc-julien/vue-wysiwyg-improved-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._