Moyen simple d'implémenter la fonction de téléchargement d'image dans Summernote

Je continuerai à écrire une page Web bootstrap comme je l'ai déjà dit ... et ensuite j'utiliserai un éditeur de texte riche, il suffit de le rechercher et de le sélectionner

Ensuite, j'ai trouvé un problème très embarrassant ... la fonction de téléchargement d'image n'est pas valide ... puis diverses recherches sont infructueuses ... Enfin, j'ai traversé le document officiel de Summernote et je l'ai finalement résolu. En bref, j'ai écrit le processus de solution.

La partie backend ne fournit pas de code, elle est pleine de personnes. Ici, en supposant que le backend obtient le fichier téléchargé et renvoie l'adresse du fichier.

Tout d'abord, veuillez joindre les documents de référence: Document de développement officiel de Summernote

Parlez brièvement du plan d'implémentation de la fonction de téléchargement d'image de Summernote

Tout d'abord, selon l'API fournie par le document officiel, joignez l'événement de téléchargement de fichiers, puis utilisez JS pour télécharger le fichier et enfin utiliser l'API pour insérer l'image dans la boîte d'édition.

C'était une question très simple, mais malheureusement, le fonctionnaire ne savait pas pourquoi l'interface avait été écrite ... et puis toutes les informations que j'ai recherchées en ligne ont été trompées ... bien qu'il y ait des raisons pour lesquelles je n'ai pas cherché en profondeur

En bref, les deux API Core Summernote sont réglées, prenant en charge les événements de téléchargement de fichiers et l'insertion d'images, et le format est le suivant selon la documentation officielle.

 // reprend l'événement de téléchargement d'image $ ('# summernote'). Summernote ({callbacks: {onImageUpload: function (fichiers) {// téléchargez l'image sur le serveur et insérez l'image dans la boîte d'édition}}}); // insérer l'image $ ('# Summernote'). Document API fourni ci-dessus

Ensuite, vous pouvez facilement implémenter la boîte d'édition Summernote qui prend en charge le téléchargement d'images

Le code est le suivant:

 $ ('# summernote'). Summernote ({callbacks: {onImageUpload: function (fichiers) {// téléchargez l'image sur le serveur, en utilisant l'objet FormData. En ce qui concerne la compatibilité ... il est dit qu'il n'est pas très convivial sur une version basse ie var formdata = new FormData (); FormData.APPEND ('file', fichiers, fichiers [0]); $. 'upload', // File de téléchargement de fichiers Type: 'Post', data: formdata, processData: false, contentType: false, Success: function (data) {$ ('# Summernote').

Enfin, cela implémente uniquement la fonction de téléchargement d'image la plus simple, qui a une mauvaise compatibilité et ne considère pas du tout les invites d'exception d'erreur ... Veuillez le modifier vous-même selon les besoins

Le moyen simple d'implémenter la fonction de téléchargement d'image dans Summernote est l'ensemble du contenu partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.