https://github.com/DennisSuitters/summernote-image-captionit

Adds Button to Image Popup that allows adding Figure and FigCaption from TITLE or ALT tags.
https://github.com/DennisSuitters/summernote-image-captionit

addon captions figcaption figure image plugin summernote toolbar wysiwyg

Last synced: 3 months ago
JSON representation

Adds Button to Image Popup that allows adding Figure and FigCaption from TITLE or ALT tags.

• Host: GitHub
• URL: https://github.com/DennisSuitters/summernote-image-captionit
• Owner: DennisSuitters
• Created: 2017-01-18T14:04:59.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-12-29T06:19:06.000Z (almost 4 years ago)
• Last Synced: 2024-05-03T05:09:05.500Z (6 months ago)
• Topics: addon, captions, figcaption, figure, image, plugin, summernote, toolbar, wysiwyg
• Language: JavaScript
• Size: 7.81 KB
• Stars: 9
• Watchers: 1
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-summernote - summernote-image-captionit

README

        
# summernote-image-captionit

Adds a button to the Image Popover that will use the TITLE or ALT depending which is used, places that text into a `figcaption` and wraps the `img` and `figcaption` within a `figure` element, ala HTML5 like:

````html

    

    caption used from title or alt if title is empty or the default text in the captionTitle option.

````

### Installation

#### 1. Include JS

Include the following code after including Summernote:

```html

```

#### 2. Supported languages

Currently available in English!

#### 3. Summernote options

Finally, customize the Summernote image popover.

```javascript

$(document).ready(function() {

    $('#summernote').summernote({

        popover: {

            image: [

                ['custom', ['captionIt']],

                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],

                ['float', ['floatLeft', 'floatRight', 'floatNone']],

                ['remove', ['removeMedia']]

            ],

        },

        captionIt:{

            figureClass:'{figure-class/es}',

            figcaptionClass:'{figcapture-class/es}',

            captionText:'{Default Caption Editable Placeholder Text if Title or Alt are empty}'

        }

    });

});

```

#### 4. Check out our other Summernote Plugins via our main Github page.

- [Diemen Design](https://github.com/DiemenDesign/)