2013年3月26日 星期二

ckeditor 4.1 範例 

<!DOCTYPE html>
<html>
<head>
<title> 路上線上預約系統-編輯借用路邊及垃圾使用規則</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="ckeditor/contents.css">
</head>


<form action='comm.php?method=up_rule' method='post'>
<textarea class="ckeditor" cols="60" id="editor1" name="editor1" rows="10">
<?php echo $data['rule']; ?>
</textarea>
<input type='hidden' name='op' value='edit'>
<input type='submit' value='更新規則'>
</form>
<input type="button" onclick="doClose()" value="關閉此頁面"/>




</body>
</html>
補充：HTML5 起始1

用到上傳圖片功能的 config.js

CKEDITOR.editorConfig = function( config ) {
 // Define changes to default configuration here. For example:
 // config.language = 'fr';
  config.uiColor = '#AADC6E';
  
 config.toolbar = [
    ['Bold','Italic','Underline','Strike','-'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

    ['TextColor','BGColor','Maximize','ShowBlock'], ['Link','Unlink','Anchor','Table','HorizontalRule'],'/',['Styles','Format','Font','FontSize','Source','Image']
    ];
 config.filebrowserImageUploadUrl = '../../script/ckeditor4.1/upload1.php?type=img';

};
upload1.php(上傳圖片用的程式)
<?php

$config=array();

$config['type']=array("flash","img"); //上傳允許type值

$config['img']=array("jpg","bmp","gif","png"); //img允許后綴
$config['flash']=array("flv","swf"); //flash允許后綴

$config['flash_size']=200; //上傳flash大小上限 單位：KB
$config['img_size']=2000; //上傳img大小上限 單位：KB 

//$config['message']="上傳成功"; //上傳成功后顯示的消息，若為空則不顯示

$config['name']=mktime(); //上傳后的文件命名規則 這里以unix時間戳來命名




$config['img_dir']="uploadtpd/img"; //上傳img文件地址
$config['site_url']="http://XXXXX/coledXX/tpd/"; //網站的網址 這與圖片上傳后的地址有關 最后不加"/" 可留空
//在上傳圖片後會在URL會用到，並寫到資料庫裡去。
//文件上傳
uploadfile();

function uploadfile()
{
global $config;
//判斷是否是非法調用
if(empty($_GET['CKEditorFuncNum']))
   mkhtml(1,"","錯誤的功能調用請求4");
$fn=$_GET['CKEditorFuncNum'];
if(!in_array($_GET['type'],$config['type']))
   mkhtml(1,"","錯誤的文件調用請求3");
$type=$_GET['type'];
if(is_uploaded_file($_FILES['upload']['tmp_name']))
{
   //判斷上傳文件是否允許
   $filearr=pathinfo($_FILES['upload']['name']);
   $filetype=$filearr["extension"];
   if(!in_array($filetype,$config[$type]))
    mkhtml($fn,"","錯誤的文件類型！2");
   //判斷文件大小是否符合要求
   if($_FILES['upload']['size']>$config[$type."_size"]*1024)
    mkhtml($fn,"","上傳的文件不能超過".$config[$type."_size"]."KB！");
   //$filearr=explode(".",$_FILES['upload']['name']);
   //$filetype=$filearr[count($filearr)-1];
   //$file_abso=$config[$type."_dir"]."/".$config['name'].".".$filetype;
    $file_abso=$config[$type."_dir"]."/".$config['name'].".".$filetype;  //資料夾和檔案路徑
 //echo $file_abso;
 //exit;
  // $file_host=$_SERVER['DOCUMENT_ROOT'].$file_abso;  //絕對路徑
   $file_host="../../../".$config[$type."_dir"]."/".$config['name'].".".$filetype;  //相對路徑
   // echo $file_host;
 //exit;
  
 
   if(move_uploaded_file($_FILES['upload']['tmp_name'],$file_host))
   {
    mkhtml($fn,$config['site_url'].$file_abso,$config['message']);
   }
   else
   {
    mkhtml($fn,"","文件上傳失敗，請檢查上傳目錄設置和目錄讀寫權限");
   }
}
}
//輸出js調用
function mkhtml($fn,$fileurl,$message)
{
$str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\', \''.$message.'\');</script>';
exit($str);
}
?>

補充說明：陣列,檔案操作
QA
抓BUG抓不出來，面版一直是最簡單的。
最後把tpd/tpdadmin/script/4.1丟上 社x院即成。
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)