ASP.NET（MVCではない）ソリューションでCKSource.FileSystem.Localを使用する方法

Question

このドキュメントはManual Integrationですが、MVCのみです。

ASP.NET用の統合ロジックを試しましたが、同じことをすることはできません。

これを行う方法を示す文書を知っている人はいますか？

私はCKSource.FileSystem.Localを使用する必要がありますが、主な問題は、CKfinder 3コネクタをASP.NET WebフォームでCKEditor 4.6と連携するように設定できないことです。

おかげ

Answer 1

私はCKSource.FileSystem.Localが行う内容を正確に把握していません。絶対使用しないでください。しかし、フォーマットされたテキストのリンクとしてイメージとファイルを挿入するためにポップアップウィンドウが機能するように見えます。ここでは完全な実例がありますので、そのプラグインは必要ありません。

まず、エディタを含むページから始めます。別のページを指すfilebrowserBrowseUrlとfilebrowserImageBrowseUrlの使用に注意してください。

<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> 

次は、選択するイメージとファイルを表示するCKFileBrowser.aspxページです。すべてのファイルを表示するにはGridViewを使用し、複数の列を簡単に表示できるので、画像にはDataListを使用します。

<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> 

ここでは、Request.QueryString["CKEditorFuncNum"]の使用方法を示します。これは、コールバックの正しいエディタを識別します。 jQueryは、click関数を<tr>タグと<img>タグにバインドして、親ページへのコールバックを開始し、正しいファイル/パスをエディタに戻します。

CKFileBrowser.aspxポップアップ

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(); 
    } 
}