Verwenden von CKEditor benutzerdefinierte Filebrowser und Upload mit ASP.Net MVC

Question

Ich habe eine MVC-App, die ich versuche, CKEditor mit zu verwenden. Ein Beispiel, das ich betrachtete, ist here, aber es gibt viele andere. So weit, so gut, aber ein Abschnitt, den ich immer noch neugierig bin, ist die js, die den ausgewählten Dateinamen zurück zum Textdialogfeld zum Hochladen von Dateien sendet.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".returnImage").click("click", function (e) { 
      var urlImage = $(this).attr("data-url"); 
      window.opener.updateValue("cke_72_textInput", urlImage); 
      window.close(); 
     }); 
    }); 
</script> 

Insbesondere das cke_72_textInput Element. Mein Beispiel funktionierte zunächst nicht, bis ich Chrome-Dev-Tools öffnete und die tatsächliche ID des Textinputs fand, was in meinem Fall cke_76_textInput war. Warum die ID ändern, frage ich mich? Scheint ein bisschen "fragil" auf eine bestimmte ID wie diese zu verweisen? Der obige js-Code nimmt nur die ausgewählte Bilddatei und gibt sie in das Textfeld des Dateiupload-Dialogs zurück.

Gibt es etwas exposed, das dieses Textbox-Element indirekt referenziert, ohne es per ID zu spezifizieren (über die config zum Beispiel)?

Answer 1

Ich hatte das gleiche Problem ... ein wenig frustrierend, dass ich keine offizielle Dokumentation finden konnte, wenn man bedenkt, dass dies ein gewöhnlicher Anwendungsfall ist.

Wie auch immer, werfen Sie einen Blick auf das schnelle Tutorial hier: http://r2d2.cc/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/. Falls die Verbindung jemals unterbrochen wird, hier ist was ich getan habe.

[HttpPost] 
    public ActionResult UploadImage(HttpPostedFileBase upload, string ckEditorFuncNum) 
    { 
     /* 
      add logic to upload and save image here 
     */ 

     var path = "~/Path/To/image.jpg"; // Logical relative path to uploaded image 
     var url = string.Format("{0}://{1}{2}", 
      Request.Url.Scheme, 
      Request.Url.Authority, 
      Url.Content(path)); // URL path to uploaded image 
     var message = "Saved!"; // Optional 

     var output = string.Format("<script>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}');</script>", 
      CKEditorFuncNum, 
      url, 
      message); 
     return Content(output); 
    } 

Answer 2

Zu sehen:

$(document).ready(function() { 

CKEDITOR.replace('Text-area-name', { 
      filebrowserImageUploadUrl: '/Controller-name/UploadImage' 
     }); 

     CKEDITOR.editorConfig = function (config) { 
      // Define changes to default configuration here. For example: 
      config.language = 'de'; 
      // config.extraPlugins = 'my_own_plugin'; // if you have any plugin 
      // config.uiColor = '#AADC6E'; 
      // config.image_previewText = CKEDITOR.tools.repeat(' Hier steht dann dein guter Text. ', 8); 
      // config.contentsLanguage = 'de'; 
      config.height = 350; // 350px, specify if you want a larger height of the editor 

      config.linkShowAdvancedTab = false; 
      config.linkShowTargetTab = false; 
     }; 

CKEDITOR.on('dialogDefinition', function (ev) { 
      var dialogName = ev.data.name; 
      var dialogDefinition = ev.data.definition; 
      ev.data.definition.resizable = CKEDITOR.DIALOG_RESIZE_NONE; 

      if (dialogName == 'link') { 
       var infoTab = dialogDefinition.getContents('info'); 
       infoTab.remove('protocol'); 
       dialogDefinition.removeContents('target'); 
       dialogDefinition.removeContents('advanced'); 
      } 

      if (dialogName == 'image') { 
       dialogDefinition.removeContents('Link'); 
       dialogDefinition.removeContents('advanced'); 
       var infoTab = dialogDefinition.getContents('info'); 
       infoTab.remove('txtBorder'); 
       infoTab.remove('txtHSpace'); 
       infoTab.remove('txtVSpace'); 
       infoTab.remove('cmbAlign'); 
      } 
     }); 

    } 

Auf Contoller:

[HttpPost] 
    public ActionResult UploadImage(HttpPostedFileBase file, string CKEditorFuncNum, string CKEditor, string langCode) 
    { 
    if (file.ContentLength <= 0) 
      return null; 

     // here logic to upload image 
     // and get file path of the image 

     const string uploadFolder = "Assets/img/"; 

     var fileName = Path.GetFileName(file.FileName); 
     var path = Path.Combine(Server.MapPath(string.Format("~/{0}", uploadFolder)), fileName); 
     file.SaveAs(path); 

     var url = string.Format("{0}{1}/{2}/{3}", Request.Url.GetLeftPart(UriPartial.Authority), 
      Request.ApplicationPath == "/" ? string.Empty : Request.ApplicationPath, 
      uploadFolder, fileName); 

     // passing message success/failure 
     const string message = "Image was saved correctly"; 

     // since it is an ajax request it requires this string 
     var output = string.Format(
      "<html><body><script>window.parent.CKEDITOR.tools.callFunction({0}, \"{1}\", \"{2}\");</script></body></html>", 
      CKEditorFuncNum, url, message); 

     return Content(output); 
    }