# @ddosdor/vue-sh-wysiwyg

> Simple and very basic Wysiwyg editor for Vue.js

Latest version **0.2.2** (published 2019-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ddosdor/vue-sh-wysiwyg
pnpm add @ddosdor/vue-sh-wysiwyg
yarn add @ddosdor/vue-sh-wysiwyg
bun add @ddosdor/vue-sh-wysiwyg
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2019-12-13 |
| First published | 2019-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 648.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | @ddosdor |
| Maintainers | ddosdor |
| Keywords | vue, vue2, wysiwyg, html, editor |

## Links

- npm: https://www.npmjs.com/package/@ddosdor/vue-sh-wysiwyg
- Repository: https://github.com/ddosdor/vue-sh-wysiwyg
- Homepage: https://github.com/ddosdor/vue-sh-wysiwyg#readme
- Issues: https://github.com/ddosdor/vue-sh-wysiwyg/issues
- npm.io page: https://npm.io/package/@ddosdor/vue-sh-wysiwyg

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^3.4.3
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## 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

- 0.2.2 (latest) — 2019-12-13
- 0.2.1 — 2019-12-12
- 0.2.0 — 2019-12-12
- 0.1.0 — 2019-12-12

## README

```
 __      __                     _____ _ __          __        _                      
 \ \    / /                    / ____| |\ \        / /       (_)                     
  \ \  / /   _  ___   ______  | (___ | |_\ \  /\  / /   _ ___ ___      ___   _  __ _ 
   \ \/ / | | |/ _ \ |______|  \___ \| '_ \ \/  \/ / | | / __| \ \ /\ / / | | |/ _` |
    \  /| |_| |  __/           ____) | | | \  /\  /| |_| \__ \ |\ V  V /| |_| | (_| |
     \/  \__,_|\___|          |_____/|_| |_|\/  \/  \__, |___/_| \_/\_/  \__, |\__, |
                                                     __/ |                __/ | __/ |
                                                    |___/                |___/ |___/
```
# @ddosdor/vue-sh-wysiwyg
## What is this?

This is my very basic and very simple HTML wysiwyg editor.

## Why I made this?

Because I need some very basic and very simple HTML wysiwyg editor for my project. Need is the mother of invention. :)

## Where to get it from?

It's simple:

```
npm install @ddosdor/vue-sh-wysiwyg
```

or

```
yarn add @ddosdor/vue-sh-wysiwyg
```

## How to use this?

### First import it and let Vue know to use it.

In your `main.js` file:

```js
import Vue from 'vue';
import ShWysiwyg from '@ddosdor/vue-sh-wysiwyg';

Vue.use(ShWysiwyg)
```

Remember to add a stylesheet:

In `main.js` (I prefer this solution):

```js
import "@ddosdor/vue-sh-wysiwyg/lib/ShWysiwyg.css";
```

or in some css file:

```css
@import "~@ddosdor/vue-sh-wysiwyg/lib/ShWysiwyg.css";
```

### Use this in components

To use `ShWysiwyg` in components:

```html
<ShWysiwyg v-model="someHtml" />
```

Value passed on to the v-model is 'two-way binding' (Vue docs).

You can also use the emitted events:

```html
<ShWysiwyg v-model="someHtml" 
           @change="handleChange"
           @focus="handleFocus"
           @blur="handleBlur"
/>
```
- `@change` is emitted on every content change
- `@focus` is emitted when content is focused
- `@blur` is emitted when content is blur

### Possible commands and customization

So far, there are only a few possible commands (Did I mentioned that it's a simple editor?)

- **Heading** (heading)
- **Bold** (bold)
- **Italic** (italic)
- **Strikethrough** (strikeThrough)
- **Underline** (Underline)
- **Align left** (justifyLeft)
- **Align center** (justifyCenter)
- **Align right** (justifyRight)
- **Align justify** (justifyFull)
- **Hyperlink** (createLink)
- **Undo** (undo)
- **Remove format** (removeFormat)

By default, all the above options are available. However, they can be customized with `props`:

```html
<ShWysiwyg v-model="someHtml" 
           :toolbar="['bold', 'underline', '|', 'createLink', 'removeFormat']"
/>
```

Mysterious `'|'` is divider.

## Can I use it for production?

I don't know, I use it. :) 

## What's next?

I still have some ideas that I would like to implement for this tool. So far, this is a beta version, that's why every feedback is welcome.

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