# summernote-image-attributes-editor

> Summernote plugin for editing Image title, caption, alt attributes.

Latest version **1.2.1** (published 2019-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install summernote-image-attributes-editor
pnpm add summernote-image-attributes-editor
yarn add summernote-image-attributes-editor
bun add summernote-image-attributes-editor
```

## 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.2.1 |
| Published | 2019-09-09 |
| First published | 2019-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Adeel Hussain |
| Maintainers | adeelhussain |
| Keywords | summernote, editor, image, attribute, caption, alt, title, WYSIWYG |

## Links

- npm: https://www.npmjs.com/package/summernote-image-attributes-editor
- Repository: https://github.com/adeelhussain/summernote-image-attribute-editor
- Homepage: https://github.com/adeelhussain/summernote-image-attribute-editor#readme
- Issues: https://github.com/adeelhussain/summernote-image-attribute-editor/issues
- npm.io page: https://npm.io/package/summernote-image-attributes-editor

## 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.2.1 (latest) — 2019-09-09
- 1.2.0 — 2019-09-07
- 1.0.0 — 2019-02-01

## README

# summernote-image-attributes
A plugin for the [Summernote](https://github.com/summernote/summernote/) WYSIWYG editor.

Adds a button to the image popover to edit title, alt, caption and resize along with managing of Aspect Ratio.

### 1. Installation

* #### Include JS
Include the following code after Summernote:

```html
<script src="summernote-image-attributes.js"></script>
<script src="lang/[language-COUNTRY].js"></script>
```

* #### Using npm
If you are using npm, run this command

```html
npm i summernote-image-attributes-editor --save
```

#### 2. Supported languages

Currently available in:
- English

Contributions are welcomed!

#### 3. Summernote options

Finally, customize the Summernote image popover.

```javascript
$(document).ready(function() {
    $('#summernote').summernote({
        imageAttributes: {
          	icon: '<i class="note-icon-pencil"/>',
        	figureClass: 'figureClass',
        	figcaptionClass: 'captionClass',
        	captionText: 'Caption Goes Here.',
        	manageAspectRatio: true // true = Lock the Image Width/Height, Default to true
        },
        lang: 'en-US',
        popover: {
            image: [
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageAttributes']],
            ],
        },
    });
});
```
#### 4. Demo
- [Demo](https://adeelhussain.github.io/summernote-image-attribute-editor/)


(Thanks to [@asiffermann](https://github.com/asiffermann))
(Thanks to [@DiemenDesign](https://github.com/DiemenDesign))

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