Integrating CKEditor in ASP.NET MVC 2?

Question

I want to use CKEditor for a comment field in my ASP.NET MVC 2 application, but can't get it to work. Here is what I have:

The textarea where I try to integrate the editor:

    <div class="editor-field">
        <%: Html.TextAreaFor(model => model.Comment, new { @class = "textarea", @id="Editor1" })%>
        <%: Html.ValidationMessageFor(model => model.Comment) %>
    </div>

The script references in the head:

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="../../Scripts/ckeditor/adapters/jquery.js" type="text/javascript"></script>
</asp:Content>

And the document ready function:

<% using (Html.BeginForm())
   {%>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#Editor1').ckeditor();
       });
   </script>

(Etc...) I don't know if the problem is with the TextareaFor helper method, where I tried to set the id to Editor1. I'm pretty new to MVC as well, so I guessed this was how to do it.

Anyway, it doesn't work, and I would appreciate any suggestions as to what I am doing wrong.

Answer 1

first check if $('#Editor1') is returning the element you want.

alert($('#Editor1').length);
alert($('#Editor1')[0].id);

if not, try using a class selector instead, like $('.ckeditor')

Answer 2

Ok, found the answer myself. It appears there was a conflict with another jQuery plugin on the same page, so I needed to use jQuery.noConflict(); and then use jQuery instead of $ in the code. The placement of noConflict was also important. See the comment by erhard on this web page: http://devoracles.com/jquery-error-documentready-is-not-a-function-sure