Using FCKeditor in ASP.Net MVC 3

In the previous post I have a post about Config FCKeditor to Upload picture in ASP.Net MVC 3. Today I will recommend about Using FCKeditor in ASP.Net MVC 3.

1. Create a new project

2. Create a new folder named fckeditor  in a Scripts folder.

3. Copy editor folder and fckconfig.js, fckeditor.js, fckstyles.xml from folder with is unzip and paste to fckeditor folder.

4. Add reference “FredCK.FCKeditorV2.dll” to project

5. The next step is to modify the fckconfig.js file.

var _FileBrowserLanguage = ‘aspx’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘aspx’ ; // asp | aspx | cfm | lasso | perl | php | py

6. Next is modification of the file at FCKeditor\editor\filemanager\connectors\aspx\config.ascx. First modify the CheckAuthentication function. By default it is set to return false, but in order for the file uploader to work this function needs to return true.

7. Edit UserFilesPath and UserFilesAbsolutePath in SetConfig method
// URL path to user files.
        UserFilesPath = VirtualPathUtility.ToAbsolute("~/Content/imageUpload/");

		// The connector tries to resolve the above UserFilesPath automatically.
		// Use the following setting it you prefer to explicitely specify the
		// absolute path. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
		// Attention: The above 'UserFilesPath' URL must point to the same directory.
        UserFilesAbsolutePath = HttpContext.Current.Server.MapPath("~/Content/imageUpload/");

8. Add script to Edit.cshtml View

<script type="text/javascript" src="@Url.Content("~/Scripts/fckEditor/fckeditor.js")"></script>

<script type="text/javascript">
    window.onload = function () {
        var sBasePath = '@Url.Content("~/Scripts/fckeditor/")';
        var oFCKeditor = new FCKeditor('content');
        oFCKeditor.BasePath = sBasePath;
        oFCKeditor.Height = 450;
        oFCKeditor.ReplaceTextarea();
    }
</script>

9. Change to textAare in Edit.cshtml

<div class="editor-field">
    @Html.EditorFor(model => model.Description)
    @Html.ValidationMessageFor(model => model.Description)
</div>

Lets change that to:

<div class="editor-field">
    @Html.TextAreaFor(model => model.Description, new { @id = "content" })
</div>

10. Change Edit method in Controller

[HttpPost, ValidateInput(false)]
        public ActionResult Edit(int id, FormCollection formValue)
        {
            try
            {
                Category category = db.Categories.FirstOrDefault(c => c.CategoryID == id);

                //Save
                UpdateModel(category);
                db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                Category category = db.Categories.FirstOrDefault(c => c.CategoryID == id);

                return View(category);
            }
        }

11. using @Html.Raw() to view data on html.

@Html.Raw(item.Description)

12. Run application to view result.

  

 

Advertisements
This entry was posted in ASP.NET MVC. Bookmark the permalink.

9 Responses to Using FCKeditor in ASP.Net MVC 3

  1. Van Toan says:

    i’m a student at VietNamese, can U send to me the resouce this project? thank so much.
    Email: vantoankh@gmail.com

  2. Van Toan says:

    My English too bad, isn’t it?

  3. quysnhat says:

    Hi Toan, can you implement flow step by step i wrote this post, I think it is clear to step by step

    thanks,

  4. chu says:

    Hi,
    Great post, I was looking for something like that since last few days.

    Working first shot.

    Before I try out with new version of CKEditor, does the same process works with the new version of FCKEditor, which is now CKEditor ?

    Cheers again

  5. useful information, Thanks for share

  6. TrongNguyen says:

    thanks so much

  7. vellela says:

    Reblogged this on ASP.Net blog *Tools @nare and commented:
    Great Article on integration of FCK editor .. should save alot of time

  8. Parveen says:

    Thank you very much brother. I was struggling from 2 days. But you helped me.

    Thanks again 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s