husonet | Tarih: 25.09.2013
CKEditor kurulumu upload .php, browse.php
Web sitesi yönetim araçlarının en önemli aracı CKEditör dür. Peki nasıl kurulur CKEditör?
CKEditor'un resmi web sitesi http://www.ckeditor.com/ dir. Demo sekmesinden hemen test edebilirsiniz, indirmek için ise http://ckeditor.com/download adresinden tıklayarak indirebilirsiniz.
Javascript İle Kullanımı
[code javascript]
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
[/code]
[code javascript]
<textarea name="edCkeditor1" id="edCkeditor">bla bla</textarea>
[/code]
[code javascript]
<script type="text/javascript">
CKEDITOR.replace( 'edCkeditor1' );
</script>
[/code]
Ekleyeceğimiz Sayfa Kod İçeriği
[code php]<textarea cols="70" name="edIcerik" id="edIcerik" rows="15"><?=$edIcerik?>
<script src="<?php echo base_url()?>js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
CKEDITOR.replace('edIcerik',{
filebrowserBrowseUrl : './browser/browse.php?type=Images&dir=' + encodeURIComponent('img'),
filebrowserUploadUrl : './browser/upload.php'}
);
}
</script>
[/code]
browser/browse.php
[code php]
<?php
header("Content-Type: text/html; charset=utf-8
");
header("Cache-Control: no-cache, must-revalidate
");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
// e-z params
$dim = 150; /* image displays proportionally within this square dimension ) */
$cols = 4; /* thumbnails per row */
$thumIndicator = ''; /* e.g., *image123_th.jpg*) -> if not using thumbNails then use empty string */
?>
<!DOCTYPE html>
<html>
<head>
<title>browse file</title>
<meta charset="utf-8">
<style>
html,
body {padding:0; margin:0; background:black; }
table {width:100%; border-spacing:15px; }
td {text-align:center; padding:5px; background:#181818; }
img {border:5px solid #303030; padding:0; verticle-align: middle;}
img:hover { border-color:blue; cursor:pointer; }
</style>
</head>
<body>
<table>
<?php
$dir_pic = $_GET['dir'];
$dir = '../' . $_GET['dir'];
$dir = rtrim($dir, '/'); // the script will add the ending slash when appropriate
#$dir = '/home/www/boranyazilim.com/img/';
$files = scandir($dir);
$images = array();
foreach($files as $file){
// filter for thumbNail image files (use an empty string for $thumIndicator if not using thumbnails )
if( !preg_match('/'. $thumIndicator .'\.(jpg|jpeg|png|gif)$/i', $file) )
continue;
$thumbSrc = $dir . '/' . $file;
$fileBaseName = str_replace('_th.','.',$file);
$image_info = getimagesize($thumbSrc);
$_w = $image_info[0];
$_h = $image_info[1];
if( $_w > $_h ) { // $a is the longer side and $b is the shorter side
$a = $_w;
$b = $_h;
} else {
$a = $_h;
$b = $_w;
}
$pct = $b / $a; // the shorter sides relationship to the longer side
if( $a > $dim )
$a = $dim; // limit the longer side to the dimension specified
$b = (int)($a * $pct); // calculate the shorter side
$width = $_w > $_h ? $a : $b;
$height = $_w > $_h ? $b : $a;
// produce an image tag
$str = sprintf('<img src="%s" width="%d" height="%d" title="%s" alt="">',
$thumbSrc,
$width,
$height,
$fileBaseName
);
// save image tags in an array
$images[] = str_replace("'", "\'", $str); // an unescaped apostrophe would break js
}
$numRows = floor( count($images) / $cols );
if( count($images) % $cols != 0 )
$numRows++;
// produce the correct number of table rows with empty cells
for($i=0; $i<$numRows; $i++)
echo " <tr>" . implode('', array_fill(0, $cols, '<td></td>')) . "</tr>
";
?>
</table>
<script>
// make a js array from the php array
images = [
<?php
foreach( $images as $v)
echo sprintf(" '%s',
", $v);
?>];
tbl = document.getElementsByTagName('table')[0];
td = tbl.getElementsByTagName('td');
// fill the empty table cells with the img tags
for(var i=0; i < images.length; i++)
td[i].innerHTML = images[i];
// event handler to place clicked image into CKeditor
tbl.onclick =
function(e) {
var tgt = e.target || event.srcElement,
url;
if( tgt.nodeName != 'IMG' )
return;
url = '<?php echo $dir_pic;?>' + '/' + tgt.title;
this.onclick = null;
// $_GET['CKEditorFuncNum'] was supplied by CKeditor
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, url);
window.close();
}
</script>
</body>
</html>
[/code]
browser/upload.php
[code php]
<?
$url = '../img/'.time()."_".$_FILES['upload']['name'];
//extensive suitability check before doing anything with the file...
if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
{
$message = "No file uploaded.";
}
else if ($_FILES['upload']["size"] == 0)
{
$message = "The file is of zero length.";
}
else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
{
$message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
}
else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
{
$message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
}
else {
$message = "";
$move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);
if(!$move)
{
$message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
}
$url = str_replace('../','',$url);
}
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
[/code]
Javascript İle Kullanımı
İlk adım ckeditor.js dosyasını head tagları arasına ekleyelim.
[code javascript]
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
[/code]
Sonraki adımda form içinde kullanacağımız yere aşağıdaki kodu yapıştırıyoruz.
[code javascript]
<textarea name="edCkeditor1" id="edCkeditor">bla bla</textarea>
[/code]
Son adım olarak form içinde belirlediğimiz kısmı zengin metin editörüne çevirmek için aşağıdaki kodu yazıyoruz.
[code javascript]
<script type="text/javascript">
CKEDITOR.replace( 'edCkeditor1' );
</script>
[/code]
Detaylı kullanım örneği
Ekleyeceğimiz Sayfa Kod İçeriği
[code php]<textarea cols="70" name="edIcerik" id="edIcerik" rows="15"><?=$edIcerik?>
<script src="<?php echo base_url()?>js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
CKEDITOR.replace('edIcerik',{
filebrowserBrowseUrl : './browser/browse.php?type=Images&dir=' + encodeURIComponent('img'),
filebrowserUploadUrl : './browser/upload.php'}
);
}
</script>
[/code]
browser/browse.php
[code php]
<?php
header("Content-Type: text/html; charset=utf-8
");
header("Cache-Control: no-cache, must-revalidate
");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
// e-z params
$dim = 150; /* image displays proportionally within this square dimension ) */
$cols = 4; /* thumbnails per row */
$thumIndicator = ''; /* e.g., *image123_th.jpg*) -> if not using thumbNails then use empty string */
?>
<!DOCTYPE html>
<html>
<head>
<title>browse file</title>
<meta charset="utf-8">
<style>
html,
body {padding:0; margin:0; background:black; }
table {width:100%; border-spacing:15px; }
td {text-align:center; padding:5px; background:#181818; }
img {border:5px solid #303030; padding:0; verticle-align: middle;}
img:hover { border-color:blue; cursor:pointer; }
</style>
</head>
<body>
<table>
<?php
$dir_pic = $_GET['dir'];
$dir = '../' . $_GET['dir'];
$dir = rtrim($dir, '/'); // the script will add the ending slash when appropriate
#$dir = '/home/www/boranyazilim.com/img/';
$files = scandir($dir);
$images = array();
foreach($files as $file){
// filter for thumbNail image files (use an empty string for $thumIndicator if not using thumbnails )
if( !preg_match('/'. $thumIndicator .'\.(jpg|jpeg|png|gif)$/i', $file) )
continue;
$thumbSrc = $dir . '/' . $file;
$fileBaseName = str_replace('_th.','.',$file);
$image_info = getimagesize($thumbSrc);
$_w = $image_info[0];
$_h = $image_info[1];
if( $_w > $_h ) { // $a is the longer side and $b is the shorter side
$a = $_w;
$b = $_h;
} else {
$a = $_h;
$b = $_w;
}
$pct = $b / $a; // the shorter sides relationship to the longer side
if( $a > $dim )
$a = $dim; // limit the longer side to the dimension specified
$b = (int)($a * $pct); // calculate the shorter side
$width = $_w > $_h ? $a : $b;
$height = $_w > $_h ? $b : $a;
// produce an image tag
$str = sprintf('<img src="%s" width="%d" height="%d" title="%s" alt="">',
$thumbSrc,
$width,
$height,
$fileBaseName
);
// save image tags in an array
$images[] = str_replace("'", "\'", $str); // an unescaped apostrophe would break js
}
$numRows = floor( count($images) / $cols );
if( count($images) % $cols != 0 )
$numRows++;
// produce the correct number of table rows with empty cells
for($i=0; $i<$numRows; $i++)
echo " <tr>" . implode('', array_fill(0, $cols, '<td></td>')) . "</tr>
";
?>
</table>
<script>
// make a js array from the php array
images = [
<?php
foreach( $images as $v)
echo sprintf(" '%s',
", $v);
?>];
tbl = document.getElementsByTagName('table')[0];
td = tbl.getElementsByTagName('td');
// fill the empty table cells with the img tags
for(var i=0; i < images.length; i++)
td[i].innerHTML = images[i];
// event handler to place clicked image into CKeditor
tbl.onclick =
function(e) {
var tgt = e.target || event.srcElement,
url;
if( tgt.nodeName != 'IMG' )
return;
url = '<?php echo $dir_pic;?>' + '/' + tgt.title;
this.onclick = null;
// $_GET['CKEditorFuncNum'] was supplied by CKeditor
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, url);
window.close();
}
</script>
</body>
</html>
[/code]
browser/upload.php
[code php]
<?
$url = '../img/'.time()."_".$_FILES['upload']['name'];
//extensive suitability check before doing anything with the file...
if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
{
$message = "No file uploaded.";
}
else if ($_FILES['upload']["size"] == 0)
{
$message = "The file is of zero length.";
}
else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
{
$message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
}
else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
{
$message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
}
else {
$message = "";
$move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);
if(!$move)
{
$message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
}
$url = str_replace('../','',$url);
}
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
[/code]