springboot中kindeditor 上传图片及其富文本的使用

话不多少，直接进入话题。
首先需要在前端页面中引入kindeditor 库
在这里插入图片描述

 <script src="../js/kindeditor-all.js"></script>

标注黄色的是重点，必须引入
其次写前端代码,注意我这个前端代码是springboot推荐的themleaf写的，其他的前端代码可能会有些区别，大家区别对待。

定义一个文本域
<textarea id="editor_id" name="photoContent" style="width:1100px;height:450px;">
</textarea>
<script>
var editor;		//在js中定义一个变量
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="photoContent"]', {
            // filePostName:"uploadFile",      //默认与后台对应文件名称为imgFile          
            allowFileManager : true,
            allowImageUpload:true,//允许上传图片 打开本地上传图片功能      
            items:['fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'removeformat', 'justifyleft', 'justifycenter', 'justifyright',
                'insertorderedlist', 'insertunorderedlist', 'emoticons', 'image', 'insertfile'
            ],
            uploadJson: "uploadTextNewsPhoto",		//上传图片的后台接口路径
            allowImageRemote: false,
            afterBlur: function(){this.sync();},   ////失去焦点时，将上传内容同步到textarea中
            afterUpload : function(url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                if(name=="image" || name=="multiimage"){ //单个和批量上传图片时
                    var img = new Image();
                    img.src = url;
                    img.onload = function(){ //图片必须加载完成才能获取尺寸
                      
                    }
                }
            }

        });
    });
</script>

在这里插入图片描述
这个就是kindeditor 的效果图。
注意的是items的属性值，大家可以按照需求来写，他是对应着富文本上方的功能，具体怎么写，大家可以自行百度，网上一大堆。
后台代码

@RequestMapping("/uploadTextNewsPhoto")
    @ResponseBody
    public Map uploadTextNewsPhoto(@RequestParam("imgFile") MultipartFile[] uploadFiles, HttpServletRequest request) {}

后台代码的实现没有给大家粘贴，因为每个程序员上传的业务可能会不同，所以我也没给大家粘贴。目的为了不误导大家，并且为了博客的简洁工整。

这里说的是js中kindeditor的uploadJson的属性值对应的是后台controller中的requestMapping的属性值。
filePostName的属性值应该对应的是后台controller中的RequestParam的属性值，注意我说的是应该，我没有尝试，大家可以尝试一下。
因为kindeditor 中已经默认与后台对应文件名称为imgFile ，所以为了方便，我就没有尝试其他的。
我们可以点击kindeditor 上的这个小图标进行上传。
在这里插入图片描述
只要是上传成功，图片也会自动显示在文本框中。

今天就先给大家讲到这里，下篇为大家讲一下。js将kindeditor 富文本内容进行js中的encodeURIComponent方法进行编码，传给后台，后台在进行解码，在前端修改或者是查看时，让富文本的内容在前端进行展示。
还有就是控制富文本显示上传图片后的尺寸大小。

谢谢大家
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上。
欢迎加入技术群聊！

在这里插入图片描述

springboot中kindeditor 上传图片及其富文本的使用

猜你喜欢