Gina Chao: 3月 2013

CKEditor 是一套所見即所得(WYSIWYG)HTML 編輯器，多數用在網站或部落格上，支援多種常用瀏覽器，提供的功能相當多且完整，但他並不包含圖片的上傳管理，通常在發表文章時總希望會有美美的圖片做為點綴，這時就可以搭配免費的KCFinder來做使用，接下來就告訴大家如何將CKEditor整合KCFinder。

Step1：先到CKEditor和KCFinder下載程式

CKEditor－http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.6.1/ckeditor_3.6.6.1.zip　下載CKEditor 3.6.6.1版
KCFinder－http://kcfinder.sunhater.com/download

Step2：各自解壓縮後分別名命為ckeditor及kcfinder，然後把kcfinder的整個資料夾放入ckeditor中
Step3：打開ckeditor資料夾中的config.js，將下面的內容整個覆蓋上去

CKEDITOR.editorConfig = function( config )
{
 config.filebrowserBrowseUrl = '/ckeditor/kcfinder/browse.php?type=files';
 config.filebrowserImageBrowseUrl = '/ckeditor/kcfinder/browse.php?type=images';
 config.filebrowserFlashBrowseUrl = '/ckeditor/kcfinder/browse.php?type=flash';
 config.filebrowserUploadUrl = '/ckeditor/kcfinder/upload.php?type=files';
 config.filebrowserImageUploadUrl = '/ckeditor/kcfinder/upload.php?type=images';
 config.filebrowserFlashUploadUrl = '/ckeditor/kcfinder/upload.php?type=flash';
};

Step4：打開kcfinder資料夾中的config.php

將'disabled' => true,改為'disabled' => false,
將'_check4htaccess' => true,改為'_check4htaccess' => false,

Step5：在ckeditor資料夾中建立index.php將下列的程式貼上

<!DOCTYPE html>
 <html>
 <head>
  <title>CKEditor Samples</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="ckeditor.js"></script>
  <script language="javascript">
   CKEDITOR.replace('editor1');
  </script>
 </head>
 <body>
  <textarea id="editor1" name="editor1" class="ckeditor"></textarea>
 </body>
</html>

這樣就完成了喔～～

DEMO：http://kcfinder.sunhater.com/demos/ckeditor

下面有些設定，如果需要也可以加上：

1.CKEditor 預設如果從 WORD (或來自剪貼簿) 複製文字 (段落) 後貼上 CKEditor 會造成字體格式跑掉，變成沒有顏色亦沒有字體大小，解決方法就是打開ckeditor資料夾中的config.js，在裡頭加入下面那兩行程式碼即可。

config.pasteFromWordRemoveFontStyles = false;
config.pasteFromWordRemoveStyles = false;

2.KCFinder上傳中文檔名的檔案，通常上傳中文檔名的檔案都會有問題，所以可以編輯ckeditor/kcfinder/core/uploader.php
先找到341行$filename = strtr($filename, $this->config['filenameChangeChars']);
然後在那行下面加入以下的程式即可

if(mb_strlen($filename,"Big5") != strlen($filename)){
  $file_end=end(explode('.', $filename));
  $filename =  time().".".$file_end;
}

Gina Chao

網頁

3/31/2013

JQuery- 圖文編輯器[CKEditor整合KCFinder]

下面有些設定，如果需要也可以加上：

3/28/2013

重設TCP/IP

Windows的網路產生問題時(例：辦公室的內網IP重複、電腦中毒)，可以依照下面的方式重設TCP/IP去修復網路。