Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "html5 editor local save pictures do not show how to solve", in the daily operation, I believe that many people in the html5 editor local save pictures do not show how to solve the problem, editor consulted all kinds of data, sorted out simple and easy to use operation methods, hope to answer the "html5 editor local save pictures do not show how to solve" the doubt is helpful! Next, please follow the editor to study!

When developing a WEB project with Eclipse, we use the function of uploading pictures on Ueditor, and the plug-in will automatically save the uploaded pictures in the Eclipse working directory, which is not conducive to the subsequent operation of the pictures (management). At this time, we have to modify the source code of Ueditor to solve the path problem when uploading pictures.

1. Download the ueditor source code and reference it to the project

Copy all the files in the jsp/src/ directory to your project

Catalog view

Delete ueditor-1.1.2.jar and reference only the first four jar packages

2. Modify the Tomcat server configuration and add the image mapping path.

Add the absolute path of the picture and the virtual path of the picture access in tomcat

Modify the config.json configuration file and fill in the virtual directory you just configured for the access path.

3. Create a configuration file (which can be omitted)

Create a config.properties under the src directory and store the image path

The purpose of reading the configuration file is to dynamically modify the save path, and it is more convenient to manage pictures.

Create a ConfigUtil.java class to read the configuration file

Import java.io.IOException

Import java.io.InputStream

Import java.io.InputStreamReader

Import java.util.Properties

Public class ConfigUtil {

Private static Properties pro

Static {

Pro=new Properties ()

/ / start looking for resource files from the package directory of the class by default

/ / if you want to start looking for the root directory of classpath, you must add /

/ / start looking for resource files from the root directory of classspath by default

InputStream input=ConfigUtil.class

.getClassLoader ()

.getResourceAsStream ("config.properties")

Try {

Pro.load (new InputStreamReader (input)

"UTF-8"))

} catch (IOException e) {

E.printStackTrace ()

} finally {

If (input invalid null) {

Try {

Input.close ()

} catch (IOException e) {

E.printStackTrace ()

}

}

}

}

Public static String get (String key) {

Return pro.getProperty (key)

}

Public static int getInt (String key) {

Return Integer.parseInt (pro.getProperty (key))

}

}

4. Modify the source code (modify the save path of the picture)

Select the project and use the Eclipse file search function

Search physicalPath

Found that physicalPath was used in three classes

Here are three classes that need to modify the source code

/ / comment out the original path code

/ / String physicalPath = this.rootPath + savePath

Use a custom path (which is read through a configuration file and is equivalent to replacing this.savePath in the source code)

Note: ConfigUtil.get ("savepath"), the field name must be the same, otherwise it cannot be read

ImageHunter.java

Base64Uploader.java

BinaryUploader.java

5. Test:

Add a picture to the editor

Let's take a look at the picture preservation directory.

Through the way of changing the source code, we can successfully manage the picture.

6. You need to pay attention to using the Ueditor editor in strtus

If the configuration file is configured to filter all requests, you need to set it to filter only .action requests, otherwise the file will not be saved successfully.

At this point, on the "html5 editor locally saved pictures do not show how to solve" on the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.