CKEditor富文本編輯器實現圖片上傳java

一、構建一個富文本編輯器：

<textarea name="editor" id="editor" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
</textarea>
<button id="but">提交</button>
<script th:src="@{/assets/js/ckeditor/ckeditor.js}"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
    $(function () {
        CKEDITOR.replace('editor');
        $("#but").click(function () {
            var data = CKEDITOR.instances.editor.getData();
            console.log(data);
        });
    })
</script>

二、修改CKEditor代碼：

（1）修改/ckeditor/plugins/image/dialogs/image.js

　　1）刪除引號中的文本

　　

　　2）搜索id：“upload”把！0改為0；

　　

（2）修改\ckeditor\config.js加入以下代碼：

    // 解決request.getParameter("CKEditorFuncNum")獲取不到
    config.filebrowserUploadMethod = 'form';
    // 清空預覽區域顯示內容
    config.image_previewText = '';
    // 隱藏超鏈接與高級選項
    config.removeDialogTabs = 'image:advanced;image:Link';
    // 要上傳圖片的接口
    config.filebrowserImageUploadUrl = "publicutil/uploadImage";

三、編寫接口：

（1）導入依賴：

        <dependency>
            <groupId>com.ckeditor</groupId>
            <artifactId>ckeditor-java-core</artifactId>
            <version>3.5.3</version>
        </dependency>

（2）常量：

public class WebsiteConstant {
    public static String[] IMAGE_EXTENSION_NAME_ARRAY = {".jpg", ".jpeg", ".png", ".gif", ".bmp"};
    public static String PIC_APP_SERVER_URL = "http://localhost:8080/upload/";
    public static String PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION = "/upload/";
}

（3）接口：

@Controller
@RequestMapping("publicutil")
public class PublicUtilController {

    @RequestMapping(value = "uploadImage", method = RequestMethod.POST)
    private void uploadImage(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile[] upload) {
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
        } catch (IOException e1) {
            //logger.error("response.getWriter()異常=" + e1);
            e1.printStackTrace();
        }
        String callback = request.getParameter("CKEditorFuncNum");

        // 獲得response,request
        Map<String, Object> m = new HashMap<String, Object>();

        // 判斷客戶端<form>標記的enctype屬性是否是“multipart/form-data"。
        if (!ServletFileUpload.isMultipartContent(request)) {
            m.put("error", 1);
            m.put("message", "請選擇文件!");
            //return m;
            //logger.info("請選擇文件!");
        }

        //上傳的圖片文件名
        String originalFileName = null;
        //上傳圖片的文件擴展名
        String fileExtensionName = null;
        for (MultipartFile file : upload) {
            // 文件大於10M
            if (file.getSize() > 10 * 1024 * 1024) {
                out.println("<script type=\"text/javascript\">");
                out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
                        + ",''," + "'文件大小不得大於10M');");
                out.println("</script>");
            }
            // 文件小於10M
            originalFileName = file.getOriginalFilename();
            //logger.info("上傳的圖片文件名=" + originalFileName);
            fileExtensionName = originalFileName.substring(
                    originalFileName.lastIndexOf("."), originalFileName.length()).toLowerCase();
            //logger.info("圖片文件擴展名=" + fileExtensionName);

            // 文件支持的擴展名
            String[] imageExtensionNameArray = WebsiteConstant.IMAGE_EXTENSION_NAME_ARRAY;
            String allImageExtensionName = "";
            //默認不包含上傳圖片文件擴展名
            boolean isContain = false;
            for (int i = 0; i < imageExtensionNameArray.length; i++) {
                if (fileExtensionName.equals(imageExtensionNameArray[i])) {
                    isContain = true;
                }
                if (i == 0) {
                    allImageExtensionName += imageExtensionNameArray[i];
                } else {
                    allImageExtensionName += " , " + imageExtensionNameArray[i];
                }
            }

            String newFileName = UUID.randomUUID().toString() + fileExtensionName;
            String uploadPath = WebsiteConstant.PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION;
            if (isContain) {
                // 包含
                File pathFile = new File(uploadPath);
                if (!pathFile.exists()) {
                    // 如果路徑不存在，創建
                    pathFile.mkdirs();
                }
                try {
                    //FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath, newFileName));
                    InputStream is = file.getInputStream();
                    File toFile = new File(uploadPath, newFileName);
                    OutputStream os = new FileOutputStream(toFile);
                    byte[] buffer = new byte[1024];
                    int length = 0;
                    while ((length = is.read(buffer)) > 0) {
                        os.write(buffer, 0, length);
                    }
                    is.close();
                    os.close();
                } catch (IOException e) {
                    //logger.error("FileUtils.copyInputStreamToFile uploadPath=" + uploadPath + " newFileName =" + newFileName + " exception=" + e);
                }
                String imageUrl = WebsiteConstant.PIC_APP_SERVER_URL + newFileName;
                System.out.println(imageUrl);
                // 返回"圖像信息"選項卡並顯示圖片 ,在對應的文本框中顯示圖片資源url
                out.println("<script type=\"text/javascript\">");
                out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageUrl + "',''" + ")");
                out.println("</script>");

            } else {
                out.println("<script type=\"text/javascript\">");
                out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
                        + ",''," + "'文件格式不正確（必須為" + allImageExtensionName + "文件）');");
                out.println("</script>");
            }
        }
    }
}

（4）配置本地資源訪問：

@Configuration
public class ResourcesConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /** 文件上傳路徑 */
        registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/upload/");
    }
}