markdown SpringBoot-配置富文本编辑器

Posted 2021-05-06

    @RequestMapping(value = "editor/imageUploads.do")
    public String imageUpload(@RequestParam("upload") MultipartFile file,
                              @RequestParam("CKEditorFuncNum") String CKEditorFuncNum,
                              HttpServletResponse response,
                              HttpServletRequest request) throws IOException {
        //方便测试，允许跨域上传
        response.setHeader("Access-Control-Allow-Origin","*");

        //如果临时文件夹不存在，则创建临时文件夹。
        File tmpDir = new File("C:\\Users\\ZY\\Desktop\\PartCodes\\target\\classes\\static\\imag");
        if(!tmpDir.exists())
        {
            tmpDir.mkdir();
        }
        System.out.println("1:"+tmpDir.getAbsolutePath());


        //获得文件名和文件类型
        PrintWriter out = response.getWriter();
        String name = null;
        name = new String(file.getOriginalFilename().getBytes("iso-8859-1"), "UTF-8");
        String uploadContentType = file.getContentType();

        //处理文件后缀
        String expandedName = "";
        if (uploadContentType.equals("image/pjpeg")
                || uploadContentType.equals("image/jpeg")) {
            // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
            expandedName = ".jpg";
        } else if (uploadContentType.equals("image/png")
                || uploadContentType.equals("image/x-png")) {
            // IE6上传的png图片的headimageContentType是"image/x-png"
            expandedName = ".png";
        } else if (uploadContentType.equals("image/gif")) {
            expandedName = ".gif";
        } else if (uploadContentType.equals("image/bmp")) {
            expandedName = ".bmp";
        } else {
            //文件格式不符合，返回错误信息
            out.println("<script type=\"text/javascript\">");
            out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                    + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
            out.println("</script>");
            return null;
        }

        //文件命名并保存到服务器
        DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        name = df.format(new Date()) +expandedName;
        try {
            File file1 = new File(tmpDir.getAbsolutePath()+"/"+name);
            System.out.println("2:"+file1.getPath());
            file.transferTo(file1);
        } catch (Exception e) {
            e.printStackTrace();
        }

        String fileURL ="imag\\"+name;
        System.out.println("3:"+fileURL);

        // 返回"图像"选项卡和图像在服务器的地址并显示图片
        String callback = request.getParameter("CKEditorFuncNum");
        String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileURL + "');</script>";
        out.println(script);
        out.flush();
        out.close();
        return null;
    }

 <script src="ckeditor/ckeditor.js"></script>
<!--引入JS文件-->
 <div class="layui-form-item">
    <label class="layui-form-label">正文:</label>
    <div class="layui-input-block">
        <textarea id="editor1" name="context">
       </textarea>
   </div>
 </div>
 <!--初始化DOM-->
 <script>
  var editor=CKEDITOR.replace( 'editor1',{
   filebrowserUploadUrl: 'http://localhost:8080/web/editor/imageUploads.do'
   });
 </script>
 <!--初始化CK-->

id: "Upload", hidden: false
//找到image.js 搜索Uploiad，将Hidden改为false

CKEDITOR.editorConfig = function( config ) {
	// 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' }
	];

    .......
	
	//设置Tab键打印空格
	config.tabSpaces = 4;
	//将图片上传的预览文字去掉
	config.image_previewText=' '
	//配置图片上传地址
	config.filebrowserImageUploadUrl = 'http://localhost:8080/web/editor/imageUploads.do' ;
	
};

SpringBoot——配置富文本编辑器
config.js 配置了常用的配置项
image.js 开启图片上传项

> 图片上传参考链接
https://my.oschina.net/netmouse/blog/616855