How use CKSource.FileSystem.Local in a ASP.NET (not MVC) Solution

Question

I found this doc for Manual Integration but is MVC only.

I tried following the integration logic for ASP.NET but I can not do the same thing.

Does anyone know of a document that shows how to do this?

I need to use the CKSource.FileSystem.Local, but the main problem is that we can not configure the CKfinder 3 connector to work with CKEditor 4.6 with ASP.NET WebForms.

Thanks

Answer 1

I don't know exactly what CKSource.FileSystem.Local does. Never used it. But it looks like you want the popup windows to work for inserting images and files as a link in the formatted text. So here is a complete working example so you don't need that plugin.

First we start with the page containing the Editor. Note the use of filebrowserBrowseUrl and filebrowserImageBrowseUrl that point to a separate page.

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

Next is the CKFileBrowser.aspx page that will display the images and files to be selected. We'll use a GridView to display all the files and a DataList for the images because it can easily display multiple columns.

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

Note here the usage of Request.QueryString["CKEditorFuncNum"]. It identifies the correct Editor for the callback. The jQuery will bind the click functions to the <tr> and <img> tags to initiate the callback to the parent page and send the correct file/path back to the editor.

Finally the code behind of the 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();
    }
}