CODEWITHSUNDEEP
asp.net-mvcvb.netckeditor
user1708468
user1708468

Reputation: 195

CKEdtior not displaying

I am trying to integrate CKEditor into a MVC application. As far as I can tell all I should really have to do is.

Add the following to my master page.

<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../../ckeditor/adapters/jquery.js"></script>
<script type="text/jscript" src="../../Scripts/jquery-1.3.2.js"></script>

Then on my view itself. I have the following code:

<script type="text/javascript">        
    $(document).ready(function() { $('#news').ckeditor(); });
</script>

<fieldset>
    <legend>Fields</legend>
        <p>
            <label for="title">Title:</label>
            <%=Html.TextBox("title")%>
            <%= Html.ValidationMessage("title", "*") %>
        </p>
        <p>
            <label for="news">News:</label>
            <%=Html.TextArea("news")%>
            <%= Html.ValidationMessage("news", "*") %>
        </p>
        <p>
            <label for="publishedDate">Publication Date:</label>
            <%= Html.TextBox("publishedDate") %>
            <%= Html.ValidationMessage("publishedDate", "*") %>
        </p>
        <p>
            <input type="submit" value="Create" />
        </p>
</fieldset>

Please bear in mind I am not trying to get this to actually DO anything postback wise. Just to actually render in the first place. Can someone point out exactly what it is I am doing wrong?

Oh and if it helps any VS is also giving me the following warning:

Warning 1 Error updating JScript IntelliSense: ..Cut to Protect the innocent..\ckeditor\ckeditor.js: 'getFirst()' is null or not an object @ 15:180 ..Cut to Protect the innocent..\Views\Shared\Admin.Master 1 1 ilaTraining

Upvotes: 1

Views: 234

Answers (3)

codewaggle
codewaggle

Reputation: 4943

A few things to look at:

Try without using the jQuery adapter just to see if the editor loads.

Remove:

<script type="text/javascript" src="../../ckeditor/adapters/jquery.js"></script>

Replace:

<script type="text/javascript">        
    $(document).ready(function() { $('#news').ckeditor(); });
</script>

With:

<script type="text/javascript">        
    $(document).ready(function() { CKEDITOR.replace( 'news' ); });
</script>

There were a couple of releases of the jQuery adapter that had bugs, maybe try a different CKEditor version?

You could try using a more recent version of jQuery. The version that you're using ( jquery-1.3.2 ), was released in February of 2009. It's 3 1/2 years old.

Does the problem occur in all browsers?

Upvotes: 0

nemesv
nemesv

Reputation: 139758

With the line $('.test').ckeditor(); you try to apply the ckeditor to the elements which has the css class .test. But in your view none of the inputs have this class.

Assuming that you want to make your TextArea into an ckeditor so you need to add the class with this overload: 

<%= Html.TextArea("news", new { @class = ".test" }) %>

Or you can reference your TextArea also by the id "news" (because this is the id what you gave to your input with the expression Html.TextArea("news")). So the following code also should work:

$('#news').ckeditor();

Because you are trying to use the jQuery adapter of the ckeditor you have to make sure that you load the ckeditor after jQuery is loaded. So the correct order of the script includes should be the following:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.3.2.js %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/ckeditor/ckeditor.js %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/ckeditor/adapters/jquery.js %>"></script>

As a side note: you should use the Url.Content helper when you include scripts or css when using ASP.NET MVC.

Upvotes: 1

JustinStolle
JustinStolle

Reputation: 4420

If you are referencing the element by id, you should use #, such as $('#news').ckeditor();

See the difference in the jQuery API for ID Selector and Class Selector.

Upvotes: 0

Related Questions