在 CakePHP 2.+ 中添加 TinyMCE 图片浏览器
这只是 添加 TinyMCE 图片浏览器 CakePHP 方式 的更新,适用于 Cake 的 2.+ 版本。没什么重大的变化,只是遵循 API 的变更,使其平滑地运作。以下是更新后的模型代码: ` <?php App::uses(‘Folder’,’Utility’); App::uses(‘File’,’Utility’);
classImageuploadextendsAppModel{
var$name=’Imageupload’;
var$validate=array( ‘imageupload’=>array( ‘rule’=>array( ‘validFile’, array( ‘required’=>true, ‘extensions’=>array( ‘jpg’, ‘jpeg’, ‘gif’, ‘png’ ) ) ) ) );
var$useTable=false;
functionreadFolder($folderName=null){ $folder=newFolder($folderName); $images=$folder->read( true, array( ‘.’, ‘..’, ‘Thumbs.db’ ), true ); $images=$images[1];//Weareonlyinterestedinfiles
//Getmoreinfosabouttheimages $retVal=array(); foreach($imagesas$the_image) { $the_image=newFile($the_image); $retVal[]=array_merge( $the_image->info(), array( ‘size’=>$the_image->size(), ‘last_changed’=>$the_image->lastChange() ) ); }
return$retVal; }
functionupload($data=null){ $this->set($data);
if(empty($this->data)){ returnfalse; }
//Validation if(!$this->validates()){ returnfalse; } //print_r($this->data); //Movethefiletotheuploadsfolder if(!move_uploaded_file($this->data[‘Imageupload’][‘Image’][‘image’][‘t mp_name’],WWW_ROOT.DS.’uploads’.DS.$this->data[‘Imageupload’][‘Image’] [‘image’][‘name’])){ returnfalse; }
returntrue; }
functionvalidFile($check,$settings){ $_default=array( ‘required’=>false, ‘extensions’=>array( ‘jpg’, ‘jpeg’, ‘gif’, ‘png’ ) );
$_settings=array_merge( $_default, ife( is_array($settings), $settings, array() ) );
//RemovefirstlevelofArray $_check=array_shift($check);
if($_settings[‘required’]==false&&$_check[‘size’]==0){ returntrue; }
//Nofileuploaded. if($_settings[‘required’]&&$_check[‘size’]==0){ returnfalse; }
//CheckforBasicPHPfileerrors. if($_check[‘error’]!==0){ returnfalse; }
//UsePHPsownfilevalidationmethod. if(is_uploaded_file($_check[‘tmp_name’])==false){ returnfalse; }
//Validextension returnValidation::extension( $_check, $_settings[‘extensions’] ); } } ?> ` 你会注意到一些小的变化,主要是添加了类声明之前的 App::uses 功能,并且我还将其重命名为 Imageuploads,因为 Images 重定向到 webroot/images 文件夹。
以下是更新后的控制器代码
<?php
classImageuploadsControllerextendsAppController{
var$name='Imageuploads';
var$uses=array('Imageupload');
var$helpers=array(
'Html',
'Form',
'Js',
'Number'//Usedtoshowreadablefilesizes
);
functionadmin_index(){
$this->layout='admin';
$this->set(
'images',
$this->Imageupload->readFolder(WWW_ROOT.DS.'uploads')
);
}
functionadmin_upload(){
//Uploadanimage
if(!empty($this->data)){
//Validateandmovethefile
if($this->Imageupload->upload($this->data)){
$this->Session->setFlash('Theimagewassuccessfullyuploaded.');
}else{
$this->Session->setFlash('Therewasanerrorwiththeuploadedfile.');
}
$this->redirect(
array(
'action'=>'index'
)
);
}else{
$this->redirect(
array(
'action'=>'index'
)
);
}
}
}
?>
<p>Iaddedtheadmin_partbecausethisfunctionalityisbehindanauthsystemandI
wantedconsistentURI'sbutthatisuptotoyou.</p>
<p>Hereisthetinymce.ctpcode</p>
<?phpecho$this->Html->script("tiny_mce/tiny_mce.js");?>
<?php
echo$this->Html->scriptBlock(
"functionfileBrowserCallBack(field_name,url,type,win){
browserField=field_name;
browserWin=win;
window.open('".Helper::url(array('controller'=>'imageuploads'))."','br
owserWindow','modal,width=600,height=400,scrollbars=yes');
}"
);
?>
<?php
echo$this->Html->scriptBlock(
"tinyMCE.init({
mode:'textareas',
theme:'advanced',
theme_advanced_buttons1:'forecolor,bold,italic,underline,|,justifyleft
,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,undo,redo,
|,link,unlink,|,image,emotions,code',
theme_advanced_buttons2:'',
theme_advanced_buttons3:'',
theme_advanced_toolbar_location:'top',
theme_advanced_toolbar_align:'left',
theme_advanced_path_location:'bottom',
extended_valid_elements:'a[name|href|target|title|onclick],img[class|s
rc|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onm
ouseout|name],hr[class|width|size|noshade],font[face|size|color|style]
,span[class|align|style]',
file_browser_callback:'fileBrowserCallBack',
width:'620',
height:'480',
relative_urls:false
});"
);
?>
最后是位于 View/imageuploads/ 中的索引(在我的情况下是 admin_index)视图
<?php
echo$this->Html->scriptBlock(
"functionselectURL(url){
if(url=='')returnfalse;
url='".Helper::url('/uploads/')."'+url;
field=window.top.opener.browserWin.document.forms[0].elements[window.t
op.opener.browserField];
field.value=url;
if(field.onchange!=null)field.onchange();
window.top.close();
window.top.opener.browserWin.focus();
}"
);
?>
<?php
echo$this->Form->create(
null,
array(
'type'=>'file',
'url'=>array(
'action'=>'upload'
)
)
);
echo$this->Form->label(
'Image.image',
'Uploadimage'
);
echo$this->Form->file(
'Image.image'
);
echo$this->Form->end('Upload');
?>
<?phpif(isset($images[0])){
$tableCells=array();
foreach($imagesAs$the_image){
$tableCells[]=array(
$this->Html->link(
$the_image['basename'],
'#',
array(
'onclick'=>'selectURL("'.$the_image['basename'].'");'
)
),
$this->Number->toReadableSize($the_image['size']),
date('m/d/YH:i',$the_image['last_changed'])
);
}
echo$this->Html->tag(
'table',
$this->Html->tableHeaders(
array(
'Filename',
'Size',
'Datecreated'
)
).$this->Html->tableCells(
$tableCells
)
);
}?>
你会注意到一些小的差异,比如 $this->Html->scriptBlock
最后,确保将 Element(‘tinymce’); ?> 添加到你想要添加此功能的表单中。干杯!