Schlagwort: wysiwyg

Ich hatte gerade das Problem, dass ich mit dem WYSIWYG-Editor CKEditor Bilder hoch laden möchte, um sie direkt in meinen Text einzupflegen.
Dazu wird irgendwo im View der Editor definiert:

  <script type="text/javascript">
      window.onload = function() {
          CKEDITOR.replace('ckEditor', {
            skin: 'office2003',            
            filebrowserUploadUrl: '<%=Url.Action("UploadImage") %>'
      });
  };
  
</script>

Wichtig ist hier der Parameter „filebrowserUploadUrl“. Dies ist der Pfad, wohin das Bild beim Upload gesendet wird.
Im Controller wird das ganze nun verarbeitet:

        [AcceptVerbs(HttpVerbs.Post)]
        public string UploadImage()
        {
            // Datei speichern
            var identifier = Guid.NewGuid();
            string[] fileExt = Request.Files[0].FileName.Split('.');
            string safeFile = identifier + "." + fileExt[fileExt.Length - 1];
            Request.Files[0].SaveAs(Path.Combine(HostingEnvironment.MapPath("~/UploadedImages/"), safeFile));
            
            // Daten an CKEditor zurück geben
            string result = "<script type=\"text/javascript\">";
            result += "window.parent.CKEDITOR.tools.callFunction(" + Request.QueryString["CKEditorFuncNum"] + ", \"" +
                      Path.Combine(Url.Content("~/UploadedImages/"), safeFile) + "\",\"\");</script>";
            return result;
        }

Erst speicher ich das Bild irgendwo und gebe dann den Pfad per Javascript zurück. Da ich nur das JS ausführen lassen muss, gebe ich kein komplettes View zurück. Die Url wird dann korrekt an CKEditor übergeben (siehe Screenshots). Der letzte Parameter des callFunction()-Aufrufes kann für Fehlermeldungen genutzt werden, Bild zu groß o.ä.
Mich hat dieser kleine Aufruf bestimmt eine Stunde gekostet!