Table of contents
1.1 What is a rich text editor?
1.3 Steps to use CKEditor 4 【Refer to the official document】
1.4 Optimize the function of adding, viewing and modifying products
1.5 Try to expand other rich text editors outside of class
2.1 Where are the client files uploaded to?
2.5 Related classes and their common methods
2.6 Getting to know the code first
1. Rich text editor
1.1 What is a rich text editor?
Rich text editor , Multi-function Text Editor, referred to as MTE, is a text editor that can be embedded in a browser, and what you see is what you get.
1.2 CKEditor
CKEditor is a powerful open source online text editor. Its WYSIWYG feature enables the content and format you see when editing to be exactly the same as the effect you see after publishing. CKEditor is completely developed based on JavaScript, so there is no need to install anything on the client side, and it is compatible with all major browsers.
Official website: WYSIWYG HTML Editor with Collaborative Rich Text Editing
1.3 Steps to use CKEditor 4 【Refer to the official document】
-
Download CKEditor4, unzip, import your project
-
Introduce ckeditor.js in the required interface
-
Use CKEDITOR.replace() to replace the existing textarea on your interface [according to id]
1.4 Optimize the function of adding, viewing and modifying products
1.5 Try to expand other rich text editors outside of class
1.Kindeditor 2.ueditor 3.wangEditor 4.SmartMarkUP 5.Control.Editor 6.EditArea 7.Free Rich Text Editor
2. File upload
2.1 Where are the client files uploaded to?
① Upload to the database corresponding table?
②Upload to a certain folder on the hard disk of the server?
2.2 What is SmartUpload?
SmartUpload is a free component specially used to realize file upload and download
2.3 Advantages of SmartUpload
-
Easy to use: write a small amount of code to complete the upload and download functions
-
Ability to control uploaded content
-
Ability to control the size and type of uploaded files
2.4 Environment preparation
-
Introduce the smartupload.jar file in the project and add it to the WEB-INF\lib directory
-
Since the file needs to be uploaded, the enctype attribute of the form must be set, indicating that the form is submitted in binary form
-
2.5 Related classes and their common methods
2.5.1 The SmartUpload class is used to implement file upload and download operations
2.5.2 The File class encapsulates all the information contained in a single uploaded file
[ option ] There are three options: SAVE_PHYSICAL, SAVE_VIRTUAL and SAVE_AUTO
-
SAVE_PHYSICAL instructs the component to save the file to the directory with the root directory of the operating system as the root directory of the file
-
SAVE_ VIRTUAL instructs the component to save the file to a directory with the root directory of the web application as the root directory of the file
-
SAVE_ AUTO means automatically selected by the component
Note : For the development of Web programs, it is best to use SAVEAS_ VIRTUAL for portability.
2.5.3 The Files class encapsulates the information collection of all uploaded files
2.6 Getting to know the code first
2.7 Optimization
① Realize the preview effect
② Solve the file overwriting problem
If the file names uploaded by multiple users are the same, overwriting will definitely occur. In order to avoid such problems, an automatic naming method for uploaded files can be adopted. To prevent duplication, you can use timestamp + random number to name the file:
③ Get other values from the form
④ Upload multiple files
[Note] After the picture is uploaded to the server, do not clean the server