Flask Web學習筆記（六）
阿新 • • 發佈：2018-12-13
Flask部落格開啟CKeditor的圖片上傳功能
1.開啟CKeditor的本地瀏覽按鈕
先在Flask專案的static資料夾裡建立browser資料夾，再在browser資料夾裡建立browse.html
接著在CKeditor的資料夾裡找到config.js，在裡面配置
config.filebrowserBrowseUrl = '/static/browser/browse.html';
2.在browse.html裡編寫CKeditor的API介面
<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <title>瀏覽本地檔案</title> <script> // Helper function to get parameters from the query string. function getUrlParam( paramName ) { var reParam = new RegExp( '(?:[\?&]|&)' + paramName+ '=([^&]+)', 'i' ); var match = window.location.search.match( reParam ); return ( match && match.length > 1 ) ? match[1] : null; } // Simulate user action of selecting a file to be returned to CKEditor. function returnFileUrl(){ str= new Array(); filename = form1.file.value; str = filename.split("\\"); extname = str[str.length - 1]; fileUrl = '/static/upload/' + extname; var funcNum = getUrlParam( 'CKEditorFuncNum' ); window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() { // Get the reference to a dialog window. var dialog = this.getDialog(); // Check if this is the Image Properties dialog window. if ( dialog.getName() == 'image' ) { // Get the reference to a text field that stores the "alt" attribute. var element = dialog.getContentElement( 'info', 'txtAlt' ); // Assign the new value. if ( element ) element.setValue( 'alt text' ); } // Return "false" to stop further execution. In such case CKEditor will ignore the second argument ("fileUrl") // and the "onSelect" function assigned to the button that called the file manager (if defined). // return false; } ); window.close(); } </script> </head> <body> <form enctype="multipart/form-data" name="form1"> <input type="file" name="file" value="選擇檔案"> <input type="button" value="確定" onClick="returnFileUrl()"> </form> </body> </html>
3.開啟localhost:5000,找到你的CKeditor開啟圖片上傳，會發現多了一個瀏覽器服務按鈕
4.點選確定按鈕就可以上傳了
