Der Kindeditor ist ein leistungsstarker Open Source Online -HTML -Editor, der Wysiwyg -Bearbeitungseffekte unterstützt. Es ist in JavaScript geschrieben und kann sich nahtlos in mehrere verschiedene Orte wie .NET, PHP, ASP, Java usw. integrieren
Der Kindeditor selbst bietet viele sehr praktische Plugins, und da der Code Open Source ist, können Entwickler ihn nach Bedarf erweitern und ändern.
Berücksichtigen Sie dieses Szenario, wenn Sie den Inhalt der Website mit dem Senditor bearbeiten: Editoren neigen dazu, Inhalte von anderen Seiten oder Word -Dokumenten in den Arteditor -Editor zu kopieren, anstatt Inhalte aus einem leeren Blatt Papier zu schreiben. Wenn der kopierte Inhalt Bilder enthält, müssen Sie das Bild zuerst aus der Quelladresse in den lokalen Bereich herunterladen und auf den Server hochladen, auf dem sich diese Website befindet. Andernfalls verweist das Bild weiterhin auf die von Ihnen kopierte Seite oder das Dokument, wodurch das Bild auf der Seite nicht korrekt geöffnet wird. Redakteure müssen oft viele Dokumente bearbeiten, und solche Operationen sind zweifellos sehr umständlich. Kann der Kindeditor den darin eingefügten Inhalt automatisch erkennen und das Bild auf den Server hochladen? Der folgende Code implementiert diese Funktion.
Einzelheiten zur Verwendung von Senditor auf der Seite können Sie die offizielle Website -Dokumentation anzeigen.
Die Grundidee der Implementierung dieser Funktion: Fügen Sie dem KeyUp -Ereignis des Arteditor -Editors Code hinzu, um zu überprüfen, ob der Editor Bilder enthält. Ermitteln Sie die Bilder, die automatisch auf den Server hochgeladen werden müssen. Rufen Sie das Bild -Upload -Programm über AJAX auf, um die Bilder auf den Server hochzuladen. Ändern Sie in der AJAX -Rückruffunktion die SRC -Adresse des entsprechenden Bildes in die lokale relative Adresse.
Diese Funktion unterstützt das Kopieren und Hochladen von Bildern in Word auf den Server nicht.
Das obige Bild ist das Endergebnis. Das Programm erkennt den Inhalt automatisch im Editor. Wenn Bilder hochgeladen werden müssen, wird oben im Editor eine Eingabeaufforderung angezeigt. Wenn der Benutzer auf den Link "Upload" klickt, ruft das Programm das Bild -Upload -Programm über AJAX -Anforderung auf und ändert die SRC -Adresse des entsprechenden Bildes in der Rückruffunktion an der lokalen relativen Adresse.
Spezifische Implementierungsschritte und verwandte Codes:
1. Änderung des Kindeditor Editors
Suchen Sie die Datei stitor.js und fügen Sie im Ereignis keyUp () benutzerdefinierte Code hinzu. Der Code, der von verschiedenen Versionen von Solditor bereitgestellt wird, kann stark variieren und mit Hilfe offizieller Dokumente suchen. Dieser Artikel basiert auf Senditor Version 4.1.10.
2. auto.js Dateicode
Funktion df () {var haspicContainer = document.getElementById ("has_pic"); if (has_pic "== null) {HaSpicContainer = document.createelement (" div "); HaSpicContainer.id =" has_pic "; Server </b> <a href = 'javaScript: uploadpic ();' > Upload </a> </div> <div id = 'bestätigen'> </div> "; (Das.attr ("src") .Indexof ("http: //")> = 0 || Das $ (IMG) .Length - 1) Strtr += thattr ("src"); $ ("#has_pic"). Hide (); Beforesend: Funktion () {$ ("#Upload") $ (". ke-edit-iframe"). Inhalt () find ("img"); this.attr ("src", "/uploads/" + str [i]); href = 'javaScript: closeUpload ();'> close </a> ");} else $ ("#bestätigen "). Text (" Upload fehlgeschlagen! ");}});}$ (". Ke-edit-iframe"). Inhalt (). Find ("IMG") wird verwendet, um alle Bilder im Editor-Inhalt zu finden. Standardmäßig wird der Inhalt des Editors im Iframe-Element gespeichert, das die Eigenschaft von class = "ke-edit-iframe" enthält. Das Programm bestimmt, ob der Wert jedes Bild -SRC -Attributs "http: //" oder "https: //" enthält, wodurch festgelegt wird, ob das Bild ein Remote -Bild oder ein lokales Bild ist. Wenn das Bild ein Remote -Bild ist, wird uploadpic.ashx von der AJAX -Methode von JQuery aufgerufen, um auf dem Server hochzuladen. Ändern Sie gleichzeitig die SRC -Adresse des entsprechenden Bildes in der Rückruffunktion.
3.. Uploadpic.ashx -Dateicode
öffentliche Klasse Uploadpic: Ihttphandler {public void processRequest (httpcontext context) {context.response.contentType = "text/plain"; String pic = context.request.queryString ["pic"]; String [] arr = pic.split ('|'); String str = ""; UploadImg ST = new UploadImg (); für (int i = 0; i <arr.length; i ++) {if (arr [i] .Indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) {String Std = St.SaveurLpics (Arr] [i], "../ ../uploads/image/"). if (std.length> 0) {if (i == arr.length - 1) strr += std; sonst strr + = std + "|"; }}} context.Response.write (SSTR); } public bool isreusable {get {return false; }}} öffentliche Klasse UploadImg {public String SaveUrlpics (String imgurlary, String Pfad) {String strhtml = ""; String dirpath = httpcontext.current.server.mappath (Pfad); try {if (! DirCtory.Exists (Dirath)) {Directory.CreateRectory (DirPath); } String ymd = datetime.now.toString ("yyyymmdd", DateTimeFormatInfo.invariantInfo); Dirath + = ymd + "/"; if (! DirCtory.Exists (Dirath)) {Directory.CreateRectory (DirPath); } String newFileName = datetime.now.toString ("yyyymmddhmmss_ffff", DateTimeFormatInfo.invariantInfo) + imgurlary.substring (imgurlary.lastindexof (")); Webclient wc = new WebClient (); Wc.DownloadFile (Imgurlary, Dirath + Newfilename); strhtml = ymd + "/" + newFileName; } catch (Ausnahme ex) {// return ex.Message; } return strhtml; }}Das Remote -Bild wird über die Webclient -Methode auf den relativen Pfad "/Uploads/Image/" des Servers heruntergeladen, und der Ordner und den entsprechenden Dateinamen werden nach dem Datum automatisch generiert. Das zurückgegebene Ergebnis enthält die lokalen relativen Adressen aller von "|" getrennten Bilder. In der Funktion uploadpic () der auto.js -Datei in Schritt 2 erhält der Erfolg der Rückrufmethode den Wert und analysiert sie und weist die Adresse dem SRC -Attribut des entsprechenden Bildes zu.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.