在 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’); ?> 添加到你想要添加此功能的表单中。干杯!