# summernote-editor-vue3

> A vuejs 3 component for Summernote library

Latest version **1.0.6** (published 2024-01-05) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install summernote-editor-vue3
pnpm add summernote-editor-vue3
yarn add summernote-editor-vue3
bun add summernote-editor-vue3
```

## 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.0.6 |
| Published | 2024-01-05 |
| First published | 2023-11-15 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 76.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Cesar Zuñiga |
| Maintainers | cesar_zuniga |
| Keywords | vue3, summernote, wysiwyg |

## Links

- npm: https://www.npmjs.com/package/summernote-editor-vue3
- Repository: https://github.com/CesarZuniga/vue3-summernote-editor
- Homepage: https://github.com/CesarZuniga/vue3-summernote-editor#readme
- Issues: https://github.com/CesarZuniga/vue3-summernote-editor/issues
- npm.io page: https://npm.io/package/summernote-editor-vue3

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^3.7.1
- [summernote](https://npm.io/package/summernote.md) ^0.8.18

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.6 (latest) — 2024-01-05
- 1.0.5 — 2024-01-05
- 1.0.4 — 2024-01-05
- 1.0.3 — 2024-01-05
- 1.0.2 — 2023-11-16
- 1.0.1 — 2023-11-16
- 1.0.0 — 2023-11-15

## README

# Summernote Editor for Vue 3

A VueJs 3 component for use [Summernote WYSIWYG](https://summernote.org/)

## Install
``` cmd
// npm install
npm install summernote-editor-vue3 --save
```

You must be have `jQuery` at `window.$` and install summernote by yourself.


### Globla JQuery sample for vite
``` javascript
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    inject({
      $: [ 'jquery', '*' ],
      jQuery: 'jquery',
    }),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
// on main.js 
import * as jQuery from "jquery";

// define & and jQuery on the global window object
Object.assign(window, { $: jQuery, jQuery });
```
### Use as component
1. import as global component.
``` javascript
//import summernote lite
import "summernote/dist/summernote-lite.min";
// import css summernote lite
import "summernote/dist/summernote-lite.min.css";
//Add import for change default lang to spanish if not add this line default lang is English
import "summernote/dist/lang/summernote-es-ES.min";
import SummernoteEditor from 'summernote-editor-vue-3';
// import SummernoteEditor
import SummernoteEditor from 'summernote-editor-vue-3';


const vueApp = createApp({});
vueApp.component('SummernoteEditor', SummernoteEditor);

```

2. import into a single component.
``` javascript
// import SummernoteEditor
import SummernoteEditor from 'summernote-editor-vue-3';

<template>
  <SummernoteEditor
      v-model="myValue"
      @update:modelValue="summernoteChange($event)"
      @summernoteImageLinkInsert="summernoteImageLinkInsert"
    />
</template>
<script>
export default {
    // declare SummernoteEditor
    components: {SummernoteEditor},
    data() {
        return {
            myValue: '',
        }
    },
    methods: {
       summernoteChange(newValue) {
          console.log("summernoteChange", newValue);
       },
        summernoteImageLinkInsert(...args) {
          console.log("summernoteImageLinkInsert()", args);
       },
    }
}
</script>
```


### Config/Options
- `:config`: `option[]`
  - configurable settings, see [Summernote options](https://summernote.org/deep-dive/)
  - you can define a global options on a `window.SUMMERNOTE_DEFAULT_CONFIGS`

### Events
- `@update:modelValue`
  - triggered when summernote value change
- `summernote bare events`
  - summernote events will be triggered in camelCase
  - `"summernote.change": "@summernoteChange"`
  - `"summernote.image.link.insert": "@summernoteImageLinkInsert"`

### Screen Demo
![alt text](https://github.com/CesarZuniga/vue3-summernote-editor/blob/master/demo-summmernote-editor/public/demo.png)

---
_Source: https://npm.io/package/summernote-editor-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._