KindEditor est un puissant éditeur HTML en ligne open source qui prend en charge les effets d'édition WYSIWYG. Il est écrit en JavaScript et peut s'intégrer de manière transparente à plusieurs locaux différents tels que .NET, PHP, ASP, Java, etc.
KindEditor lui-même fournit de nombreux plugins très pratiques, et comme le code est open source, les développeurs peuvent l'étendre et le modifier au besoin.
Considérez ce scénario lors de la modification du contenu du site Web à l'aide de KindEditor: les éditeurs ont tendance à copier le contenu à partir d'autres pages ou documents de mots dans l'éditeur KindEditor, plutôt que d'écrire du contenu à partir d'une feuille de papier vierge. Si le contenu copié contient des images, vous devez d'abord télécharger l'image à partir de l'adresse source vers la zone locale et la télécharger sur le serveur où se trouve ce site Web, sinon l'image pointera toujours vers la page ou le document que vous avez copié, ce qui entraînera l'ouverture de l'image correctement dans la page. Les éditeurs doivent souvent traiter de nombreux documents, et ces opérations sont sans aucun doute très lourdes. Le KindEditor peut-il reconnaître automatiquement le contenu collé dedans et télécharger l'image sur le serveur? Le code suivant implémente cette fonction.
Pour plus de détails sur la façon d'utiliser KindEditor sur la page, vous pouvez consulter la documentation officielle du site Web.
L'idée de base d'implémenter cette fonction: ajouter du code à l'événement KETY de l'éditeur KindEditor pour vérifier si l'éditeur contient des images; Découvrez automatiquement les images qui doivent être téléchargées sur le serveur, appelez le programme de téléchargement d'images via AJAX pour télécharger les images sur le serveur; Dans la fonction de rappel AJAX, modifiez l'adresse SRC de l'image correspondante à l'adresse relative locale.
Cette fonctionnalité ne prend pas en charge la copie et le téléchargement d'images dans Word sur le serveur.
L'image ci-dessus est le résultat final. Le programme reconnaîtra automatiquement le contenu de l'éditeur. S'il y a des photos qui doivent être téléchargées, un message rapide sera affiché en haut de l'éditeur. Lorsque l'utilisateur clique sur le lien "Télécharger", le programme appellera le programme de téléchargement d'image via la demande Ajax et modifiera l'adresse SRC de l'image correspondante à l'adresse relative locale de la fonction de rappel.
Étapes de mise en œuvre spécifiques et codes connexes:
1. Modification de l'éditeur KindEditor
Trouvez le fichier KindEditor.js et ajoutez du code personnalisé dans l'événement KETYUP (). Le code fourni par différentes versions de KindEditor peut varier considérablement et nécessiter une recherche à l'aide de documents officiels. Cet article est basé sur la version 4.1.10 de KindEditor.
2. Code de fichier auto.js
fonction df () {var haspicContainer = document.getElementById ("has_pic"); if (has_pic "== null) {haspicContainer = document.createElement (" div "); haspicContainer.id =" has_pic "; haspicContainer.innerhtml =" <entrée type = 'text' id = 'piclist' value = '' style = 'affiche: non;' /> <v id = 'upload'> <b> le serveur </b> <a href = 'javascript: uploadpic ();' > Téléchargement </a> </ div> <div id = 'confirm'> </div> "; $ (". Ke-toolbar "). After (haspicContainer);} var img = $ (". Ke-edit-iframe "). (that.attr ("src") .Indexof (http: // ")> = 0 || that.attr (" src ") .Indexof (" https: // ")> = 0) {picCount ++; $ (img) .length - 1) strTr + = that.attr ("src"); else strtr + = that.attr ("src") + "|";}); $ ("# has_pic"). Hide (); $ ("# upload"). BeforeSend: fonction () {$ (# upload "). Hide (); $ (" # Confirm "). $ (". ke-edit-iframe"). contenu (). find ("img"); $ (img) .each (function (i) {var that = $ (this); if (that.attr ("src") .indexof ("http: //")> = 0 || that.attr ("src"). que.attr ("src", "/ uploads / image /" + str [i]); href = 'javascript: roseupload ();'> close </a> ");} else $ (" # confirm "). text (" upload a échoué! ");}});}$ (". ke-edit-iframe"). contenu (). find ("img") est utilisé pour trouver toutes les images du contenu de l'éditeur. Par défaut, le contenu de l'éditeur est stocké dans l'élément iframe, qui a la propriété de class = "ke-edit-iframe". Le programme déterminera si la valeur de chaque image SRC attribut contient "http: //" ou "https: //", déterminant ainsi si l'image est une image distante ou une image locale. Si l'image est une image distante, uploadpic.ashx est appelée par la méthode AJAX de jQuery pour télécharger le serveur. En même temps, modifiez l'adresse SRC de l'image correspondante dans la fonction de rappel.
3. Code de fichier uploadpic.ashx
classe publique UploadPic: ihttPhandler {public void processRequest (contexte httpcontext) {context.Response.contentType = "text / plain"; String pic = context.request.QueryString ["pic"]; String [] arr = pic.split ('|'); String str = ""; UploadImg st = new uploadImg (); pour (int i = 0; i <arr.length; i ++) {if (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) {String std = saint-uurlpics (arr [i], "../uploads/image/"); if (std.length> 0) {if (i == arr.length - 1) strr + = std; else strr + = std + "|"; }}} context.response.write (sstr); } public bool isreusable {get {return false; }}} public class uploadImg {public String SaveUrlPics (String imgurlary, string path) {String strhtml = ""; String dirpath = httpcontext.current.server.mappath (path); essayez {if (! dirctory.exists (dirpath)) {Directory.CreateDirectory (dirpath); } string ymd = datetime.now.toString ("yyyymmdd", dateTimeFormatinfo.invariantInfo); dirpath + = ymd + "/"; if (! dirctory.exists (dirpath)) {Directory.CreateDirectory (dirpath); } String newFileName = DateTime.Now.ToString ("Yyyymmddhhmmss_ffff", DateTimeFormatinfo.invariantInfo) + imgurlary.substring (imgurlary.lastIndexof (".")); WebClient wc = new WebClient (); wc.DownloadFile (Imgurlary, dirpath + newFileName); strhtml = ymd + "/" + newFileName; } catch (exception ex) {// return ex.Message; } return strhtml; }}L'image distante est téléchargée sur le chemin relatif du serveur "/ uploads / image /" via la méthode WebClient, et le dossier et les noms de fichiers correspondants seront automatiquement générés en fonction de la date. Le résultat retourné contient les adresses relatives locales de toutes les images séparées par "|". Dans la fonction uploadpic () du fichier auto.js à l'étape 2, le succès de la méthode de rappel obtient la valeur et l'analyse, et attribue l'adresse à l'attribut SRC de l'image correspondante.
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.