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:
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.
Using Jquery This worked for me
$('div.note-group-select-from-files').remove();
Or if (as suggested by dwilda) you want to check that the element exists before attempting to remove it:
var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
imageUploadDiv.remove();
}