CKEditor 整合 elfinder 檔案管理

:::

9-2 所見即所得編輯器 CKEditor 用法

9-3 所見即所得編輯器 elRTE 用法 next

PHP入門講義

9-2-1 CKEditor 整合 elfinder 檔案管理

1. 解壓縮，將 elfinder-1.x 目錄改名為 elfinder，並複製到 htdocs 下。

2. 設定FCKEditor

      <textarea name='content' cols=30 rows=5 id='editor'>請輸入內容</textarea>
    <script type='text/javascript'>
          CKEDITOR.replace('editor',{skin : 'v2' , filebrowserBrowseUrl : 'elfinder.html'});
    </script>

3. 建立上傳目錄，如 htdocs/files

4. 製作 elfinder 專頁 elfinder.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id='finder'></div>

    <script src="elfinder/js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="elfinder/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="elfinder/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">


    <link rel="stylesheet" href="elfinder/css/elfinder.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="elfinder/js/i18n/elfinder.zh_TW.js" type="text/javascript" charset="utf-8"></script>


    <script type='text/javascript'>
    $().ready(function() {

       var funcNum = window.location.search.replace(/^.*CKEditorFuncNum=(\d+).*$/, "$1");
       var langCode = window.location.search.replace(/^.*langCode=([a-z]{2}).*$/, "$1");

       $('#finder').elfinder({
          url : 'elfinder/connectors/php/connector.php',
          lang : langCode,
          editorCallback : function(url) {
             window.opener.CKEDITOR.tools.callFunction(funcNum, url);
             window.close();
          }
       })

    })
    </script>
</body>
</html>