Yazılımlarınızda CKEditor kullanmak için öncelikle https://ckeditor.com/ckeditor-4/download/ adresinden MVC uyumlu dosylarini indirmeniz gerekiyor.
Indirdiginiz dosylari paketten çikararak projenizin ana dizinine atin, projenizin view katmaninda öncelikle, CKEditor’un .css ve .js dosyalarini sayfaya entegre edin (bu _Layout.cshtml ayfasinda veya kullanacagiz sayfalarda olabilir).
@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
@Scripts.Render("~/ckeditor/ckeditor.js");
@Scripts.Render("~/ckeditor/ckfinder/ckfinder.js");
@Scripts.Render("~/Scripts/jquery.validate.js")
Editörü kullanmak istediginiz yerde asagidaki kodu kullanabilirsiniz.
@Html.TextAreaFor(model => model.Icerik, new { @id = "editor1" })
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('editor1', {
enterMode: CKEDITOR.ENTER_BR,
});
CKFinder.setupCKEditor(null, '@Url.Content("~/ckeditor/ckfinder/")');
</script>
CkFinder ile resim yüklemek için aşağıdaki adımları uygulayınız.
1- İlk olarak ckfinder klasörünüzün altında _samples ve _source klasörleri varsa bunları silin çünkü çalışma esnasında hatalara neden olabiliyor.
2- ckfinder/bin/Release/" içinde bulunan "CKFinder.dll" dosyasını projemizin "bin" klasörüne referans olarak ekleyin.
(Bunu copy/paste olarak değil referanslar menüsüne sağ tık yapıp referans ekle/Gözat/ckfinder/bin/Release/CKFinder.dll şeklindeyapın
3- ckeditor/ckfinder/config.ascx yolunu takip ederek config.ascx dosyası üzerinden CheckAuthentication metodunun değeri FALSE ise TRUE yapın.
4- config.ascx dosyası üzerinde resimlerin ekleneceği klasör yolu varsayılan olarak
BaseUrl = "/Content/Uploads/";
BaseDir = HttpContext.Current.Server.MapPath("~/Content/Uploads/");
şeklindedir dolayısyla Content klasörü içerisinde Uploads isimli bir klasör oluşturun veya belirlediğinin başka bir klasör yolunu buraya yazın.
Artık resim yükleyebilirsiniz...