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

版本：ckeditor4
下載地址：https://ckeditor.com/ckeditor-4/download/
導(dǎo)入到項(xiàng)目中：

image.png

下面將簡(jiǎn)要講述下用法：

1、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>

2、JS代碼

ckeditor本身有個(gè)通用配置文件：

image.png

具體可配置的選項(xiàng)可參考官方文檔：https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
如果在使用ckeditor時(shí)，直接這樣寫：

CKEDITOR.replace('content');

就是所有配置應(yīng)用默認(rèn)配置，也可以自定義配置當(dāng)作參數(shù)傳入：

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

當(dāng)然我這里只作了一些簡(jiǎn)單的配置，可根據(jù)自己的需要對(duì)ckeditor功能進(jìn)行個(gè)性化配置：

其中主要想講解的就是ckeditor上傳圖片的配置：filebrowserImageUploadUrl ，這個(gè)填寫上傳圖片的后臺(tái)方法地址，實(shí)現(xiàn)效果如下圖：


image.png

3、上傳圖片后臺(tái)代碼

controller：默認(rèn)接收的圖片參數(shù)名為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進(jìn)行圖片預(yù)覽的，并且返回的格式統(tǒng)一為以下形式：

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;
            // 轉(zhuǎn)存文件
            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";

    /**
     * 文件上傳類型定義（用于上傳時(shí)分子文件夾存儲(chǔ)）
     */
    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"),//輪播圖手機(jī)端
        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());
    }

    /**
     * 獲取圖片存儲(chǔ)絕對(duì)路徑
     * @return
     */
    public static String getUploadPath(){
        String os = System.getProperty("os.name");
        if(os.toLowerCase().startsWith("win")){
            return "C:\\\\fengunion\\website";
        }else{
            return basePath;
        }
    }
}

最終實(shí)現(xiàn)效果：

image.png

總結(jié)
以上是筆者對(duì)ckeditor使用的一些筆記，記錄下來希望對(duì)讀者有用，如有疑問歡迎與我溝通，相互學(xué)習(xí)，共同進(jìn)步！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容