when developing a large web interface site, there araise situation where we had to use certain text editors in our forms. generally when our project is something like blogs, we have to insert images from user gallery itself. but in tiny mice editor it doesn't have feautre for adding images from our customized gallery by default. there is lot of plugins available for doing this in tiny miceeditor,but it is costly. so we have to include it by externally. so here iam explaining of including an image inserter for tinymice editor in cakephp. first you downlad the tiny mice editor from their site and include in your app/webroot/js folder. then create a form like this:-
<a href="javascript:void(0)" id="imageButton" class="imageButton" onclick="return openGallery(this);">INSERT IMAGE</a>
<div class="col150">Content:- <span class="required">*</span></div>
<div class="col30 txtCenter">:</div></div>
<div class="rows"><textarea name="postcontent" tabindex="6" maxlength="90" id="postcontent">
</textarea></div>
please include the following js code under your form:-
<script type="text/javascript">
var urlRoot='<?php echo $urlRoot; ?>';
function openGallery(obj){// this is the function called by the insert image link
contentBox(obj);// sets the content box
showImages(1);
// calls the function show images
return false;
}
function contentBox(obj){
var id
=
obj.id;
var it
=
$('#'+id);
var pos
=
it.position();
if($("#editLayerBox")){
$("#editLayerBox").remove();
}
var div='';
var elim
=
'editLayerBox';
div='<div id="editLayerBox" class="editLayerBox"></div>';
$(document.body).append(div);
//$("#"+elim).css("position","fixed");
var left=Number(pos.left)-140;
var top
=
Number(pos.top)-500;
$("#"+elim).css("top", pos.top+'px');
$("#"+elim).css("left",left+'px');
$("#"+elim).html('Loading');
}
function showImages(start){// it calls an action written in the userreg controller called image gallery.this function will be explained later
$.post(urlRoot+'userreg/imagegallery/',{start:start},function(data){
$("#editLayerBox").html(data);
});
}
function insertImage(){// function to insert image to the tiny mce editor
var width
=
$('#imgWidth').val();
var height
=
$('#imgHeight').val();
var image
=
$('#imgSelected').val();
var path
=
$('#imgPath').val();
if(image==''){
alert("You did't select any picture !");
}else{
var html='<img src="'+path+''+image+'" width="'+width+'" height="'+height+'" class="innerImageFile" />';
tinyMCE.execCommand('mceInsertContent',false,html);
closeEditBox();
}
}
function fillSize(w,h,id,t){// setting the file sizesand image selected
$('#imgWidth').val(w);
$('#imgHeight').val(h);
$('#imgSelected').val(id);
}
function closeEditBox(){// closing the edit box
if($("#editLayerBox")){
$("#editLayerBox").remove();
}
return false;
}
</script>
Here you see that some classes are called in js function .don't forget to include those styles in css. because the image should be displayed in a popup box and it completely depends on tghe css you include. just add these lines to css:-
.editLayerBox{ width:680px; height:auto;background:#FFFFFF; position:absolute; left:0px; top:0px; text-align:center;}
.layerOuter{ height:auto; overflow:hidden; border:1px solid #999999; padding:5px; text-align:left;}
.layerOuter .topRow{ height:24px; line-height:24px ; border:1px solid #f0f0f0; border-top:0px; padding:2px;}
.layerOuter .topRow .close{ border:0px; width:20px; height:20px; background:url(../img/close.jpg) no-repeat; float:right; border:1px solid #f0f0f0;}
.layerOuter .contBox{ height:auto; overflow:hidden; margin:2px 0px; padding:5px; border:1px solid #f0f0f0;}
.editorHelper{ height:25px;padding:3px 0px; border:1px dotted #e0e0e0; background:#FFFFFF;}
.editorHelper .imageButton{ height:24px; line-height:24px; padding-left:30px; float:left; font-weight:500; background:url(../img/icon-gallery.jpg) no-repeat #FFFFFF; margin-left:10px; border:1px dotted #e0e0e0;}
.editorHelper .linkButton{ height:24px; line-height:24px; padding-left:30px; float:left; font-weight:500; background:url(../img/icon-links.jpg) no-repeat #FFFFFF; margin-left:10px;}
.editorHelper a{ color:#FF0000; font-weight:600; border:1px dotted #e0e0e0; padding:0px 10px
now it's time to talk about the action and view fo the image displaying. just include this code in your usercontroller and customize the path as you required. here is the imagegallery action in usercontroller:-
function imagegallery(){
$this->init();
$this->layout='layer';
$data
=
$this->data;
$page
=
$data['start'];
$this->set('userid',$user_id);
$urlRoot=Router::url('/',false);
$this->set('urlRoot',$urlRoot);
$limit
=
10;
$order
=
'Image.image_id ASC';
$cond
=
array('Album.user_id'=>$user_id);
$this->Image->belongsTo=array('Album'=>array('className'=>'Album','foreignKey'=>'album_id'));
$total
=
$this->Image->find('count',array('conditions'=>$cond));
$records
=
$this->Image->find('all',array('conditions'=>$cond,'order'=>$order,'page'=>$page,'limit'=>$limit));
$cnt
=
ceil($total/$limit);
$pages
=
$this->Pages->getPages($page,$cnt,$limit);
$next
=
$this->Pages->getNext($page,$cnt,$limit);
$prev
=
$this->Pages->getPrev($page,$cnt,$limit);
$first
=
$this->Pages->getFirst($page,$cnt,$limit);
$last
=
$this->Pages->getLast($page,$cnt,$limit);
$uploadDir
=WWW_APP_MAIN_ROOT.'/store/';
$uploadDir.='user-'.$user_id.'/gallery/';//here you have to set the path of file
$this->set('filepath',$uploadDir);
$uploadDir1
=$url.'/store/';
$uploadDir1.='user-'.$user_id.'/gallery/';
$this->set('filepath2',$uploadDir1);
$mediaBaseDir
=
Configure::read('Albumdir');
$uploadDir=$mediaBaseDir;
$this->set('pages',$pages);
$this->set('first',$first);
$this->set('last',$last);
$this->set('next',$next);
$this->set('prev',$prev);
$this->set('page',$page);
$this->set('limit',$limit);
$this->set('total',$total);
$this->set('records',$records);
$this->set('util',$this->Utility);
$this->set('rootUrl',$this->rootUrl);
$this->set('uploadDir',$uploadDir);
}
next is the view file . here include this code in your imagegallery.ctp
<?php
$rootUrl=Router::url('/',false);
$filepath1='http://'.$_SERVER['SERVER_NAME'].$filepath2;
?>
<div class="rows">
<ul class="imagesLayer">
<?php
for($i=0;$i<count($records);$i++){
$imageSize
=
getimagesize($filepath.$records[$i]['Image']['imagename']);
$w
=
$imageSize[0];
$h
=
$imageSize[1];
?>
<li>
<div class="row1">
<img src="<?php echo $urlRoot;?>thumb2/album/?uid=<?php echo $userid;?>&img=<?php echo $records[$i]['Image']['imagename'];?>&width=140&height=100" alt="THUMB" title="" />
</div>
<div class="row2">
<input type="radio" name="radImage" value="<?php echo $records[$i]['Image']['imagename'];?>" onclick="fillSize('<?php echo $w;?>','<?php echo $h;?>','<?php echo $records[$i]['Image']['imagename'];?>','<?php echo addslashes(htmlentities($records[$i]['Image']['imagename']));?>')" /> SELECT IMAGE
</div>
</li>
<?php
}
?>
</ul>
<?php
if($total>0){
?>
<div class="rows imgSelectionRow">
Width <input type="text" size="10" id="imgWidth" value="120" />
Height <input type="text" size="10" id="imgHeight" value="120" />
<input type="button" name="imgAdd" class="button" value="ADD IMAGE" onclick="insertImage();" />
<input type="hidden" name="imgSelected" id="imgSelected" value="" />
<input type="hidden" name="imgPath" id="imgPath" value="<?php echo $filepath1;?>" />
</div>
<ul class="pagination">
<li>
<a href="javascript:void();" onclick="return showImages('<?php echo $first;?>')">First</a>
<a href="javascript:void();" onclick="return showImages('<?php echo $prev;?>')">Prev</a>
<?php
for($i=0;$i<count($pages);$i++){
?>
<a href="javascript:void();" onclick="return showImages('<?php echo $pages[$i]?>')" <?php if($page==$pages[$i]){?> class="visited"<?php }?>><?php echo $pages[$i]?></a>
<?php
}
?>
<a href="javascript:void();" onclick="return showImages('<?php echo $next;?>')">Next</a>
<a href="javascript:void();" onclick="return showImages('<?php echo $last;?>')">Last</a>
</li>
<li>
Total : <?php echo $total;?> records
</li>
</ul>
<?php } else{
?>
<span class="required">Sorry no records found !</span>
<?php
}?>
</div>
Hope you suceed in it.................
