Ckeditör Nedir? Nasıl Kullanılır?

İbrahim     11 Aralık 2018     265     4    

Ckeditör Nedir?

Ckeditör'ün nasıl kulllanıldığını irdelemeden önce ckeditör nedir onu inceleyelim.

Kullanımı kolay, açık kaynaklı, hızlı ve güvenli, ayrıca ücretsiz, dinamik web sitelerine eklediğimiz yazının aynısını çıktı olan veren zenginleştirilmiş metin editörüdür.Ckeditör resim, video, flash animasyon, tablo, liste, form gibi birçok elemanı kullanmanıza olanak sağlar.

Nasıl Kullanılır?

İlk olarak web sitesinden ckeditörü indiriyoruz.

Ckeditör İndir

İndirilen dosyayı .zip'ten çıkartıyoruz.Projemizin ana dizinine atıyoruz.(Ben ana dizinde bulunan content klasörünün içerisine atıyorum.)

Ardından sayfamızın head etiketi arasına ckeditör.js'yi ekliyoruz ve alt kısma script etiketleri arasına ckeditör.replace methodunu ekliyoruz.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Anasaya</title>
    <script src="~/Content/ckeditor/ckeditor.js"></script>
</head>
<body>
    <div>
        <div style="width:60%; height:4000px; text-align:center;">
            <h1>CKEDİTÖR</h1>
            <textarea id="ckeditor" style="height:100%;" placeholder="Makale İçeriğini Giriniz">
                Buraya metin giriniz.
            </textarea>
        </div>
    </div>
    <script>
        CKEDITOR.replace('ckeditor');
    </script>
</body>
</html>

Çalıştırdığımızda şu görüntüyü elde ediyoruz.

Ckeditör nedir?Nasıl kullanılır?Şuanda ckeditörü kullanabiliriz.Fakat küçük bir eksik var burada resim yüklemesi yapacak olduğumuzda, ancak internet üzerinden bir resmin url'sini ekleyebiliriz.Biz bilgisayardan bir resmi yükleyip ckeditörümüze eklemek istersek bir kaç işlem daha yapmamız gerekiyor.

Ckeditörde Resim Yükleme Ve Görüntüleme Nasıl Yapılır?

İşlemleri aspnet mvc üzerinden yapacağım.Fakat mantık aynı olduğu için aynısını siz farklı teknolojiler üzerinde de uyarlayabilirsiniz.(aspnet web form gibi)

İlk başta sayfamızdaki ckeditör.replace methodunda değişikilik yapacağız.Hemen uygulayalım.


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Anasaya</title>
    <script src="~/Content/ckeditor/ckeditor.js"></script>
</head>
<body>
    <div>
        <div style="width:60%; height:4000px; text-align:center;">
            <h1>CKEDİTÖR</h1>
            <textarea id="ckeditor" style="height:100%;" placeholder="Makale İçeriğini Giriniz">
                Buraya metin giriniz.
            </textarea>
        </div>
    </div>
    <script>
        CKEDITOR.replace('ckeditor',
            {
                filebrowserImageUploadUrl: '@Url.Action("ResimYukle", "Home")',
                filebrowserImageBrowseUrl: '@Url.Action("ResimGoster", "Home")'
            }
        );
    </script>
</body>
</html>

Ana dizinde bulunan Content klasörü içersine resim adlı klasör oluşturalım.

HomeController'ımıza gidelim.ResimYukle ve ResimGoster adlı actionlarımızı yazalım.

using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Deneme2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ResimYukle(HttpPostedFileBase upload)
        {
            upload.SaveAs(Path.Combine(Server.MapPath("~/Content/resim"), upload.FileName));
            return Content("Görsel Dosya sunucuya başarıyla gönderildi!");
        }

        public ActionResult ResimGoster()
        {
            return View(Directory.GetFiles(Server.MapPath("~/Content/resim")).Select(Path.GetFileName));
        }
    }
}

 

Projeyi çalıştıralım ve resim yükleme nesneleri geldimi kontrol edelim.

Ckeditör nedir?Nasıl kullanılır?Gördüğünüz gibi karşıya yükle sekmesine nesnelerimiz geldi.Resim yükle action'u sayesinde artık burada eklediğimiz resimler, resim klasörüne kaydolacak.

Şimdi sıra geldi resim klasöründeki resimleri listelemeye...

ResimGoster action'ımızın view'ini oluşturuyoruz.Jquery kütüphanesini indirip sayfaya dahil ediyoruz

@model IEnumerable<string>
@{ Layout = null; }

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ResimGoster</title>
</head>
<body>
    <div>
        @foreach (var item in Model)
        {
            <div style="width:200px; height:230px; display:inline-block; margin-right:15px;">
                <img src="~/Content/resim/@item" style="width:200px; height:200px;" />
                <div>
                    <button class="selectButton" data-filename="Content/resim/@item">Seç</button>
                </div>
            </div>
        }
    </div>
    <script src="~/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            $('.selectButton').click(function () {
                window.opener.CKEDITOR.tools.callFunction(1, $(this).attr('data-filename'));
                window.close();
            });
        });
    </script>
</body>
</html>

Burada resim klasörü içersindeki resimleri çekip ekrana yansıttık.Resim altına seç butonu koyduk.Seç butonu click olduğunda(tıklandığında) metin editörüne eklenmesini sağladık.

İşlemlerimiz burada bitmiştir.Şimdi projeyi çalıştıralım.Resim' butonuna tıklayalım ve sunucuya göz at dediğimizde artık resimlerimizi sayfamızda görebiliyoruz.

Ckeditör nedir?Nasıl kullanılır?Seç butonuna tıkladığımızda ckeditörümüze eklenebilmekte.

Ckeditör nedir?Nasıl kullanılır?

Ckeditör ile yapılacak işlemler bu kadar arkadaşlar umarım anlatabilmişimdir.

İyi kodlamalar!


Etiketler:  
ckeditor
ckeditor-kullanimi


Paylaş:  

Bir Cevap Yazın

İ

İrem Erdinç 15 Aralık 2018
Bende tam ckeditöre resim eklemeyi arıyordum, açıklayıcı olmuş eline sağlık.

İbrahim Çakal 15 Aralık 2018
Teşekkür ederim, elimden geldiğince anlaşılır şekilde yazmaya çalışıyorum.

S

Süleyman 21 Ocak 2019
Çok teşekkür ederim, eline sağlık.

İbrahim Çakal 21 Ocak 2019
Rica ederim Süleyman.