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.

Do you get any javascript error ?

Aristos
– Aristos

2010-10-22 13:00:53 +00:00
Commented Oct 22, 2010 at 13:00 — Aristos
– Aristos, Commented Oct 22, 2010 at 13:00

Anders · Accepted Answer · 2010-10-25 15:10:48Z

1

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

answered Oct 25, 2010 at 15:10

Anders

12.8k24 gold badges110 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kae Verens Over a year ago

that comment is no longer accessible. what was it?

y34h · Accepted Answer · 2010-10-22 13:58:54Z

0

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

answered Oct 22, 2010 at 13:58

y34h

1,6591 gold badge11 silver badges19 bronze badges

1 Comment

Anders Over a year ago

Yes it is. But when I check the debugger in Chrome, I get the error message "Uncaught TypeError: Object #<an Object> has no method 'ckeditor'". I'm new to jQuery so I don't know what I'm doing wrong here.

Collectives™ on Stack Overflow

Integrating CKEditor in ASP.NET MVC 2?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related