Spring boot 集成ckeditor

時間 2019-11-17

標籤 spring boot 集成 ckeditor 欄目 Spring 简体版

原文原文鏈接

1:下載ckeditor 4.4.2 full package ,官網沒有顯示，須要在最新版本的ckeditor download右鍵，複製連接，輸入到導航欄，將版本號改成本身想要的版本號。javascript

https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.2/ckeditor_4.4.2_full.ziphtml

2：修改 config.js，加載圖片上傳插件java

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
        // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    config.filebrowserImageUploadUrl= '/upload/image';            //上傳圖片後臺接口
};

3：index.html 裏面引入ckeditor編輯框spring

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A Simple Page with CKEditor</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/ckeditor/config.js"></script>
</head>
<body>
<form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
</form>
</body>
</html>

4：搭建spring boot 框架，提供後臺上傳圖片接口windows

@Controller
public class CKEditorController {

    Logger logger = LogManager.getLogger(CKEditorController.class);

    @RequestMapping("/")
    public String ckeditor(Model model) {
        System.out.println("進入");
//        Student student=new Student("AA","1","abcdljaldf");
//        model.addAttribute("status","Hello");
//        model.addAttribute("page",student);
        return "/index.html";
    }


    @Value(value = "${cbs.imagesPath}")  //配置的圖片路徑
    private String ckeditorStorageImagePath;

    @Value(value = "${cbs.imagesPath}")
    private String ckeditorAccessImageUrl;

    @RequestMapping(value = "/upload/image", method = RequestMethod.POST)
    @ResponseBody
    public String uploadImage1(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
        logger.debug("上傳");
        String name = "";
        if (!file.isEmpty()) {
            try {
                response.reset();
//                response.setContentType("text/html; charset=ISO-8859-1");
                response.setContentType("text/html;charset=UTF-8");
                response.setHeader("Cache-Control", "no-cache");
                //解決跨域問題
                //Refused to display 'http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.
                response.setHeader("X-Frame-Options", "SAMEORIGIN");
                PrintWriter out = response.getWriter();  // 最新版本的 會提示出錯：  getWriter has already exists,
//                ServletOutputStream out = response.getOutputStream();  

                String fileClientName = file.getOriginalFilename();
                String pathName = ckeditorStorageImagePath + fileClientName;
                File newfile = new File(pathName);
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));
                stream.write(bytes);
                stream.close();

                // 組裝返回url，以便於ckeditor定位圖片
                String fileUrl = ckeditorAccessImageUrl + File.separator + newfile.getName();


                // 將上傳的圖片的url返回給ckeditor
                String callback = request.getParameter("CKEditorFuncNum");
                logger.debug("callback"+callback+"fileUrl"+fileUrl);
                String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileUrl + "');</script>";
                out.println(script);
                out.flush();
                out.close();
            } catch (Exception e) {
//                logger.info("You failed to upload " + name + " => " + e.getMessage());
                e.printStackTrace();
            }
        } else {
//            logger.info("You failed to upload " + name + " because the file was empty.");
        }
        return "SUCCESS";
    }

　　　　//加載圖片

    @RequestMapping(method = RequestMethod.GET, value = "/displayImage/{filename:.+}")
    @ResponseBody
    public ResponseEntity<?> getFile(@PathVariable String filename) {
        System.out.println(filename );
        try {
//            return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath+imagePath, filename).toString()));
//            return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath+imagePath, filename).toString()));
            return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(ckeditorStorageImagePath, filename).toString()));
        } catch (Exception e) {
            return ResponseEntity.notFound().build();
        }
    }

5:前臺訪問，http://localhost:8080 ,上傳圖片，返回圖片路徑成功api