{"id":442,"date":"2011-12-06T21:37:07","date_gmt":"2011-12-06T10:37:07","guid":{"rendered":"http:\/\/ntsblog.homedev.com.au\/?p=442"},"modified":"2013-03-22T00:20:21","modified_gmt":"2013-03-21T13:20:21","slug":"use-ckeditor-on-mvc-3-razor-website","status":"publish","type":"post","link":"https:\/\/ntsblog.homedev.com.au\/index.php\/2011\/12\/06\/use-ckeditor-on-mvc-3-razor-website\/","title":{"rendered":"Use CKEditor on MVC 3 Razor Website"},"content":{"rendered":"<div id=\"ntsbl-4230522657\" class=\"ntsbl-before-content ntsbl-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6288941070289539\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:inline-block;width:728px;height:90px;\" \ndata-ad-client=\"ca-pub-6288941070289539\" \ndata-ad-slot=\"9356781486\"><\/ins> \n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p>This post provides the basic steps the implement a CKEditor control into your MVC Razor web page.<\/p>\n<p>This post assumes you have a working MVC website, with a standard _Layout.cshtml page.<\/p>\n<p>Follow these easy steps:<\/p>\n<ol>\n<li>Download the latest version of the CKEditor from <a href=\"http:\/\/ckeditor.com\/download\" target=\"_new\">here<\/a><br \/>\nYou only need to download the basic package. <\/p>\n<p>\nAt the time of writing I downloaded the zip file of CKEditor 3.6.2<br \/>\n<br \/>You will see there is an ASP.net control that can be downloaded but this is not required to make it work with MVC.<\/p>\n<li>Unzip the downloaded package\n<li>In windows explorer copy the &#8220;ckeditor&#8221; folder into the root folder of your website.\n<li>In Visual studio and click the &#8220;Show All Files&#8221; icon.\n<li>right-click on the ckeditor folder and choose include in project, this can take a little while..\n<li>In the &lt;head&gt; of your _Layout.cshtml file reference the ckeditor.js file<br \/>\n[js]<br \/>\n&lt;script src=&quot;@Url.Content(&quot;~\/ckeditor\/ckeditor.js&quot;)&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;<br \/>\n[\/js]<\/p>\n<li>Create a model class with a property you wish to bind to your HTML editor<\/li>\n<li>Create a strongly-typed view (use scaffold template of edit if you like)<\/li>\n<li>Now the easy bit, the way this works is by generating a &lt;textarea&gt; control with the class of &#8220;ckeditor&#8221; and an id, so the html for this would look like the following. Note the id can be anything you want.<br \/>\n[html]<br \/>\n&lt;textarea class=&quot;ckeditor&quot; id=&quot;text-details&quot; name=&quot;Details&quot;&gt;some text&lt;\/textarea&gt;<br \/>\n[\/html]<br \/>\nTo generate this in MVC use the following<br \/>\n[csharp]<br \/>\n@Html.TextAreaFor(model =&gt; model.Details, new { @class=&quot;ckeditor&quot;, @id=&quot;text-details&quot;})<br \/>\n[\/csharp]<br \/>\nwhere model.Details is the property of the strongly-typed class you passed through\n<\/ol>\n<p>That&#8217;s it. Run the site and visit the page. Your text area control will be rendered as the CKEditor control.<\/p>\n<p>Happy editing<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post provides the basic steps the implement a CKEditor control into your MVC Razor web page. This post assumes you have a working MVC [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-442","post","type-post","status-publish","format-standard","hentry","category-mvc"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/posts\/442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":0,"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/posts\/442\/revisions"}],"wp:attachment":[{"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/media?parent=442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/categories?post=442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ntsblog.homedev.com.au\/index.php\/wp-json\/wp\/v2\/tags?post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}