Integrate the xhEditor text editor into the Python Flask site

XhEditor is a jQuery-based Web-side text editor with basic image upload and other functions. here, let's take a look at the tutorial on integrating xhEditor into the Python Flask site. XhEditor introduction

XhEditor is a simple mini-and efficient visual HTML editor developed based on jQuery. it is network-based and compatible with IE 6.0 +, Firefox 3.0 +, Opera 9.6 +, and Chrome 1.0 +, safari 3.22 +.

XhEditor was my favorite editor and one of the first editors that support drag-and-drop upload. XhEditor was an excellent editor in the past. it has powerful functions and a good user experience. drag-and-drop upload is my favorite feature, but it is a pity that it has stopped development. The last stable version of xhEditor is 1.1.14, which has not been updated for more than two years (development version 1.2.1 was released in 2013). The author has stopped development and maintenance, and the community forum cannot be opened.

Because xhEditor is developed based on jQuery, it does not support the new version of jQuery. only jQuery of version 1.4 supports the best.

Although it is no longer updated, she can be fully qualified in some scenarios where rich text editors are needed.

This article uses version 1.1.14 as an example to describe how to use the xhEditor in the Flask project and implement the backend functions of image upload and file upload.

XhEditor features:

• Simplified mini: initially loaded 4 files, including: 1 js (50 k) + 2 css (10 k) + 1 image (5 k), a total of 65 k. If the js and css files are compressed and transmitted by gzip, it can be further reduced to around 24 K.

• Easy to use: Simple calling method, adding a class attribute can instantly turn your textarea into a visual editor with rich functions.

• Accessibility: provide comprehensive support for WAI-ARIA, full keyboard fine operation, full voice wizard, provide a perfect accessibility experience, so that the disabled can also write a wonderful life.

• Built-in Ajax Upload: Powerful built-in Ajax Upload, including HTML 4 and HTML 5 upload support (multifile Upload, real Upload progress, and file drag-and-drop Upload), clipboard upload, and remote capture Upload, perfect User Upload experience.

• Automatic Word cleanup: implements automatic detection and cleanup of Word code, provides an efficient and perfect Word code filtering solution, optimizes and simplifies the generated code, but does not lose any details.

• UBB visual editing: provides a perfect UBB visual editing solution, allowing you to enjoy the convenience of visual editing while obtaining secure and efficient code storage.

Use xhEditor in the Flask project
First, we need to download the xhEditor version 1.1.14 on the xhEditor official website, download it, and decompress it
The static/xheditor Directory of the Flask project.

XhEditor provides two initialization methods: Class initialization and JavaScript initialization. To initialize a Class, you only need to set the textarea value to the class attribute of xheditor, which will automatically become the xhEditor editor. a page can be in multiple editors at the same time, and parameters can be added to this Class attribute. (PS: CKEditor also has this function)

For the two initialization methods, the official website provides a convenient setting wizard to make the configuration relatively simple.

Sample code: