How to control figure class in summernote editor

[Fernando-Lim]

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 paragraphs (P) HTML tags the result is not neat and there is a lot of empty space.

[webkwestie]

I have installed both scripts. I also adjusted the Summernote PHP code.

    $('#summernote1').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: [
                ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageAttributes']],
            ],
        },
    });

    $('#summernote2').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: [
                ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']],
                ['custom', ['imageAttributes']],
            ],
        },
    });

and so on.

I now get more extensive options to enlarge or reduce the image, but the symbol with edit pencil is missing, so you cannot add extra information to your image. What am I doing wrong?

[adeelhussain]

@Fernando-Lim Sorry for replying too late, the only way of editing caption is via edit button so if you want to add line break then you need to add
in the caption input field.

[adeelhussain]

@webkwestie can you confirm if you have properly included the plugin file?

[webkwestie]

I have the following scripts:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" `rel="stylesheet">

[webkwestie]

I'm new to this forum and I don't have much experience with summernote and this specific part. I really appreciate you wanting to help me. I think I installed the scripts (that's what you mean, right?) correctly. But I don't know if they should be in a certain order.

[adeelhussain]

@webkwestie sorry for replying late, actually your order of scripts are wrong. It should be like this

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script src="lang/[language-en-US].js"></script>`
<script src="https://cdn.jsdelivr.net/npm/summernote-image-attributes-editor@1.2.1/summernote-image-attributes.min.js"></script>

[webkwestie]

Thank you very, very much, Adeel. That did the trick. TOP.

Greets,

John

[webkwestie]

I'm cheering too soon. I now have the option to provide the image with additional information, but it is not saved. If I only edit the regular text in the same text box, the change will be saved. However, changes for the additional imaging information are not.