CODEWITHSUNDEEP
asp.netimageuploadckeditor
Somy J
Somy J

Reputation: 173

Enable image upload for CKEditor at asp.net

i use CKEditor for my asp.net C# project. How can I enable image upload tab for the editor. I read find some articles but none of them where useful. some of them where for php. I want for asp.net. thank you for helping.

Upvotes: 3

Views: 21708

Answers (3)

Ananda G
Ananda G

Reputation: 2539

If you just want to enable the hidden tab the add only under script folder

CKEDITOR.config.extraPlugins = 'imageuploader';

But there will be a error in console, because you have to define the link, which will be action to upload the file/image, like

filebrowserImageBrowseUrl: 'YourController/YourAction',            
filebrowserImageUploadUrl: 'YourController/YourAction'

Upvotes: 1

Somy J
Somy J

Reputation: 173

finally I could find the solution.

I did two things to solve my problem.

first I edited config.ascx file and set the base url to images folder. like below:

public override void SetConfig() {

    // The base URL used to reach files in CKFinder through the browser.
    BaseUrl = "~/images/";
    // The phisical directory in the server where the file will end up. If
    // blank, CKFinder attempts to resolve BaseUrl.
    BaseDir = "";
}

and the mistake that I had was that, my pages was at admin folder and I was put ckeditor and ckfinder folder at root of my website.

by puting these files at the admin folder the problem soved.

thank you.

Upvotes: 0

Somy J
Somy J

Reputation: 173

I do like the http://www.codedigest.com/Articles/ASPNET/423_Upload_Images_and_Integrate_with_CKeditor_in_AspNet.aspx letutorial for Using filebrowserImageUploadUrl property with our own implementation of a file uploader. but the botton of upload didn't appear and nothing happened. my code is here:

<head runat="server">

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            CKEDITOR.replace('<%=CKEditor1.ClientID %>', { filebrowserImageUploadUrl: '/Upload.ashx' });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server" Width="600px" Height="200px"></CKEditor:CKEditorControl>
    </div>
    </form>
</body>
</html>

and the ashx file:

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Web;

public class Upload : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        HttpPostedFile uploads = context.Request.Files["upload"];
        string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
        string file = System.IO.Path.GetFileName(uploads.FileName);
        uploads.SaveAs(context.Server.MapPath(".") + "\\Images\\" + file);
        string url = "/Images/" + file;
        context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
        context.Response.End();            
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

Upvotes: 6

Related Questions