富文本编辑器Ckeditor上传图片分享

版本:ckeditor4
下载地址:https://ckeditor.com/ckeditor-4/download/
导入到项目中:

image.png

下面将简要讲述下用法:

1、html页面引用



2、JS代码

ckeditor本身有个通用配置文件:

image.png

具体可配置的选项可参考官方文档:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
如果在使用ckeditor时,直接这样写:

CKEDITOR.replace('content');

就是所有配置应用默认配置,也可以自定义配置当作参数传入:

CKEDITOR.replace('content',
            {
                filebrowserImageUploadUrl : Fengunion.ctx+'/admin/fileController/uploadImgForCkeditor?type=12',
                language : 'zh-cn',
                image_previewText:'' ,
                height: 800
            }
        );

当然我这里只作了一些简单的配置,可根据自己的需要对ckeditor功能进行个性化配置:

其中主要想讲解的就是ckeditor上传图片的配置:filebrowserImageUploadUrl ,这个填写上传图片的后台方法地址,实现效果如下图:


image.png

3、上传图片后台代码

controller:默认接收的图片参数名为upload

package com.fengunion.website.controller.admin;

import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.ResultData;
import com.fengunion.website.common.utils.CkeditorUtils;
import com.fengunion.website.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;

@Controller
@RequestMapping("/admin/fileController")
public class FileController {

    @Autowired
    FileService fileService;

    @RequestMapping("/uploadFileCommon")
    @ResponseBody
    public ResultData uploadFileCommon(@RequestParam(name="type", required = false) Integer type, MultipartFile file){
        String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), file);
        return ResultData.ok(url);
    }

    @RequestMapping("/uploadImgForCkeditor")
    @ResponseBody
    public void uploadImgForCkeditor(HttpServletResponse response, String CKEditorFuncNum,
                                     MultipartFile upload, @RequestParam(name="type", required = false) Integer type){
        String url = fileService.saveFile(FileConstant.FileTypeEnum.getFileType(type), upload);
        CkeditorUtils.writeCkeditor(response, url, CKEditorFuncNum);
    }
}

CkeditorUtils:

package com.fengunion.website.common.utils;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CkeditorUtils {
    public static void writeCkeditor(HttpServletResponse response, String url, String CKEditorFuncNum){
        String result = "";
        try {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write(result);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

值得注意的是,上传图片的controller方法返回值是通过输出流的形式返回给ckeditor进行图片预览的,并且返回的格式统一为以下形式:

String result = "";

然后再用输出流的方式写出去:

try {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write(result);
        } catch (IOException e) {
            e.printStackTrace();
        }

保存文件方法:fileService.saveFile

package com.fengunion.website.service.impl;

import com.fengunion.website.common.constant.FileConstant;
import com.fengunion.website.common.response.CommonResponse;
import com.fengunion.website.common.utils.StringUtils;
import com.fengunion.website.exception.BizException;
import com.fengunion.website.service.FileService;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.UUID;
@Service
public class FileServiceImpl implements FileService {

    @Override
    public String saveFile(String type, MultipartFile file) {
        if(null == file && !file.isEmpty()){
            BizException.newInstance(CommonResponse.FAILED, "上传文件失败,文件缺失!");
        }
        if(StringUtils.isBlank(type)){
            type = FileConstant.COMMON_UPLOAD_PATH;
        }
        try {
            String oldName = file.getOriginalFilename();
            String prefix=oldName.substring(oldName.lastIndexOf(".")+1);
            prefix = "."+prefix;
            String newName = UUID.randomUUID().toString()+prefix;
            // 文件保存路径
            String filePath = FileConstant.getUploadPath() + File.separator + type;
            File desFile = new File(filePath);
            if(!desFile.exists()){
                desFile.mkdirs();
            }
            filePath = filePath+ File.separator + newName;
            // 转存文件
            file.transferTo(new File(filePath));
            return FileConstant.VIEW_PATH+ type + "/" + newName;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}

文件上传定义的常量类:FileConstant

package com.fengunion.website.common.constant;

import com.fengunion.website.common.utils.StringUtils;
import org.springframework.beans.factory.annotation.Value;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;

public class FileConstant {

    @Value("${file.backup.path}")
    private static String basePath;

    public static final String VIEW_PATH = "/upload/";

    private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMdd";

    public static final String COMMON_UPLOAD_PATH = "common";

    /**
     * 文件上传类型定义(用于上传时分子文件夹存储)
     */
    public static enum FileTypeEnum{
        TYPE_NEWS_PC(10, "news/pc"),
        TYPE_NEWS_M(11, "news/m"),
        TYPE_NEWS_CONTENT(12, "news/content"),
        TYPE_BOTTOM(20, "bottom"),
        TYPE_CAROUSEL_PC(30, "carousel/pc"),//轮播图电脑端
        TYPE_CAROUSEL_M(31, "carousel/m"),//轮播图手机端
        TYPE_BUTTON(40, "button"),//首页按钮图片
        TYPE_ABOUT_PC(50, "about/pc"),
        TYPE_ABOUT_M(51, "about/m"),
        TYPE_ABOUT_CONTENT(52, "about/content");

        private Integer code;
        private String path;

        FileTypeEnum(Integer code, String path){
            this.code = code;
            this.path = path;
        }

        public Integer getCode() {
            return code;
        }

        public void setCode(Integer code) {
            this.code = code;
        }

        public String getPath() {
            return path;
        }

        public void setPath(String path) {
            this.path = path;
        }

        public static String getFileType(Integer type){
            if(StringUtils.isBlank(type)){
                return COMMON_UPLOAD_PATH + "/" + getDateStr();
            }
            for(FileTypeEnum e:FileTypeEnum.values()){
                if(type.equals(e.getCode())){
                    return e.getPath() + "/" + getDateStr();
                }
            }
            return null;
        }
    }

    public static String getDateStr(){
        return new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO).format(new Date());
    }

    /**
     * 获取图片存储绝对路径
     * @return
     */
    public static String getUploadPath(){
        String os = System.getProperty("os.name");
        if(os.toLowerCase().startsWith("win")){
            return "C:\\\\fengunion\\website";
        }else{
            return basePath;
        }
    }
}

最终实现效果:

image.png

总结
以上是笔者对ckeditor使用的一些笔记,记录下来希望对读者有用,如有疑问欢迎与我沟通,相互学习,共同进步!

你可能感兴趣的:(富文本编辑器Ckeditor上传图片分享)