Wie verwende ich CKSource.FileSystem.Local in einer ASP.NET (nicht MVC) Lösung

Question

Ich fand dieses Dokument für Manual Integration aber ist nur MVC.

Ich habe versucht, die Integrationslogik für ASP.NET, aber ich kann nicht das Gleiche tun.

Kennt jemand ein Dokument, das zeigt, wie dies zu tun ist?

Ich muss CKSource.FileSystem.Local verwenden, aber das Hauptproblem besteht darin, dass wir den CKfinder 3 Connector nicht für die Arbeit mit CKEditor 4.6 mit ASP.NET WebForms konfigurieren können.

Dank

Answer 1

Ich weiß nicht genau, was CKSource.FileSystem.Local tut. Habe es nie benutzt. Es sieht jedoch so aus, als ob die Popup-Fenster zum Einfügen von Bildern und Dateien als Link in den formatierten Text verwendet werden sollen. Also hier ist ein komplettes Arbeitsbeispiel, also brauchen Sie dieses Plugin nicht.

Zuerst beginnen wir mit der Seite, die den Editor enthält. Beachten Sie die Verwendung von filebrowserBrowseUrl und filebrowserImageBrowseUrl, die auf eine separate Seite zeigen.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="ckeditor.js"></script> 

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Text="<p>This is a demo text.</p>"></asp:TextBox> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     CKEDITOR.replace('<%=TextBox1.ClientID %>', { 
      filebrowserBrowseUrl: '/CKFileBrowser.aspx?type=doc', 
      filebrowserImageBrowseUrl: '/CKFileBrowser.aspx?type=img' 
     }); 
    }); 
</script> 

Als nächstes ist die CKFileBrowser.aspx Seite, die die Bilder und Dateien angezeigt werden, ausgewählt werden. Wir verwenden eine GridView, um alle Dateien und eine DataList für die Bilder anzuzeigen, da es einfach mehrere Spalten anzeigen kann.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="ckeditor.js"></script> 

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="filesHolder"> 
    <Columns> 
     <asp:TemplateField HeaderText="Name"> 
      <ItemTemplate> 
       <%# Eval("Name") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Size"> 
      <ItemTemplate> 
       <%# string.Format("{0:N0}", Convert.ToInt32(Eval("Length"))/1024) %> kb 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" CellPadding="10" CssClass="thumbnailHolder"> 
    <ItemTemplate> 
     <img src="<%=defaultFolder %>/<%# Eval("Name") %>" /> 
    </ItemTemplate> 
</asp:DataList> 

<script type="text/javascript"> 
    var funcNum = '<%= Request.QueryString["CKEditorFuncNum"] %>'; 
    $(function() { 
     $('#<%= GridView1.ClientID %> tr').click(function() { 
      var fileUrl = '<%= baseUrl %>' + $(this).find("td:first").text().trim(); 
      window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl); 
      window.close(); 
     }); 
    }); 
    $(function() { 
     $('#<%= DataList1.ClientID %> img').click(function() { 
      var fileUrl = $(this).attr('src').trim(); 
      window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl); 
      window.close(); 
     }) 
    }); 
</script> 

<style> 
    .filesHolder tr { 
     cursor: pointer; 
    } 

    .thumbnailHolder { 
     float: left; 
     margin: 0px 10px 10px 0px; 
    } 

     .thumbnailHolder img { 
      max-width: 250px; 
      max-height: 125px; 
      cursor: pointer; 
     } 
</style> 

Beachten Sie hier die Verwendung von Request.QueryString["CKEditorFuncNum"]. Es identifiziert den richtigen Editor für den Rückruf. Die jQuery wird die click Funktionen an die <tr> und <img> Tags binden, um den Rückruf an die übergeordnete Seite zu initiieren und die richtige Datei/Pfad zurück an den Editor senden.

schließlich der Code hinter der CKFileBrowser.aspx Popup

public string defaultFolder; 
public string baseUrl; 

protected void Page_Load(object sender, EventArgs e) 
{ 
    //set the default folder and the url for the files 
    defaultFolder = "/files"; 
    baseUrl = Request.Url.Scheme + "://" + Request.Url.Authority + defaultFolder + "/"; 

    bool images_only = false; 

    //check the type of popup 
    if (Request.QueryString["type"] != null) 
    { 
     if (Request.QueryString["type"].ToString() == "img") 
     { 
      images_only = true; 
     } 
    } 

    //build the popup items 
    findTheFiles(images_only); 
} 

private void findTheFiles(bool images_only) 
{ 
    //get all the files in the folder 
    DirectoryInfo di = new DirectoryInfo(Server.MapPath(defaultFolder)); 
    FileInfo[] files = di.GetFiles().OrderBy(x => x.Name).ToArray(); 

    if (images_only == true) 
    { 
     //show only jpg or gif in the datalist 
     DataList1.DataSource = files.Where(x => (x.Extension.ToLower() == ".jpg") || (x.Extension.ToLower() == ".gif")).ToList(); 
     DataList1.DataBind(); 
    } 
    else 
    { 
     //display all files in the gridview 
     GridView1.DataSource = files; 
     GridView1.DataBind(); 
    } 
}