Zengin Metin Editörü Nedir ? Ckeditör Kurulumu Ve Laravel Entegrasyonu

09.09.2018

5132 Okunma

0 Favori

169 Yorum

Merhabalar, ufak tefek kodlama bilgileri paylaşmaya başladığımda hedefim tekrar eden aynı içeriklerden ziyade insanlara anlık yardımcı olacak ve sitelerini daha profesyonel hale getirebilecekleri içerikleri sunmaktı. Bu hedef doğrultusunda Zengin Metin Editörü Nedir ? başlıklı bir içerikle karşı karşıyayım. Bu terim aslında adından da kolaylıkla anlaşılacağı gibi bizlere içerik girişleri yaparken daha fonksiyonel editör deneyimi sunarak yazılarımızı daha gösterişli ve okunaklı hale getirmemize yardımcı olmaktadır.

Zengin Metin Editörü Nedir ?

Daha detaylı değinecek olursak bir çoğumuzun kullandığı ofis programlarından Word'ün bize sağladığı tıklamalarla yazıları büyütme küçültme, kalın yapma, listeler haline getirme vb. gibi pek çok fonksiyonu bizlere sunan Zengin Metin Editörleri web tarafında aslında daha karmaşık işler yapmaktadır. Web uygulamalarında çıktılarımızı düzene sokmak için HTML ve CSS kodları kullanmaktayız. İçeriklerimizi düzenlerken bizlerinde HTML ve CSS kodlarını tek tek eklemeli düzenlemeli ve tagları sürekli açıp kapatmakla uğraşıp çileden çıkmamız gereklidir.

<p>Bu bir <strong>deneme</strong> yazısıdır.</p>

<p> 
  <ul>
     <li>Bu</li>
     <li>bir</li>
     <li>deneme</li>
     <li>listesidir.</li>
  </ul>
</p>

Bizi bu yüklerden kurtaran bu editörler kendi fonksiyonları çerçevesinde dilediğimiz gibi içeriklere düzenlemeleri tek tıklamayla sağlıyor ve bize çıktımızı HTML kodu olarak sağlıyor. Buna ek olarak bir çok zengin metin editörü kendi içerisinde resim uploadı, dosya uploadı , resim kırpma, kod penceresi oluşturma vb. gibi bir sürü ekstra özelliğide bizlere sunmaktadır. Bize hız ve rahat sunan bu editörleri profesyonel bir iş yapacaksan kesinlikle kullanmalıyız.

Uyarı : Bazı editörlerde güvenlik zaafiyetleri olabilmektedir. Bu yüzden kullanıcılara sunduğumuz dosya yükleme veya resim yükleme işlemlerinde dikkatli olmalıyız.

CKEditör Kurulumu

CKEditör bir zengin metin editörüdür. 2018 yılını baz alırsak en çok tercih edilen editörlerden bir tanesidir. Piyasa bir çok ücretsiz zengin metin editörü bulunmakta küçük bir arama yaparak kolaylıkla bulabilirsiniz. Ben bu editöre alışık olduğum için bu editörün kurulumunu sizlere anlatacağım.

CKEditör'ün kurulumu aslında oldukça basittir. Bu içeriğimin aslın konusu Laravel'e nasıl entegre edildiğidir. Bu yüzden Laravel Entegresini merak eden arkadaşlar bir sonraki başlığa atlarsa daha iyi olur. CKEditörü dilerseniz buradan indiripte kullanabilirsiniz veya direk CDN üzerinden şu şekilde kullanabilirsiniz.

Uyarı : Laravel kullanan arkadaşlar bir sonraki başlığa geçiniz..

CKEditör İndirme Linki : https://ckeditor.com/ckeditor-4/download/

<html>
	<head>
		<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
	</head>
	<body>
	</body>
</html>

CKEditör'ü projemize dahil ettikten sonra bir sonraki yapmamız gereken işlem editörümüzün uygulanacağı yapıyı işaret etmektir. Bu işlemi yapmak için özellikle bir textarea form elemanı kullanmalı ve bu form elamanının adını belirtmeliyiz. Diğer form elamanları bazı durumları sorun çıkarabildiği gibi dikkat etmeniz gereken noktalardan biride form elemanının " name " parametresine atama yapacağız. Biz bu örneğimizde " ck " isimli form elemanını kullanacağız.

<textarea name="ck"></textarea>
<script>
	CKEDITOR.replace( 'ck' );
</script>

Kod bloğumuzda da görüldüğü üzere editör tanımla kodumuz form elemanın altında yer alıyor. Kodumuzun stabil bir şekilde çalışması ve sitemizin yükleme hızına yük bindirmemesi için form elamanından sonra kullanmamız gereklidir. Eğer her sayfa bu editör var ise sitenizin footer kısımına yerleştirmeniz daha pratik olur.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CKEditor</title>
		<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
	</head>
	<body>
		<textarea name="ck"></textarea>
		<script>
			CKEDITOR.replace( 'ck' );
		</script>
	</body>
</html>

CKEditör Laravel Entegrasyonu

CKEditör' ümüzü Laravel'e entegre etme işlemini CKEditör'ü indirip sitemize eklemek istediğimizde tercih etmeliyiz. Eğer böyle bir niyetiniz yok ve CDN üzerinden kullanmak istiyorsanız yukarıdaki işlemleri takip etmeniz yeterlidir. Bu anlatım CKEditör'ü indiirp kullanmak üzerine olacaktır.

Laravel kendi içerisinde bir çok kütüphane ile birlikte sunulmaktadır. Bu kütüphanelere dilersek dışarıdan da müdahale edip eklemeler yapabiliriz. CKEditör'ün de Laravel için özel bir kütüphanesi bulunmaktadır. Bu kütüphane aslında CKEditör'ün basit kodlarını kolayca sınıf çağırır gibi kullanmamıza olanak sağlıyor. Bu kütüphaneye aşağıdaki linkten ulaşabilirsiniz.

https://github.com/UniSharp/laravel-ckeditor

Kütüphanemizi dilersek direk kendimiz indirip projemiz içerisinde yer alan aşağıdaki yola atabiliriz.

proje/vendor/unisharp

Unisharp klasörü yoksa kendiniz oluşturun.

Yada projemizin içerisinde composer'ımızı ve komut ekranımızı kullanarak aşağıdaki komutlarla projemize dahil edebiliriz.

composer require unisharp/laravel-ckeditor

Editörümüzü projemize dahil ettikten sonra bazı ayarlamalar yapmamız gerekiyor. Aşağıdaki yolu takip ederek gerekli kodu eklemeliyiz..

proje/config/app.php -> dosyamızı açalım.

/*
 * Application Service Providers...   -> Altına aşağıdaki kodları ekleyelim.
*/


Unisharp\Ckeditor\ServiceProvider::class,

Bu tanımlaları doğru yaptıktan sonra küçük bir ayarlama komutumuz var bunuda ekledikten sonra işlemlerimiz neredeyse bitmiş oluyor. Aşağıdaki komutu projemizin komut satırından çalıştıralım.

php artisan vendor:publish --tag=ckeditor

Bu işlemlerden sonra artık CKEditör'ümüzü kullanmaya başlayabiliriz. Genel olarak neler yaptığımızı açıklığa kavuşturursak indirdiğim projemizi kütüphanelerimize dahil ettik. Bu işlemden sonra yeni eklediğimiz kütüphaneyi projemize sınıf olarak tanıttık. Daha sonra komut ekranımızdan CKEditör'ümüzü publish ettik.

Bundan sonra yapmamız gereken tek şey CKEditör'ü kullancağımız sayfalara yukarıda yaptığımız gibi dosyaları dahil etmek ve editörü bir form elamanına bağlamaktır.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CKEditor</title>
		<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
        <script>
            CKEDITOR.replace( 'ck' );
        </script>
	</head>
	<body>
		<textarea name="ck"></textarea>
	</body>
</html>

İçeriğimiz burada son buluyor aklınıza takılan ve yapamadığınız kısımları yorum bölümünden sorabilirsiniz. Bir sonraki yazımda CKEditör içerisinde kod bloklarını nasıl oluşturacağımızı ve düzenleyeceğimizi anlatacağım. Sağlıcakla kalın.