Disable image upload in Summernote Disable image upload in Summernote javascript javascript

Disable image upload in Summernote


There's probably a better way to accomplish what you're going for... but a very simple solution that comes to mind is to just add this to your stylesheets:

.note-group-select-from-files {  display: none;}

It works perfectly to leave just the image url input, and accomplishes what you're going for unless someone were to inspect element and discover that the upload element still exists with display none:

enter image description here


Edit :I took a look at the Summernote source code, and it looks like the above solution is actually a good way to go. There's currently no api to disable just the file upload button, let alone do so while leaving the img url input intact. You could always add it and open a pull request, of course.

https://github.com/summernote/summernote/blob/4b1bf144862a88899a464ddfab6bc0593a061fbc/src/js/bs3/module/ImageDialog.js#L24

  var body = '<div class="form-group note-group-select-from-files">' +               '<label>' + lang.image.selectFromFiles + '</label>' +               '<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' +               imageLimitation +             '</div>' +             '<div class="form-group" style="overflow:auto;">' +               '<label>' + lang.image.url + '</label>' +               '<input class="note-image-url form-control col-md-12" type="text" />' +             '</div>';


You can override the toolbar and define your own set of buttons there. Here is a sample codesnippet:

$("#summernote").summernote({        height: 300,        toolbar: [            [ 'style', [ 'style' ] ],            [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],            [ 'fontname', [ 'fontname' ] ],            [ 'fontsize', [ 'fontsize' ] ],            [ 'color', [ 'color' ] ],            [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],            [ 'table', [ 'table' ] ],            [ 'insert', [ 'link'] ],            [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]        ]    });

This code generates the toolbar without video and image insert option and with all other options available. You can check the detail API documentation here.


Find this code in summernote.js

tplDialog = function (lang, options) {      var tplImageDialog = function () {        return '<div class="note-image-dialog modal" aria-hidden="false">' +                 '<div class="modal-dialog">' +                   '<div class="modal-content">' +                     '<div class="modal-header">' +                       '<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +                       '<h4>' + lang.image.insert + '</h4>' +                     '</div>' +                     '<div class="modal-body">' +                       '<div class="row-fluid">' +                         '<h5>' + lang.image.selectFromFiles + '</h5>' +                         '<input class="note-image-input" type="file" name="files" accept="image/*" />' +                         '<h5>' + lang.image.url + '</h5>' +                         '<input class="note-image-url form-control span12" type="text" />' +                       '</div>' +                     '</div>' +                     '<div class="modal-footer">' +                       '<button href="#" class="btn btn-primary note-image-btn disabled" disabled="disabled">' + lang.image.insert + '</button>' +                     '</div>' +                   '</div>' +                 '</div>' +               '</div>';      };

Remove this code :

'<h5>' + lang.image.selectFromFiles + '</h5>' +'<input class="note-image-input" type="file" name="files" accept="image/*" />' +

Now file upload input is remove from modal dialog.