diemendesign / summernote-image-captionit Goto Github PK

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

JavaScript 100.00%

summernote image captions figure addon plugin wysiwyg figcaption toolbar

summernote-image-captionit's Introduction

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:

<figure class="{inserted class from option}">
    <img src="image.jpg" title="uses this first" alt="uses this if title is empty">
    <figcaption class="{inserted class from option}">caption used from title or alt if title is empty or the default text in the captionTitle option.</figcaption>
</figure>

Installation

1. Include JS

Include the following code after including Summernote:

<script src="summernote-image-captionit.js"></script>

2. Supported languages

Currently available in English!

3. Summernote options

Finally, customize the Summernote image popover.

$(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

summernote-image-captionit's People

Stargazers

Watchers

Forkers

w3extensions ffahmii apibrain khoerodin vladzernov meshzp neptune104 adeelhussain cuisines 3lviend renfrid ashe-senkatuuka muhin813

summernote-image-captionit's Issues

Anchor tag not being assigned to image

Whenever i try to assign a anchor tag to the image it does not apply to the image, it applies outside the image

How to set focus to the caption added when clicking on CaptionIT

Whenever i add a caption it adds a caption to the image, but how to make focus to that added caption so the typing cursor automatically goes to the added caption title

How to apply Image Style to figure tag

Thank you for this wonderful package, I was able to set it up but I had some issues. While trying to make the image float left or right it does not move. I found out that it only apply's float right/left to the image alone.
Any guide on how to apply to the figure tag?

Thanks.

Error with Summernote v0.8.10

It looks like there was some changes to the ui.button function. It seems it is expecting a container option.

I found this issue on Summernote:
summernote/summernote#2700

This:

                context.memo('button.captionIt', function () {
                    var button = ui.button({
                        contents: options.captionIt.icon,
                        tooltip: lang.captionIt.tooltip,
                        container: false,
                        click: function () {
                            ...
                        }
                    });
                    return button.render();
                });

Should be:

                context.memo('button.captionIt', function () {
                    var button = ui.button({
                        contents: options.captionIt.icon,
                        tooltip: lang.captionIt.tooltip,
                        container: false,
                        click: function () {
                            ...
                        }
                    });
                    return button.render();
                });

Clicking on the caption button inserts the text "undefined"

...Also, the caption icon doesn't show up when I view the image controls. However, I can click on the empty space that's supposed to be the caption button label.

I don't really see what I could be screwing up. Is there a working example I could look at?

How to automatically add caption when image added

Hi,

I loved your implementation for caption. I would also like to know that how can i make caption automatically appear as soon as the image is loaded in summernote instead of clicking on the caption button

Popover toolbar doesn't hide after clicking the caption

Hi,

whenever i click on the caption button the popover toolbar is intact making an assumption that the caption is not yet invoked, whereas we have to scroll down once the caption button is clicked. Is there any way where it automatically focus and make the popover disappear once caption button is clicked

summernote-image-captionit none icon

How to control figure class in summernote editor

Hello, thx for this wonderful package. I have already added figure class and figure caption in my app regarding image caption, but if I click enter button, the result is a new paragraph outside of figure class and a new figure caption. Is there any solution to fix this, because i want to save the value of summernote editor to the database and show it to the website to preview the result, but because there are a lot of empty

HTML tags the result is not neat and there is a lot of empty space.