CKEditor eklentisi, web formundaki giriş alanına WYSIWYG düzenleyicisi eklemenin en kolay yolunu sunar. Genellikle, WYSIWYG düzenleyicisi HTML içeriğini göndermek için metin alanını değiştirmek için kullanılır. CKEditor eklentisi ile kolayca WYSIWYG editörünü textarea’ya ekleyebilirsiniz. CKEditor eklentisi kullanıcının textarea alanına HTML içeriği eklemesine ve sunucu tarafına biçimlendirilmiş metin içeriği göndermesine izin verir.
CKEditor’un Resim eklentisi, görüntüyü düzenleyiciye eklemenize yardımcı olur. Bu durumda, düzenleyici içeriğine eklemek için görüntünün URL’sini belirtmeniz gerekir. Resim eklentisinin resim yüklemesine ve CKEditor’a eklemesine izin verilmez. Görüntüyü sunucuya yüklemek ve bu görüntüyü düzenleyici içeriğine eklemek istiyorsanız, özel görüntü yükleme işlevinin CKEditor’e entegre edilmesi gerekir. Bu yazıda, CKEditor’de nasıl resim yükleneceğini ve yüklenen resmi PHP kullanarak editör içeriğine nasıl ekleyeceğinizi göstereceğiz.
Başlamadan önce, Standart Paket CKEditor eklentisini indirin. İndirilen CKEditor eklenti arşivini çıkarın ve kök dizine yerleştirin. Unutmayın: CKEditor’u ayrı olarak indirmenize gerek yoktur, gerekli tüm dosyalar kaynak kodumuza dahildir.
CKEditor’u Textarea’ya ekle
1. CKEditor ile değiştirmek istediğiniz bir textarea öğesi oluşturun.
|
1 |
<textarea name="editor" id="editor" cols="30" rows="10"></textarea> |
2. Ardından ckeditor.js dosyasını dahil edin.
|
1 |
<script src="ckeditor/ckeditor.js"></script> |
3. CKEditor eklentisini başlatmak ve textarea öğesini WYSIWYG düzenleyicisiyle değiştirmek için CKEDITOR.replace() metodu kullanın.
|
1 2 3 |
<script> CKEDITOR.replace('editor'); </script> |
Kodları ekledikten sonra HTML belgesinin son halinde şuna benzer bir görüntü olması gerekiyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> <script src="ckeditor/ckeditor.js"></script> </head> <body> <textarea name="editor" id="editor" cols="30" rows="10"></textarea> <script> CKEDITOR.replace('editor'); </script> </body> </html> |
Editörün de ekran görüntüsü şuna benzemesi gerekiyor.
Resim Yükleme URL’sini Ayarlama
CKEditor’da yükleme iletişim kutusu eklemek için CKEDITOR.replace() yöntemine bazı ek yapılandırma seçenekleri belirtin.
Resim yükleme komut dosyasının (ck_upload.php) URL’sini belirtmek için filebrowserUploadUrl config özelliğini kullanın.
FormbrowserUploadMethod yapılandırma seçeneğini oluşturacak şekilde ayarlayın.
|
1 2 3 4 5 6 |
<script> CKEDITOR.replace('editor', { filebrowserUploadUrl: 'ckeditor/ck_upload.php', filebrowserUploadMethod: 'form' }); </script> |
Yukarıdaki yapılandırma, Resim Özellikleri iletişim kutusuna bir Yükleme sekmesi ekleyecektir. Kullanıcının bir dosya seçmesine ve yükleme için sunucu tarafı komut dosyasına göndermesine izin verir.
Resmi Sunucuya Yükle (ckeditor / ck_upload.php)
ck_upload.php dosyası PHP kullanarak dosya yükleme işlemini gerçekleştirir.
- Yükleme dizinini ve izin verilen resim özelliklerini belirtin.
- Görüntü türünü ve boyutunu doğrulayın.
- PHP’de move_uploaded_file() işlevini kullanarak görüntüyü sunucuya yükleyin.
- Görüntüyü HTML olarak işleyin ve CKEditor’a dönün.
- Resim yükleme başarılı olursa,
- Yükleme durumu bir uyarı iletişim kutusunda gösterilir.
- Yüklenen resmi düzenleyiciye ekle.
ckeditor içine ck_upload.php dosyasını oluşturup aşağıdaki kodları ekleyin.
Unutmadan ../upload/ dizini dosyaların kaydedileceği dizindir. formun yüklü olduğu dizine upload adında bir klasör oluşturun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<?php // Define file upload path $upload_dir = array( 'img'=> '../upload/', ); // Allowed image properties $imgset = array( 'maxsize' => 2000, 'maxwidth' => 1024, 'maxheight' => 800, 'minwidth' => 10, 'minheight' => 10, 'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), ); // If 0, will OVERWRITE the existing file define('RENAME_F', 1); /** * Set filename * If the file exists, and RENAME_F is 1, set "img_name_1" * * $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename */ function setFName($p, $fn, $ex, $i){ if(RENAME_F ==1 && file_exists($p .$fn .$ex)){ return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1)); }else{ return $fn .$ex; } } $re = ''; if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) { define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name']))); // Get filename without extension $sepext = explode('.', strtolower($_FILES['upload']['name'])); $type = end($sepext); /** gets extension **/ // Upload directory $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio']; $upload_dir = trim($upload_dir, '/') .'/'; // Validate file type if(in_array($type, $imgset['type'])){ // Image width and height list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); if(isset($width) && isset($height)) { if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){ $re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight']; } if($width < $imgset['minwidth'] || $height < $imgset['minheight']){ $re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; } if($_FILES['upload']['size'] > $imgset['maxsize']*1000){ $re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.'; } } }else{ $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.'; } // File upload path $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0); $uploadpath = $upload_dir . $f_name; // If no errors, upload the image, else, output the errors if($re == ''){ if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { $CKEditorFuncNum = $_GET['CKEditorFuncNum']; $url = 'ckeditor/'. $upload_dir . $f_name; $msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB'; $re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>'; }else{ $re = '<script>alert("Unable to upload the file")</script>'; } }else{ $re = '<script>alert("'. $re .'")</script>'; } } // Render HTML output @header('Content-type: text/html; charset=utf-8'); echo $re; |
Örnek komut dosyamız, PHP kullanarak CKEditor’a özel resim yükleme işlevi eklemenize yardımcı olur. Görüntüleri sunucuya yüklemenizi ve otomatik olarak CKEditor’a eklemenizi sağlar. Sunucu tarafı görüntü yükleme işlevini herhangi bir eklenti kullanmadan CKEditor’a kolayca entegre edebilirsiniz.
Hocam çok teşekür ederim gerçekten çok işime yaradı
Rica ederim.
Bunu blogger siteme nasıl eklerim
Bu tertemiz , işe yarar paylaşım için teşekkürler . Bence Google’da konu hakkındaki ilk link bu olmalı .
Düşünceniz için teşekkür ederim. Paylaşımlar arttıkça sanırım ilk sıralara doğru yükselecektir.
Emeğine sağlık. Resmî sitesinin yanında Türkçe kaynak olması çok faydalı oluyor.