Récemment, en raison des exigences du projet, une zone d'édition de texte frontale est nécessaire, avec la fonction du téléchargement en temps réel des images. J'ai comparé plusieurs plug-ins en ligne. Tout d'abord, c'était Ueitor de Baidu et a constaté que le cadre était trop grand. Ce n'était pas ce que je voulais voir si un petit cadre a introduit tant de fichiers; Deuxièmement, c'était Easyui de JQuery. Bien que la version personnelle soit gratuite, le projet appartient aux activités de l'entreprise et il semble qu'il ne soit pas approprié d'utiliser la version commerciale du cadre. Étant donné que l'extrémité avant du projet est principalement construite sur Bootstrap, le plug-in bootstrap-wysiwyg a finalement été sélectionné, ce qui est très simple, léger et très extensible.
Il est très pratique d'introduire Bootstrap-Wysiwyg et d'implémenter la fonction d'édition de texte, mais j'ai remarqué que le téléchargement d'image est implémenté à l'aide de FileAPI. Pour la plupart des sites Web, bien que l'expérience utilisateur sans téléchargement soit très bonne avec FileAPI, lorsqu'elle est réellement stockée dans la base de données, nous espérons toujours stocker le chemin statique de l'image sur le serveur plutôt que des images à cordes. En bref, nous devons faire une petite réécriture de bootstrap-wysiwyg (ci-après dénommé WY).
Tout d'abord, observons les commandes d'image sur la page. Ignorez les autres commandes et vérifiez le code source. Il est facile de trouver le code suivant:
<v> <a id = "picturebtn"> <i> </i> </a> <entrée type = "file" data-role = "magic-overlay" data-target = "# picturebtn" data-edit = "insertimage" /> </div>
Faisons une explication. Les propriétés de role de données et de cible de données sont des événements prédéfinis dans Bootstrap. Ici, nous pouvons le comprendre comme lié à la disposition, sans le considérer. Le point clé est ici. La troisième édition de données de propriété, il n'y a pas un tel événement dans Bootstrap. Observez Bootstrap-Wysiwyg.js, vous pouvez trouver des codes comme celui-ci:
Toolbar.Find ('input [type = file] [data-' + options.commandrole + ']') .change (... ... CommandRole: 'édition',En d'autres termes, cette propriété est réellement implémentée pour faciliter les sélecteurs, ce qui équivaut à l'ajout d'un événement d'écoute au bouton de l'image.
Continuons à étudier la mise en œuvre de l'aperçu de l'image WY. La première étape est que, comme indiqué dans le code ci-dessus, l'auditeur attrape l'événement de changement de fichierInput, répond et appelle la fonction insertfiles
RestoresElelection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files);} wakeSelection (); His.value = '';Trouver la fonction InsertFiles
insertFiles = function (files) {editor.focus (); dollars OptionS.FileUploadError ("Resertre", E);});} Else {Options.FileUpLoDerror ( }Nous avons remarqué qu'il utilise la méthode $ .deferred () de jQuery, d'abord appelé une méthode readFileIntoDataurl, puis publie avec succès l'image dans la zone de texte via la méthode EXECCOMMAND auto-encapsulée. Cette image est en fait une balise <Mg>, mais l'attribut SRC est une image représentée par une chaîne. Donc, ce que nous devons faire est de télécharger le fichier après le déclenchement de l'écoute, d'obtenir le SRC de l'image, puis de remettre le lien vers la méthode EXECCOMAND suivante.
Étant donné que l'auteur n'est pas très familier avec différé, il utilise toujours le mode de rappel le plus courant
Observez la méthode d'appel d'AjaxFileUpload:
$ .ajaxFileUpload ({url: ..., sécurisé: false, fileelementId: ..., dataType: "json", succès: function (obj) {...}, error: function () {...}});Il existe deux propriétés requises, URL et FileelementIDID. Pour maintenir l'exactitude de la dépendance, il n'est pas conseillé de réécrire AjaxFileUpload. Cependant, comme le contrôle WY est mis en œuvre par un auditeur, il n'est pas réaliste de passer les paramètres à travers des fonctions, nous devons donc définir certaines propriétés pour la zone d'entrée pour atteindre notre objectif.
Ajouter quelques propriétés dans FileInput
<input type = "file" id = "pictureInput" name = "image" data-role = "magic-overlay" data-target = "# picturebtn" data-edit = "insertimage" action = "..." />
L'ID est utilisé comme FileelementId, et l'attribut de nom est également nécessaire, principalement pour la sélection de la valeur d'arrière-plan, l'action est l'URL à laquelle l'image doit être soumise.
Définissez une fonction dans bootstrap-wysiwyg.js appelé uploadFileToServer, le format de fonction est le suivant:
var uploadFileToServer = function (id, action, rappel) {$ .ajaxfileupload ({url: action, sécurisure: false, fileelementId: id, dataType: 'json', succès: function (obj) {if (obj.status) {callback (obj.imgsrc);} else. obj.Message);}, erreur: fonction () {options.FileUploadError ("téléchargement-failure", "");Réécrivez la méthode InsertFiles comme suit:
insertFiles = function (fichiers, id, action) {editor.focus (); $ .each (fichiers, function (idx, fileInfo) {if (/^image///.test(fileinfo.type)) {/ * * $ .when (readFileIntoDataurl (FileInfo)). Options.FileUploadError ("Resertre", E);});En même temps, apportez certaines modifications à l'auditeur pour obtenir les attributs nécessaires
Toolbar.find ('input [type = file] [data-' + options.commandrole + ']') .change (function () {restoreslelection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files, $) .attr ('id'), $ (this). } Saveelection ();Principalement, deux positions de paramètres ont été ajoutées.
De cette façon, la réécriture est terminée. Notez que pour vous assurer que l'exécution correcte est effectuée, veuillez consulter ajaxfileupload.js avant le contrôle.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.