Integration of Rich File Manager with ckeditor

This article is helpful to those developers or programmers who are facing the issues with file upload functionality and are using the ckfinder a paid service. Rich file manager is open source and is free to use. You can follow the below steps to integrate this with ckeditor in your spring boot or java application.

1.Download the latest version of ckeditor  and rich file manager. Add the above downloaded files under resources folder of your project. Make sure to add ckeditor and RichFilemanager-master directories in parallel under resource folder.

2.Open the js file /Resources/ckeditor/config.js and add below lines,

config.filebrowserImageBrowseUrl =’/RichFilemanager-master/index.html?filter=image’

(Note, we have added the filter Image to support the upload of images only moreover you can remove or modify the filter as per your need.

3. Enabling the java connector – We need to use the java connector to connect rich file manager with ckeditor.

i) Modify the rich file manager config file available under directory /resources/RichFilemanager-master/config/filemanager-config.json as below

"api": {
"lang": "java",
"connectorUrl": "/admin/fileManager/api",
"requestParams": {
"GET": {},
"POST": {},
"MIXED": {}
}
},

and

"viewer": {
"absolutePath": false,
"previewUrl": "/admin/fileManager/api",
"image": {
"enabled": true,
"lazyLoad": true,
"showThumbs": true,
"thumbMaxWidth": 64,
"extensions": [	 
"jpg",
"jpe",
"jpeg",
"gif",
"png",
"svg"
]

ii) Copy the code of java connector (resources\RichFilemanager-master\connectors\java) to standalone java project and generate a jar and add back to class path of your project. Here before generating this jar, you might need to modify/tweak below things in this java connector,
1. Modify the image upload directory path and other configuration in file <filemanager.config.properties> .
2. Add the jar <imgscalr-lib-4.2.jar>,<javax.servlet-api-3.0.1.jar> and <slf4j-api-1.7.21.jar> to your java project which is needed to compile this connector
3. Update the file <AbstractFileManager.java> for below method which is having small bug in current code,

 @Override
    public JSONObject actionInitiate(HttpServletRequest request) throws FileManagerException {
        JSONObject init = new JSONObject();
        JSONObject data = new JSONObject();
        JSONObject attributes = new JSONObject();
        data.put("id", "/");
        data.put("type", "initiate");
        JSONObject options = new JSONObject();
        options.put("culture", propertiesConfig.getProperty("culture"));
        options.put("charsLatinOnly", Boolean.parseBoolean(propertiesConfig.getProperty("charsLatinOnly")));
        if( propertiesConfig.getProperty("capabilities") != null ){
            options.put("capabilities", propertiesConfig.getProperty("capabilities"));
        } else{
            options.put("capabilities", false);
        }
        options.put("allowFolderDownload", 
        Boolean.parseBoolean(propertiesConfig.getProperty("allowFolderDownload")));
        JSONObject security = new JSONObject();
        security.put("allowNoExtension", Boolean.parseBoolean(propertiesConfig.getProperty("allowNoExtension")));
        security.put("editRestrictions", propertiesConfig.getProperty("editRestrictions").split(","));
        JSONObject upload = new JSONObject();
        try {
            upload.put("fileSizeLimit", Long.parseLong(propertiesConfig.getProperty("upload_fileSizeLimit")));
        }catch (NumberFormatException e){
            logger.error("fileSizeLimit -> Format Exception", e);
        }
        JSONObject extensions = new JSONObject();
        extensions.put("policy", propertiesConfig.getProperty("upload_policy"));
        extensions.put("restrictions", propertiesConfig.getProperty("upload_restrictions").split(","));
        security.put("extensions", extensions);
        JSONObject sharedConfig = new JSONObject();
        sharedConfig.put("options", options);
        sharedConfig.put("security", security);
        sharedConfig.put("upload", upload);       
        attributes.put("config", sharedConfig);

        data.put("attributes", attributes);
        init.put("data", data);
        return init;
    }

4. Add below method to end of the file <LocalFileManager.java> and use below method to get the file name inside method <uploadFiles> .

String submittedFileName = getFileName(uploadedFile);

private String getFileName(Part part) {
		for (String content : part.getHeader("content-disposition").split(";")) {
			if (content.trim().startsWith("filename")) {
				return content.substring(content.indexOf('=') + 1).trim().replace("\"", "");
			}

		}
		return null;
	}

In spring boot application, you can declare the jar dependency as mentioned below,

<dependency>
		   <groupId>com.ourhints</groupId>
		   <artifactId>ourhints</artifactId>
		   <version>1.0</version>
		   <scope>system</scope>
		   <systemPath>${basedir}/src/main/resources/lib/fm-connector.jar</systemPath>
        </dependency>

 

iii). Add a controller if you are using spring project as below which will process the file manager request and send the request to Local file manager class available in java connector.

@Controller
@RequestMapping({"/admin/fileManager"})
public class AdminFileManagerController
{
@RequestMapping(value={""}, method={org.springframework.web.bind.annotation.RequestMethod.GET})
public String index(ModelMap model, HttpServletRequest request, HttpServletResponse response)
throws IOException
{
return "admin/fm/home";
}
@RequestMapping({"/api"})
public void fm(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws IOException, FileManagerException {
new LocalFileManager().handleRequest(request, response);
}
}

Thanks