dennissuitters / summernote-image-attributes Goto Github PK
View Code? Open in Web Editor NEWSummernote plugin to edit image attributes
License: MIT License
Summernote plugin to edit image attributes
License: MIT License
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).
Hello,
When onImageUpload
callback is setup, there are a couple of issues:
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]]);
context.triggerEvent('image.upload', [this.files[0]], $imageSrc);
P.S. Thanks a lot for such a useful plugin!
Please provide better documentation and examples, I'm trying to enable the image link feature with no luck.
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?
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!
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.
Hi,
Some days ago, I commented this commit which leads to Uglify compilation error.
Any news on this maybe?
Regards.
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.
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.'
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
}`
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?
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"]]
],
},
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 !
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
This is what happened, at least in my case (Summernote v0.8.20) :
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.
Upon saving the second image's dialog form, code was being updated (it shouldn't have the URL at all!)
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/
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"); } } }); } }
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 :)
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:.
ReferenceError: Can't find variable: else$img summernote-image-attributes.js:199
i got a error ,did i missing anything?
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 ?
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.
Since the plugin uses ids for the tabs, having multiple summernote implementations generates duplicate ids that conflict with each other.
Hello!
I jsut added that plugin to my project, but the image change option doesn't work... what can I do ?
I need Help
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
}
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
I am using this plugin, it works but its not triggering OnChange
event, just Div is updating but not the value!
Hello,
Please add the license file to the repository.
Thank you!
A very useful plugin but it doesn't seem to work with the lite version of Summernote:
I'm using Summernote-Lite v.0.8.18
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.