[Vue.js教學筆記]CKFinder套入Webpack模組整合工具-修正 @ Michael_Jheng的部落格

此篇為修正文章,只做簡單講解,既上一篇[Vue.js教學筆記]CKEditor套入Webpack模組整合工具-修正來增加CKFinder的功能,是使用CKFinder v2.6.2.1,此版本雖然為DEMO版,但沒有限制了刪除和文件上傳數量,可是有一點要注意,此版本的CKFinder只能在PHP 5下才能操作,不支援PHP 7,切記

CKFinder下載連結

在網頁下方中CKFinder versions history選擇CKFinder v2.6.2.1進行下載

CKFinder v2.6.2.1套用方式可以參考

[Vue.js教學筆記]CKEditor套入Webpack模組整合工具

[Vue.js教學筆記]CKEditor套入Webpack模組整合工具-補充

[Vue.js教學筆記]CKFinder套入Webpack模組整合工具

由於CKFinder v2.6.2.1只能在PHP 5下操作,所以要去XAMPP下載5.6.32/PHP 5.6.32版本

XAMPP下載

CKFinder v2.6.2.1下載完成後,打開/ckfinder/config.php,修改第21行下,function CheckAuthentication()中的return false;改成return true;

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

在CKEditor套件中的config.js配置CKFinder,

CKEDITOR.editorConfig = function( config ) {

   /* ckeditor工具 */
config.toolbar = [
{items:[ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ]},
{items:[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]},
{items:[ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]},
{items:[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ]},
{items:[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]},
{items:[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ]},
{items:[ 'Link', 'Unlink', 'Anchor' ]},
{items:[ 'Image', 'Flash', 'Youtube', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ]},
{items:[ 'Styles', 'Format', 'Font', 'FontSize' ]},
{items:[ 'TextColor', 'BGColor' ]},
{items:[ 'Maximize', 'ShowBlocks' ]},
{items:[ 'About' ]}
];
   /* ckeditor字體 */
   config.font_names ='Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif;新細明體;標楷體;微軟正黑體';
   /* ckeditor寬與高 */
   config.width = '100%';
   config.height = 500;
   /* 允許所有標籤 */
config.allowedContent = true;
   /* CKFinder配置 */
   config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';
   config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images';
   config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash';
   config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
   config.filebrowserImageUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
   config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
   config.filebrowserWindowWidth = '1000';
   config.filebrowserWindowHeight = '700';
};