Springboot中使用kindeditor富文本编辑器

Posted 2022-11-27 cuiran

KindEditor 是什么？

KindEditor 是一套开源的在线html编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 javascript 编写，可以无缝地与 Java、.NET、php、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

官网: http://kindeditor.net/about.php
其他常用的富文本编辑器:
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
有兴趣的小伙伴可以找时间探索一下哦!

导入KindEditor文件，添加前端页面

从官网下载好文档之后，将相关文件导入到我们的项目中，如下图；并在需要富文本编辑框的页面中引入相应的文件。

1、导入所需的脚步和CSS

<!-- 富文本编辑器 -->
<link rel="stylesheet" href="/sell/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="/sell/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/sell/kindeditor/lang/zh-CN.js"></script>
//初始化KindEditor编辑器
<script type="text/javascript">
    var editor;
    KindEditor.ready(function (K) 
        editor = K.create('textarea[name="content"]', 
            //是否允许浏览服务器已上传文件,默认是false
            allowFileManager: true,
            uploadJson :"/sell/speech/uploadFile"
        );
    );
</script>

2、添加内容标签

<div class="form-group">
     <label>内容:</label>
     <textarea  name="content" type="text" class="form-control" value="$(productInfo.productName)!''">
     </textarea>
</div>

spring boot后台

1、首先配置虚拟文件目录

#定义文件路径
file:
 baseUrl: http://192.168.1.143:8080/sell
 staticAccessPath: /static/image/*
 uploadFolder: /image/

2、WebMvcConfigurer处理

@Data
@ConfigurationProperties(prefix = "file")
@Component
public class UploadFilePathConfig implements WebMvcConfigurer 


    private String staticAccessPath;

    private String uploadFolder;

    private String baseUrl;


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) 

        registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
    
....部分省略

3、处理图片上传方法

@RestController
@RequestMapping("/speech")
@Slf4j
public class SpeechController 

    @Autowired
    private UploadFilePathConfig filePathConfig;

    /**
     * 提供KindEditor作文件上传使用
     * @param request
     * @param response
     * @throws Exception
     */
    @PostMapping("/uploadFile")
    public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception 

        PrintWriter writer = response.getWriter();
        // 文件保存目录路径
        String savePath = filePathConfig.getUploadFolder();

        String saveUrl = filePathConfig.getBaseUrl() + File.separatorChar + "static/image" + File.separatorChar
               ;

        // 定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");

        // 最大文件大小
        long maxSize = 1000000;
        response.setContentType("text/html; charset=UTF-8");

        if (!ServletFileUpload.isMultipartContent(request)) 
            writer.println(getError("请选择文件。"));
            return;
        

        File uploadDir = new File(savePath);
        // 判断文件夹是否存在,如果不存在则创建文件夹
        if (!uploadDir.exists()) 
            uploadDir.mkdirs();
        

        // 检查目录写权限
        if (!uploadDir.canWrite()) 
            writer.println(getError("上传目录没有写权限。"));
            return;
        

        String dirName = request.getParameter("dir");
        if (dirName == null) 
            dirName = "image";
        
        if (!extMap.containsKey(dirName)) 
            writer.println(getError("目录名不正确。"));
            return;
        

        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = mRequest.getFileMap();
        String fileName = null;
        for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) 
            Map.Entry<String, MultipartFile> entry = it.next();
            MultipartFile mFile = entry.getValue();
            fileName = mFile.getOriginalFilename();
            // 检查文件大小
            if (mFile.getSize() > maxSize) 
                writer.println(getError("上传文件大小超过限制。"));
                return;
            
            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
            if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) 
                writer.println(getError("上传文件扩展名是不允许的扩展名。\\n只允许" + extMap.get(dirName) + "格式。"));
                return;
            
            UUID uuid = UUID.randomUUID();
            String path = savePath + uuid.toString() + "." + fileExt;
            saveUrl = saveUrl + uuid.toString() + "." + fileExt;

            BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(path));
            FileCopyUtils.copy(mFile.getInputStream(), outputStream);

            log.info("【提交图片】参数正确, saveUrl=",saveUrl);
            JSONObject obj = new JSONObject();
            obj.put("error", 0);
            obj.put("url", saveUrl);
            writer.println(obj.toString());

        

    

....部分代码省略

开始运行测试

效果如图所示：