Ckeditor Kullanımı ve Kurulumu & Html Zengin Metin Editörü

Bu yazıda web sitelerinde web metin editörü, html metin editörü gibi adlarla anılan CKEditor nedir, neler yapılabilir ve CKEditor kullanımı ve kurulumu, CKEditor istenilen satıra veri ekleme gibi konulardan ayrıntılı olarak bahsedeceğim.

CKEditor Nedir, Ne İşe Yarar : Web platformları üzerinde ayrıntılı özelliklere sahip yazı, resim, video, animasyon, tablo, şablon gibi site içeriğini düzenlemek ve kaydetmek için kullanılabilecek zengin metin editörü aracıdır. Microsoft Word proğramının web sitelerindeki versiyonu diyebiliriz.

Web siteleri üzerinde kullanılabilecek CKEditor gibi birçok alternatif html editör eklentileri bulunmakta. Ancak bu tip gelişmiş yazı editörleri içerisinde, açık kaynak olması, eklentileri, performansı ve tasarımlarıyla gelişmiş özellikler sunması, çoğu özelliğinin ücretsiz kullanılabilmesi, basit kurulumu ve kullanımı gibi unsurlardan dolayı piyasada bulunan en iyi html yazı editörü olabilir. CKEditor, wordpress ve joomla gibi içerik yönetim sistemleri üzerine dahil edilebildiği gibi özel olarak geliştirilen website uygulamarı üzerinde de kullanılabilmekte.

Biz ise kendi web uygulamamız üzerinde kullanacağız. CKEditor ile oluşturduğumuz içeriği hem PHP’de normal olarak post etme yöntemiyle hem de jquery ajax post kullanımı ile verileri post ederek veritabanına kaydetme ve güncelleme işlemlerini gerçekleştireceğiz.

İlk olarak CKEditor nasıl kurulur konusuna giriş yapalım.

Ckeditor Kurulumu

Ckeditor kurulumu için ilk olarak CKEditor indirme sayfasına giriş yapalım. Bu sayfada barındırdığı özellikler bakımından basit, standart ve full olarak 3 çeşit paket indirilebilir halde bulunmakta. Ayrıca CKEditor’u kendimiz ayarlayabileceğimiz 4. seçenek olan CKEditor Online Builder bulunmakta.

CKEditor Online Builder ile basit, standart ve full paketlerinden birini seçebiliyoruz, içerisinde kullanabileceğimiz bir sürü işe yarar eklenti ekleyebiliyoruz, CKEditor tema değiştirme yapabiliyoruz ve dil ekleyebiliyoruz. Bu sayfa üzerinden kendimize uygun CKEditor düzenleme ve ayarlama işlemlerini uygulayıp hazırlanan dosyayı indiriyoruz.

CKEditor Nasıl Entegre Edilir ve Nasıl Eklenir?

HTML yada PHP uzantılı dosya oluşturup içerisine aşağıdaki kodları ekleyerek CKEditor’u kuruyoruz ve çalıştırıyoruz. Script etiketine CKEditor uygulamasının yolunu tanıtarak uygulamayı projeye dahil ediyoruz ve </span> etiketine yazdığımız class ve id özellikleri sayesinde de textarea etiketine CKEditor’u yerleştirmiş oluyoruz. Aynı sayfada birden fazla CKEditor kullanmak istiyorsak textarea etiketini kopyalayabiliriz. <strong>CKEditor ekleme</strong> işlemi bu kadar basit.</p> <pre class="wp-block-code"><code><script src="https://muhammedyaman.com/ckeditor/ckeditor.js"></script> <textarea class="ckeditor" id="ckeditor1">

Class ismi ckeditor olmalı, değiştirilmemeli. İd özelliği değiştirilebilir ama boş bırakılmamalı.

CKEditor Toolbar Ayarları

CKEditor araçlar kısmında bazılarını gösterip, bazılarını göstermek istemeyebiliriz. Sadeleştirmek isteyebiliriz. Veya bazı ayarlamalar yapmak isteyebiliriz. CKEditor config.js ayarı neticesinde bu istediğimizi gerçekleştirebiliriz.

Ckeditor klasörü > config.js dosyasını açalım ve içerisine aşağıdaki kodları ekleyelim.

CKEDITOR.editorConfig = function( config ) {
	config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		'/',
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] }
	];
};

Bu CKEditor kodları sayesinde CKEditor üzerinde istediğimiz araçları göstermiş oluyoruz. Göstermek istemediğimiz araçları siliyoruz. Eğer değişiklikleri göremiyorsanız başka bir tarayıcıdan bakın yada tarayıcınızın önbelleğini silin ve tekrar deneyin.

Türkçe karakter sorunu, etiket silme gibi sorunların çözümü ve bazı ek ayarlamaları CKEditor Ayarları & Sorunları ve Çözümleri adlı yazıma girerek bulabilirsiniz.

Ckeditor Kullanımı & Ckeditor Nasıl Kullanılır?

CKEditor ekleme, kurulumu ve kullanıma hazır hale getirilmesi işlemlerini tamamladık. Peki ckeditor nasıl kullanılır? PHP tarafında veya javascript tarafında CKEditor içerisindeki veri nasıl elde edilir?

Şimdi PHP ile CKEditor kullanımı, normal PHP post işlemi ile CKEditor veri alma ve jquery ile CKEditor değer alma, ajax ile post etme gibi kullanım örneklerini görüp, elde edilen bu veriyi kaydetme ve güncelleme işlemlerini gerçekleştireceğiz. Nasıl yapılacağını ayrı ayrı gösterip daha sonra toplu olarak açıklamalarıyla birlikte kodlarını ekleyeceğim. Ayrıca makalenin en altından CKEditor çalışma örneğini indirip kendi bilgisayarınızda çalıştırabilirsiniz.

PHP ile CKEditor Kullanımı ve PHP Post İşlemi

Textarea etiketine CKEditor eklenmesi, değerin elde edilmesi yöntemini değiştirmiyor. Klasik PHP form uygulaması üzerinden post etme yöntemiyle veriyi elde edebiliriz.

 
	textarea><br><br>
	<input type="submit />
</form></code></pre>
<pre class="wp-block-code"><code>if ($_POST){
	echo $_POST['icerik_detay'];
}</code></pre>
<h3>CKEditor Jquery ile Değer alma, Ckeditor Ajax ile Post Etme </h3>
<p>Javascript ve jquery ile CKEditor değerini okuma işlemi, normal textarea etiketinden veri okuma işlemiyle aynı değil. Aşağıdaki kod satırlarıyla CKEditor içerisinde javascript ile değer alma yöntemini uygulayıp, Jquery ajax ile CKEditor html veri gönderimi işlemini gerçekleştirebiliriz.</p>
<pre class="wp-block-code"><code>var icerik_detay = CKEDITOR.instances.editor1.getData(); //id si editor1 olan textarea etiketine eklenen CKEditor'ün değerini alıyoruz
$.post("islem.php",{icerik_detay:icerik_detay},function(result){ //islem.php dosyasına girilen değerleri post ediyoruz
	alert(result); //dönen değeri alert ile yazdırıyoruz
});</code></pre>
<p>Bir butonun tıklama olayı gibi bu satırların tetiklenebileceği bir kod yapısı oluşturulabilir ve <strong>Ckeditor ajax ile post etme</strong> işlemi yapılabilir.</p>
<h3>CKEditor Yazı Güncellemek ve Odaklanılan Bölgeye Veri Ekleme</h3>
<p>Bir uygulama yazmak istemiş olabiliriz ve o uygulamanın görevi de veriyi CKEditor içerisine eklemek. CKEditor yazı güncellemek için gerekebilecek 2 çeşit yöntemi de görelim.</p>
<pre class="wp-block-code"><code>CKEDITOR.instances.editor1.setData('deger'); //id si editor1 olan ckeditor eklenmiş textarea nın içerisine 'deger' verisini ekle</code></pre>
<p>Yukarıdaki kod ile CKEditor içeriği<br />
bu olsun diyoruz. Yani CKEditor içerisinde veri var ise siliyoruz ve<br />
yerine yeni bir veri ekliyoruz.
</p>
<p>CKEditor imleç pozisyonuna veri ekleme işlemini aşağıdaki kod satırlarıyla yapabiliriz.</p>
<pre class="wp-block-code"><code>var oEditor = CKEDITOR.instances.editor1; //id değeri editor1 olan ckeditor elde ediliyor
var eklenecek = '<b>'+prompt("Bir şey yazın.")+'</b>'; //eklenecek html içeriği
var yeniEleman = CKEDITOR.dom.element.createFromHtml(eklenecek, oEditor.document); //ckeditor için eklenecek veriye göre eleman oluşturuluyor
oEditor.insertElement(yeniEleman);//ckeditor e oluşturduğumuz elemanı ekliyoruz</code></pre>
<p>Editör kullanmadan textarea elemanı üzerinde bu işlemi yapmak istiyorsanız <strong>Textarea İmlecin Olduğu Konuma Veri Ekleme</strong> adlı yazıma göz atabilirsiniz.</p>
<p>Bu yazıda anlatacaklarım bu kadar. Ayrıca bu konuyla alakalı ufak bir uygulama hazırladım. Bu makale içerisinde anlatılan bütün konuları içeriyor, veriyi hem PHP ile hem de Javascript ile başka bir PHP dosyasına post ediyoruz ve veritabanına veri kaydetme ve yazı güncelleme işlemlerini gerçekleştirebiliyoruz. Aşağıda uygulama içerisindeki bütün kodlar mevcut.</p>
<h4>Veritabanı Görüntüsü</h4>
<p><img decoding="async" loading="lazy" width="796" height="98" src="https://insta.gen.tr/wp-content/uploads/2021/07/1627383982_15_Ckeditor-Kullanimi-ve-Kurulumu-Html-Zengin-Metin-Editoru.png" alt="CKEditor Kullanımı Veritabanı Örneği" class="wp-image-581"/></p>
<h4>index.php Dosya İçeriği</h4>
<pre class="wp-block-code"><code><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://muhammedyaman.com/ckeditor/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
	$(function(){
		/*$('input[type="submit"]').click(function(){
			var icerik_baslik = $('input[name="icerik_baslik"]').val();
			var icerik_id = $('input[name="icerik_id"]').val();
			var icerik_detay = CKEDITOR.instances.editor1.getData();
			if (icerik_baslik && icerik_detay){
				$.post("islem.php",{icerik_baslik: icerik_baslik,icerik_id:icerik_id,icerik_detay:icerik_detay},function(result){
					alert(result);
				});
			}
			return false;
		});*/
		$('button').click(function(){
			//ckeditor içerisinde odaklanılan imlecin bulunduğu bölgeye, veri ekleme
			var oEditor = CKEDITOR.instances.editor1; //id değeri editor1 olan ckeditor elde ediliyor
			var eklenecek = '<b>'+prompt("Bir şey yazın.")+'</b>'; //eklenecek html içeriği
			var yeniEleman = CKEDITOR.dom.element.createFromHtml(eklenecek, oEditor.document); //ckeditor için eklenecek veriye göre eleman oluşturuluyor
			oEditor.insertElement(yeniEleman);//ckeditor e oluşturduğumuz elemanı ekliyoruz 
			//--------------------------------
			return false;
		});
	});
</script>
<h1 style="text-align:center">CKEditor Ornek Uygulamaları</h1>
<?php 
	error_reporting(0);
	$host 	= 'localhost'; //host bilgisi
	$user 	= 'root'; //kullanıcı adı
	$pass 	= ''; //sifre
	$db		= 'ck_ornek'; //veritabanı ismi
	$baglan = mysqli_connect($host, $user, $pass, $db) or die (mysqli_Error());
?>
<h2>İçerik Listesi</h2>
<?php 
	$icerikler = mysqli_query($baglan,'SELECT * FROM icerikler');
	while($icerik = mysqli_fetch_assoc($icerikler)){
		echo ''.$icerik['icerik_baslik'].'<br>';
	}
?>
<br>
<?php 
	$icerik_id = $_GET['sayfa'];
	if ($icerik_id){
		$islem_tur = 'İçerik Düzenle';
		$icerik = mysqli_fetch_assoc(mysqli_query($baglan,'SELECT * FROM icerikler WHERE icerik_id = '.$icerik_id)); //id değerine göre içerik bilgilerini veritabanından getir
	}else{
		$islem_tur = 'İçerik Ekle';
	}
?>
<hr>
<form action="islem.php" method="POST">
	<h2><?php echo $islem_tur; ?></h2>
	<h3>İçerik Başlık</h3> 
	<input type="text" name="icerik_baslik" style="padding:10px; border:1px solid #b1b1b1; width:100%" value="<?php echo $icerik['icerik_baslik']; ?>"/><br>
	<h3>İçerik Detay</h3> 
	<button>İmlecin odaklandığı yere ekle</button><br><br>
	<textarea name="icerik_detay" class="ckeditor" id="editor1"><?php echo $icerik['icerik_detay']; ?>


	
	


İçerik Detayı Önizleme
';
		echo $icerik['icerik_detay'];
	}
?>

islem.php Dosyası İçeriği

CKEditor Eklentileri & CKEditor Plugin Ekleme & Ayarlar

CKEditor içerisinde kullanabileceğiniz bazı eklentileri de ayrı yazılarda bahsettim. Aşağıdaki linklere tıklayarak yazılara ulaşabilirsiniz.

1. CKEditor CodeSnippet Eklentisi, Kurulumu ve Kullanımı
2. CKEditor Code Mirror Eklentisi, Kurulumu ve Kullanımı
3. CKEditor Spoiler Eklentisi, Kurulumu ve Kullanımı

Anlatacaklarım bu kadar. Buradan CKEditorOrnek adlı dosyayı indirip kendi bilgisayarınızda çalıştırabilirsiniz.