dennissuitters / summernote-image-attributes

Summernote plugin to edit image attributes

summernote-image-attributes

Summernote-image-attributes has undergone a make over, we redesigned the Dialog Layout to make it easier to use. New classes have been submitted to the Summernote main Repository, be sure to grab the latest master and build it for the class styling additions.

A plugin for the Summernote WYSIWYG editor.

Adds a button to the image popover to edit title, alt, class and style attributes, and Links with relevant Attributes.

Installation

1. Include JS

Include the following code after including Summernote, to change the language from the default (en-US) you must add the lang file after the plugin.

if you use bootstrap5, you must add **/bootstrap5/**summernote-image-attributes.js instead of summernote-image-attributes.js

<script src="summernote-image-attributes.js"></script>
OR
<script src="/bootstrap5/summernote-image-attributes.js"></script>

<script src="lang/[language-COUNTRY].js"></script>

2. Supported languages

Currently available in US English (Default), Spanish, French, Chinese (Traditional), Italian, German and Turkish!

3. Summernote options

Finally, customize the Summernote image popover.

$(document).ready(function() {
    $('#summernote').summernote({
        popover: {
            image: [
                ['custom', ['imageAttributes']],
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ],
        },
        lang: 'en-US', // Change to your chosen language
        imageAttributes:{
            icon:'<i class="note-icon-pencil"/>',
            removeEmpty:false, // true = remove attributes | false = leave empty if present
            disableUpload: false // true = don't display Upload Options | Display Upload Options
        }
    });
});

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

• Diemen Design

Contributors

• Add links to Image
  • Thank you to minidc
  • Thank you to MarcosBL
• French Translation
  • Thank you to b-alidr
• Chinese (Traditional) Translation
  • Thank you to horkenw
• Italian Translation
  • Thank you to paolodadda
• German Translation and Horizontal Dialog Layout
  • Thank you to YaWK
• Turkish Translation
  • Thank you to GoktugOzturk
• Romanian Translation
  • Thank you to condor2

summernote-image-attributes's Issues

Can we edit source(src) at the image popover?

Can support input source directly, also upload from locally.

Before finding this, I have just finished a plugin which is just do this. I think maybe there also can support, that will be good.

If this is not a good idea, please just tell me. Thank you.

And then, there has one issue about Chinese (Traditional) Translation. There should be as below:
tooltipShapeOptions: ['響應式', '圓角', '圓形', '縮圖', '無' ],
instead of
tooltipShapeOptions: ['圓角', '圓形', '縮圖', '無' ],
Translation is just not enough.

ps: I am Chinese, not Chinese Taiwanese, so maybe '響應式' is not good word. I ask my Taiwan friends, he said, 'A little IT terminology.'

This doesn't seem to be working for me.

Hi,
I did an upgrade to SN 0.8.9 and some plugins stop working; so I upgraded to this latest version as well but still not working. I have all set properly as required.
I am currently using jQuery v1.11.1 (because of Bootstrap v3.3.6)

See my code below

var advEditor =  function(domElement){
    if(jQuery().summernote){
        $(domElement).summernote({
            height: 450,
            minHeight: 50,
            maxHeight: 850,
            dialogsInBody: false,
            dialogsFade: true,
            toolbar: [
                ['cleaner',['cleaner']],
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font-e', ['strikethrough', 'superscript', 'subscript']],
                ['pagebreak',['pagebreak']],
                ['font', ['fontname', 'fontsize', 'color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height',['height', 'hr']],
                ['table',['table']],
                ['media', ['media', 'link', 'pictureBtn', /*'video',*/ 'videoAttributes']],
                ['insert', ['emojiList', 'specialChar']],
                ['misc', ['undo', 'redo', 'codeview', 'fullscreen', 'help']]
            ],
            buttons: {
                pictureBtn: insertPicture
            },
            popover: {
                image: [
                    ['custom', ['imageAttributes', 'imageShape', 'captionIt']],
                    ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                    ['float', ['floatLeft', 'floatRight', 'floatNone']],
                    ['remove', ['removeMedia']]
                ],
            },
            imageAttributes:{
                icon:'',
                removeEmpty:false
            },
            imageShape: {
                icon: ''
            },
            captionIt:{
                figureClass:'{figure-class/es}',
                figcaptionClass:'{figcapture-class/es}',
                captionText:'{Default Caption Editable Placeholder Text if Title or Alt are empty}'
            },
            cleaner:{
                notTime: 2400,
                action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
                newline: '
',
                notStyle: 'position:absolute;top:0px;left:0;right:0',
                icon: '',
                keepHtml: false,
                keepClasses: false,
                badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript'/*, 'html'*/],
                badAttributes: ['start']
            },
            callbacks:{
                onInit:function(){
                    $('body > .note-popover').appendTo(".note-editing-area");
                }
            }
        });
    }
}

summernote not registering change

We are using the vue-html-editor based on summernote. When applying changes in e.g. style, the editor is not registering the change causing vue not to save. Only when adding an extra return or text, we can trigger the change.

To solve this matter we added the next line to the $editBtn.click event, just after the deferred.resolve:

$note.summernote().trigger('summernote.change');

Any feedback?

License file is missing

Hello,

Please add the license file to the repository.

Thank you!

tabs style is not working on bootstrap 4

Hi
Thanks for your awesome work. I really appreciate your effort.
But on thing i notice that tabs style is not working. Can you have a look.
I am using Bootstrap 4

Plugin Revamp, features?

Hi everyone,

Firstly, thank you for using or being interested in this plugin, and to those that have contributed over the years.

I'm working on revamping the plugin, mainly as more of an ability to edit images after they've been added, or already exist within the editable document area, or can be used as a replacement for the "Insert Image" toolbar button.

As I've been working on a separate version of Summernote (Skunkworks), based on the Lite version of Summernote, and primarily worked on to work within any Framework, but (sadly) still requires jQuery.

So for this plugin, I've removed the tabs, and only included features, such as, Wrapping images with a Figure and including a Caption, Alt Text, Style, Class, and width/height (I'd like to include a ratio lock). These are all toggleable options when initialising the plugin so features can be disabled if a particular option isn't required, including changing or uploading new images, so if the only editing you want to allow is to change alt text, class, style, or captions.

I've not included adding links, as those can be added via the link options within the editor.

The uploading/changing image option at the top, no longer auto-submits to allow editing the other options, and can be changed (at least in the skunkworks version) to allow connecting to a filebrowser such as elfinder (which allows uploading, editing files, or selecting an already available file on the host).

Image with caption - float left or right causes the caption to shift out from under the image

With a caption under the image, when text is wrapped using float left or right, the caption shifts out from under image. Also when there is a long caption, it does not stay within the width of the image, but goes beyond it. Something that may be fixable with CSS style sheet for the figure tags? Or better yet, if your code could be modified to handle the changes necessary.

add border it is usful option . please implement

can we have a seperate branch for just the imageShape ?

Uglify compilation error

Hi,

Some days ago, I commented this commit which leads to Uglify compilation error.

Any news on this maybe?

Regards.

Image replace through `onImageUpload` improvements needed

Hello,

When onImageUpload callback is setup, there are a couple of issues:

1. summernote sends a list of files (an array) to the onImageUpload, while the current library only the file itself. It would be nice to be consistent and send an array here as well. If we want to restrict the replace to the first selection, then we can do:

context.triggerEvent('image.upload', [this.files[0]]);

2. When file is uploaded, there is no way to notify the new URL to be used for the image to replace. Please either expose an event or just pass image source to which URL must be updated by the callback:

context.triggerEvent('image.upload', [this.files[0]], $imageSrc);

P.S. Thanks a lot for such a useful plugin!

Is not working

here is what i get :

has anyone had the same problem ?

Summernote image attributes

Hi,

I already integrated this plugin in my application https://github.com/StudioJunkyard/summernote-image-attributes But it's not working perfectly. It shows these errors.

https://drive.google.com/file/d/0BwAzgV3nKU7aTk0xekxlSTZDNFE/view?usp=drivesdk

How can I fix this? Waiting for your reply.

Thank you :)

Translate doesn't work.

First of all, thank you for this plugin.

I used bower to download this plugin (https://libraries.io/bower/summernote-image-attributes) but translate doesn't work (I think bower doesn't download the last version of plugin)

Thanks for your help !

Innitial tab load doesn't show attribute fields.

Every time i had to toggle between tabs to show the attribute fields on the first tab.
After editting line 179 i solved it with placing a show :)
179: body += '

' +
to
179: body += '

' +

Multiple summernote implementations breaks plugin

Since the plugin uses ids for the tabs, having multiple summernote implementations generates duplicate ids that conflict with each other.

Image input send null value

Hi! I'm using OnImageUpload callback, It works fine when I insert an image. But when I try to replace the image with this plugin, the file input doesn't send a file... it send a null value.
How can I fix that ?

Custom Button

I managed to add a custom button to your popover, and I'd like to add a class to the image when the button is clicked. How do I incorporate that into your js?

/ Summernote Pad Button
    var PadButton = function (context) {
      var ui = $.summernote.ui;

      // create button
      var button = ui.button({
        contents: '<i class="fa fa-plus-square"/>',
        tooltip: 'Add padding to image',
        click: function () {
          // invoke insertText method with 'pad' on editor module.
          console.log(context); // WOULD LIKE THE CODE TO GO HERE!
        }
      });

      return button.render();   // return button as jquery object
    }

The value of "imageDialogLayout" is useless

I change the value of "imageDialogLayout" and nothing change.

The value is setted by js.

Cant replace the uploaded image

Hello sir, i found a problem, can't change the previously upload image, here is the sample code that i use https://jsfiddle.net/triawarman/j4uw8fz3/

Bootstrap Backdrop breaks page

Hi!

I'm having an issue with backdrop. It always shown and I don't now how to get it off....

Summernote-image-attributes doesn't change image

Hello!
I jsut added that plugin to my project, but the image change option doesn't work... what can I do ?
I need Help

Summernote-Lite & Tab´s

A very useful plugin but it doesn't seem to work with the lite version of Summernote:

1. The tabs "Image", "Attributes", "Link" and "Upload" (disabled in my example) don't load.
2. The tooltip overlaps the editing button, so the button cannot be clicked. I had to comment out the option tooltip in the source code to test the plugin.

I'm using Summernote-Lite v.0.8.18

with image hyperlink, both popovers menus show at same time

Hi, @diemendesign
when an image is wrapped around hyperlink then both images and hyperlink popovers show at same time. Can we avoid hyperlink popover for images?

Error: TOOLTIP: Option "container" provided type "undefined" but expected type "(string|element|boolean)".

I got this error when I implement summernote-image-attributes.

                 image: [
                    ['custom', ['imageAttributes']],
                    ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                    ['float', ['floatLeft', 'floatRight', 'floatNone']],
                    ['remove', ['removeMedia']]],
                link: [['link', ['linkDialogShow', 'unlink']]],
                air: [['color', ['color']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['para', ['ul', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']]]
            }, imageAttributes: {
                container: 'body',
                icon: '<i class="note-icon-pencil"/>',
                removeEmpty: false, // true = remove attributes | false = leave empty if present
                disableUpload: false // true = don't display Upload Options | Display Upload Options
            }`

Table popover doesn't work

Hi,
When the plugin installed and configured as explained in the README.md, table popover doesn't shown. Any idea?

Summernote version: 0.8.9

Use on multiple summernote instances on single page

Hello,

I like your plugin, but the modal does not work with multiple instances of summernote on a single page because of the id's used for the nav-tabs. Could you add an option so it can work with multiple instances of summernote.

Odd behaviour when we got 2 (or more) images on the editor

This is what happened, at least in my case (Summernote v0.8.20) :

• Added 2 images
• Added a link URL on the first image
• Double clicked the image attributes on the 2nd image. The Link URL is prepopulated with the URL of the first image. At this point, the actual HTML code is not being altered. However, If i accidentally press OK on the dialog form, the HTML code will be updated with the same Link URL of the first image.

My belief is that the plugin reads the imgLink data (thus the URL and the rest of the variables) of the first image it can find and populates the dialog form without checking which image it should be reading.

Here is a short video of it. The first image had the Link URL https://google.com while the second image had that property empty.

summernote-image-attr-plugin.mp4

Upon saving the second image's dialog form, code was being updated (it shouldn't have the URL at all!)

Where to include plugin

Sorry to be so dense, but I just couldn't see where to do this.

In the readme (https://github.com/StudioJunkyard/summernote-image-attributes#1-include-js) it says "Include the following code after you include Summernote." Where exactly is that? I have a Rails app that I've inherited, and I "include" Summernote in a few different places (Gemfile, application.js, stylesheets/base.scss). None of those places seem the right spot for the html code the readme presents. Any suggestions would be amazing!

table popup disappears

Hi
I follow the simplest setup from your description. And your solution works fine.
But af table insert the table popup is gone.
As soon as I remove your solution from the ready-function, all is back and ok

Toolbar suppresses image size buttons

It appears that the current image attributes popover definition suppresses the resize buttons one normally sees when an image is clicked.
I'm expecting to see both the resize buttons and the image attributes button in the popover when I click an image and do not.
When I click an image, the popover displays the image attributes custom button, the float left and right and remove float buttons and the delete image button.

It does not show the resize buttons for 100%, 50%, and 25% although they are there in the definition of the imageAttributes popOver. (see code fragment below)

Can anyone help me figure this one out? I've tried changing the order in which the buttons are declared, I've looked in the image attributes JavaScript to see if it's suppressing the buttons now. But I don't see those buttons specifically referenced that I can detect.
I've reviewed other summernote-image-attributes issues to try to see if there was anything related. The only thing I found was a BS3 "issue" where both the URL and attributes popovers were displaying and in that one, it was showing the sizes and the custom button properly. I could live with that, but haven't been able to reproduce it (both toolbars, one with advanced and resize buttons) with bootstrap 4.

This is on Windows 10, testing in Chrome. Using the developer tools in Chrome, I'm seeing no errors in the JavaScript console, nor any missing files in the network tab.
OS: Windows 10
Summernote: 0.8.18
Bootstrap: 4.4.1
JQuery: v3.2.1
Chrome: Version 92.0.4515.159 (Official Build) (64-bit)

 $("##content").summernote({
            popover: {
                image: [
                    ["custom", ["imageAttributes"]],
                    ["imagesize", ["imageSize100", "imageSize50", "imageSize25"]],
                    ["float", ["floatLeft", "floatRight", "floatNone"]],
                    ["remove", ["removeMedia"]]
                ],
            },

URL field does not accept mailto: links

My workaround is to remove the conditional at line 562 but it would be better if the regex at line 561 were modified to accept mailto:.

sorry i'll come back

ReferenceError: Can't find variable: else$img summernote-image-attributes.js:199

i got a error ,did i missing anything?

@diemendesign

Better documentation

Please provide better documentation and examples, I'm trying to enable the image link feature with no luck.

Not updating content when using with ngx-summernote

I am using this plugin, it works but its not triggering OnChange event, just Div is updating but not the value!

The imageAttributes works fine but does not save

Hi, I'm implementing the https://github.com/StudioJunkyard/summernote-image-attributes/ to django-summernote. Everything works fine except that it does not save the attribute

When i clicked ok and save, it does not wrap my "img" with "a" tag. I want to insert hyperlink to images pasted on the django-summernote editor.

TODO List: from feature requests and issues from summernote repo