Question

我为Manual Integration找到了这个文档，但只是MVC。

我尝试过遵循ASP.NET的集成逻辑，但我不能做同样的事情。

是否有人知道如何执行此操作的文档？

我需要使用CKSource.FileSystem.Local，但主要问题是我们无法将CKfinder 3连接器配置为与ASP.NET WebForms一起使用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();
    }
}

如何在ASP.NET（而不是MVC）解决方案中使用CKSource.FileSystem.Local

1 个答案: