web-dev-qa-db-fra.com

Désactiver le téléchargement d'images dans Summernote

Existe-t-il un moyen de désactiver complètement le téléchargement d'images dans Summernote, mais de conserver l'entrée URL de l'image? La chose la plus proche que j'ai trouvée était le disableDragAndDrop: true option, mais cela ne supprime pas le bouton de téléchargement de la fenêtre d'image

javascriptjquerywysiwygsummernote
19
Jonan

Il y a probablement une meilleure façon d'accomplir ce que vous cherchez ... mais une solution très simple qui vient à l'esprit est d'ajouter simplement ceci à vos feuilles de style:

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

Cela fonctionne parfaitement pour ne laisser que l'entrée de l'URL de l'image, et accomplit ce que vous cherchez à moins que quelqu'un ne inspecte l'élément et découvre que l'élément de téléchargement existe toujours sans affichage:

enter image description here

Edit: J'ai jeté un œil au code source de Summernote, et il semble que la solution ci-dessus soit en fait une bonne façon de procéder. Il n'y a actuellement aucune API pour désactiver uniquement le bouton de téléchargement de fichier, sans parler de le faire tout en laissant l'entrée img url intacte. Vous pouvez toujours l'ajouter et ouvrir une demande de tirage, bien sûr.

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>';
44
wesww

Vous pouvez remplacer la barre d'outils et y définir votre propre ensemble de boutons. Voici un exemple de code:

$("#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' ] ]
        ]
    });

Ce code génère la barre d'outils sans option d'insertion de vidéo et d'image et avec toutes les autres options disponibles. Vous pouvez consulter la documentation détaillée de l'API ici .

8
Aqib Ashef

Trouvez ce code dans 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">&times;</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>';
      };

Supprimez ce code:

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

Maintenant, l'entrée de téléchargement de fichier est supprimée de la boîte de dialogue modale.

2
Sulung Nugroho

tilisation de Jquery Cela a fonctionné pour moi

 $('div.note-group-select-from-files').remove();

Ou si (comme suggéré par dwilda) vous voulez vérifier que l'élément existe avant d'essayer de le supprimer:

var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
  imageUploadDiv.remove();
}
1
4Jean

Après avoir lu un peu de code que j'ai trouvé en supprimant ce code dans summernote.js supprimera cette fonction de téléchargement

Supprimez simplement ce formulaire de votre fichier car aucune des réponses ci-dessus ne fonctionnera pour moi

'<div class="form-group note-form-group note-group-select-from-files">' +
               '<label class="note-form-label">' + lang.image.selectFromFiles + '</label>' +
               '<input class="note-image-input form-control note-form-control note-input" '+
               ' type="file" name="files" accept="image/*" multiple="multiple" />' +
               imageLimitation +
             '</div>' +
0
Dhruv Saxena