Python's flask framework integrates ckeditor Rich Text editor

CKEditor is one of the best visible Web editor available today, and it is written in JavaScript. Features powerful, easy to configure, cross-browser, support a variety of programming languages, open source and so on. It is very popular, the Internet is easy to find relevant technical documents, many domestic Web projects and large sites have adopted ckeditor.

Download CKEditor
Visit the official website of CKEditor, go to the download page, select Standard package (usually enough for the function), then click the Download CKEditor button to download the installation file in zip format. If you want to try more features, you can choose to download the full package.

After downloading the CKEditor, unzip to the Flask Project Static/ckeditor directory.

Using CKEditor in Flask projects
Using CKEditor in a flask project requires only two steps:

The CKEditor main script file is introduced in the <script> tag. You can introduce local files or refer to files on a CDN.
Use Ckeditor.replace () to replace the existing <textarea> tag with the CKEditor.
Example code:

<! DOCTYPE html>

Because CKEditor is good enough, the second step can also append the class attribute value named CKEditor to <textarea>, which is automatically replaced by CKEditor. For example:


<! DOCTYPE html>

The CKEditor script file can also refer to the files on the CDN, and here are a few reference links:


<script src= "//cdn.ckeditor.com/4.4.6/basic/ckeditor.js" ></script>

Basic Edition (mini version)


<script src= "//cdn.ckeditor.com/4.4.6/standard/ckeditor.js" ></script>

Standard Edition


<script src= "//cdn.ckeditor.com/4.4.6/full/ckeditor.js" ></script>

Full version
Enable upload function
The default configuration, CKEditor is not enabled upload function, to turn on the upload function, but also quite simple, just need to modify the configuration simple. Here's a look at a couple of related configuration values:


  

 
   
 
    
Filebrowseruploadurl: File upload path. If set, the Upload button will appear in the links, Pictures, Flash dialog window.
 
    
Filebrowserimageuploadurl: Image upload path. If not set, the Filebrowseruploadurl value is used.
 
    
Filebrowserflashuploadurl:flash upload path. If not set, the Filebrowseruploadurl value is used.
 
   

  
For convenience, here we only set the Filebrowseruploadurl value, whose value is set to/ckupload/(this URL is defined later in flask).

There are 2 main ways to set configuration values:

Method 1: set by ckeditor the configuration file config.js of the root directory:


Ckeditor.editorconfig = function (config) {  //...  File Upload url  config.filebrowseruploadurl = '/ckupload/';  // ...};

Method 2: put the setting value into Ckeditor.replace () as a parameter:


<script>ckeditor.replace (' Editor1 ', {  filebrowseruploadurl: '/ckupload/',});</script>

Flask Processing Upload Requests
CKEditor upload function is a unified interface, that is, an interface can handle image upload, file upload, flash upload. Take a look at the code first:


Def gen_rnd_filename (): Filename_prefix = Datetime.datetime.now (). Strftime ('%y%m%d%h%m%s ') return '%s%s '% (filename_ Prefix, str (random.randrange (10000))) @app. Route ('/ckupload/', methods=[' POST ') def ckupload (): "" "CKEditor File Upload "" error = ' url = ' callback = Request.args.get ("Ckeditorfuncnum") if Request.method = = ' POST ' and ' UPL Oad ' in request.files:fileobj = request.files[' upload '] fname, fext = Os.path.splitext (fileobj.filename) Rnd_nam E = '%s%s '% (Gen_rnd_filename (), fext) filepath = Os.path.join (app.static_folder, ' upload ', rnd_name) # Check if the path exists, does not exist      In the then create dirname = Os.path.dirname (filepath) if not os.path.exists (dirname): Try:os.makedirs (dirname) Except:error = ' Error_create_dir ' elif not os.access (dirname, OS. W_OK): Error = ' error_dir_not_writeable ' If not error:fileobj.save (filepath) url = url_for (' Static ', fi Lename= '%s/%s '% (' upload ', rnd_name)) Else:error = ' Post error ' res = ' "" &Lt;script type= "Text/javascript" > Window.parent.CKEDITOR.tools.callFunction (%s, '%s ', '%s ');</script> "" "% (Callback, URL, error) Response = Make_response (res) response.headers["content-type"] = "text/html" return response

Upload file Capture and save section is relatively simple, is the standard file upload. Here is the main talk about how to callback after the successful upload problem.

After the CKEditor file is uploaded, the server returns the HTML file, the HTML file contains the JavaScript script, the JS script invokes a callback function, and if there is no error, the callback function transfers the returned URL to the CKEditor processing.

These 3 parameters are sequentially:


  

 
   
 
    
Ckeditorfuncnum: callback function ordinal. CKEditor submitted to the server via URL parameters
 
    
URL: The URL of the file after uploading
 
    
ERR: Error message. Returns an empty string if there is no error
 
   

  
Use Blueprint
The blueprint is often used in large-scale applications, and the steps to integrate CKEditor in the Blueprint view are essentially the same as the app view.

1. Specify the absolute path of the blueprint static directory when creating a blueprint


Demo = Blueprint (' demo ', static_folder= "/path/to/static")

2. The corresponding URL must be a blueprint endpoint


<script src= "{{url_for ('. Static ', filename= ' Ckeditor/ckeditor.js ')}}" ></script><script type= "text/ JavaScript ">  ckeditor.replace (    " Ckeditor_demo ", {      filebrowseruploadurl: './ckupload/'    }  ) ;</script>

3. Set the endpoint endpoint value


Response = Form.upload (Endpoint=demo)