Michael_Jheng的部落格

為了能夠在CKEditor文字編輯器上方便上傳Files,Images與Flash檔,就要套用CKFinder這工具,在Webpack上套用CKFinder步驟有點多,請仔細按照步驟操作,

Step One : 

請按照[Vue.js教學筆記]CKEditor套入Webpack模組整合工具,來創造CKEditor文字編輯器

Step Two : 

至CKFinder載點位置進行下載,網址如下,進入網站後拉到最下方會看到以下畫面,點擊"Download",

CKFinder官方網站載點

下載PHP version即可,

下載完成解壓縮即可,如下所示,

Step Three :

設定與修改CKFinder,首先打開/ckfinder/config.php進行配置,在第28行以下程式,

$config['authentication'] = function () {
    return false;
};

將return false;改成return true;,這樣就啟動CKFinder這套件啦

$config['authentication'] = function () {
    //return false;
    return true;
};

在第80行下可看到此配置能上傳Files,Images,但沒有Flash,所以必須在下面增加以下程式,

$config['resourceTypes'][] = array(
    'name'              => 'Flash',
    'directory'         => 'flash',
    'maxSize'           => 0,
    'allowedExtensions' => 'fla,swf,swt,swc,flv',
    'deniedExtensions'  => '',
    'backend'           => 'default'
);

Step Four :

如果有先按照[Vue.js教學筆記]CKEditor套入Webpack模組整合工具創造CKEditor文字編輯器,裡頭有在XAMPP這軟體,將CKFinder放置XAMPP中的htdocs文件夾中,利用XAMPP中的Apache功能來啟動,下圖是在htdocs中創造webpackCKEditor資料夾來進行存放,注意要與CKEditor放在同一資料夾中,這樣才能完成CKEditor + CKFinder的結合

Step Five :

在\ckeditor-project\index.html中,新增<script src="http://localhost/ckfinder/ckfinder.js"></script>,

接下來在\ckeditor-project\src\components\Hello.vue,在config下新增

filebrowserBrowseUrl: 'http://localhost/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: 'http://localhost/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl: 'http://localhost/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth: '1000',
filebrowserWindowHeight: '700'

Step Six :

以上修改完畢後,先開啟XAMPP中的Apache功能,讓CKEditor與CKFinder能夠執行,在node指令區輸入"npm run dev"執行會出現以下畫面,

點擊圖像圖示,

會出現瀏覽伺服器按鈕

點擊後會跳出視窗,此時會發現視窗中沒有任何畫面,這是因為在執行Webpack時的port為8080,而XAMPP中的Apache的port為80,要在同一個port底下才能順利執行

Step Seven :

接下來執行"npm run build"產生發佈檔,將dist資料夾底下檔案static與index.html複製至/xampp/htdocs/webpackCKEditor裡,如下所示,

重新開啟XAMPP中的Apache功能,出現以下畫面,

在點擊圖像圖示->瀏覽伺服器按鈕後,跳出視窗就會出現Images上傳操作介面,如下所示,

點擊上方Upload,上傳一張圖片

上傳成功會顯示在此操作介面上,

再來點擊圖片,出現"Choose"點擊後

圖片就會套入此操作視窗,按下確定

此圖片就會出現在CKEditor文字編輯器上了

Step Eight :

此圖片存放位置在/ckfinder/userfiles/images裡

上一層/ckfinder/userfiles資料夾內容如下,

接下來可以試著上傳Files與Flash檔