富文本編輯器CKEditor上傳圖片分享

版本：ckeditor4

下載地址：https://ckeditor.com/ckeditor-4/download/

導入到項目中：

下面將簡要講述下用法：

###一、html頁面引用

<textarea class="form-item" name="content" id="content" rows="20" cols="80" style="height:800px;"></textarea>
<script src="${ctx}/plugins/ckeditor/ckeditor.js"></script>

###二、JS代碼

ckeditor自己有個通用配置文件：

具體可配置的選項可參考官方文檔：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 ，這個填寫上傳圖片的後臺方法地址，實現效果以下圖：

###三、上傳圖片後臺代碼 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 = "<script type=\"text/javascript\">";
        result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'"  + url + "','上傳成功')";
        result += "</script>";
        try {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write(result);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

值得注意的是，上傳圖片的controller方法返回值是經過輸出流的形式返回給ckeditor進行圖片預覽的，而且返回的格式統一爲如下形式：

String result = "<script type=\"text/javascript\">";
        result += "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'"  + url + "','上傳成功')";
        result += "</script>";

而後再用輸出流的方式寫出去：

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;
        }
    }
}

最終實現效果：

總結

以上是筆者對ckeditor使用的一些筆記，記錄下來但願對讀者有用，若有疑問歡迎與我溝通，相互學習，共同進步！