Flask Web学习笔记(六)

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>
<html lang="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.点击确定按钮就可以上传了

经过3天的摸索,终于摸透了ckeditor上传图片。原创文章,码字不易,转载请标明出处。

猜你喜欢

转载自www.cnblogs.com/alanlee1473/p/10114311.html