Java中使用kindEditor富文本编辑器

上一篇简单写了一下wangeditor富文本的用法，现在简单介绍一下kindeditor富文本编辑器的用法，可以通过kindEditor文档地址查看kindEditor的文档进行开发。
接下来介绍一下我的用法：

首先需引入kindEditor的js

<script type="text/javascript" charset="utf-8" src="../static/plugins/kindeditor/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="../static/plugins/kindeditor/lang/zh-CN.js"></script>

接下来初始化富文本

话不多说直接上代码，首先提交页面代码

//kindeditor富文本编辑器
        KindEditor.ready(function (K) {
            var KE = K.create('#editor_id', {
                //文件上传接收参数名
                filePostName: "uploadFile",
                //这里就是指定文件上传的请求地址
                uploadJson: '/pic/uploadkindeditor',
                //2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
                resizeType: 1,
                //设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
                pasteType: 1,
                //HTML特殊代码过滤
                filterMode : true,
                //true时鼠标放在表情上可以预览表情，默认true
                allowPreviewEmoticons: true,
                //true时显示图片上传按钮
                allowImageUpload: true,
                //利用该方法处理当富文本编辑框失焦之后，立即同步数据
                afterBlur: function(){
                    KindEditor.sync("#editor_id") ;
                },
                items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
                    'table', 'hr', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about'
                ],//自定义富文本功能
                afterChange : function() {
                    //字数统计包含HTML代码
                    $('.word_count1').html(this.count());
                    //字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字
                    $('.word_count2').html(this.count('text'));
                    //设定限制字数
                    var limitNum = 20000;
                    var pattern = '还可以输入' + limitNum + '字';
                    //输入显示
                    $('.word_surplus').html(pattern);
                    if(this.count('text') > limitNum) {
                        pattern = ('字数超过限制，请适当删除部分内容');
                        //超过字数限制自动截取
                        var strValue = KE.text();
                        strValue = strValue.substring(0,limitNum);
                        KE.text(strValue);
                        KE.focus();
                        KE.appendHtml('');
                    } else {
                        //计算剩余字数
                        var result = limitNum - this.count('text');
                        pattern = '还可以输入' +  result + '字';
                    }
                    //输入显示
                    $('.word_surplus').html(pattern);
                }
            });
        })

使用textarea进行富文本提交，并获取富文本内容

<textarea id="editor_id" name="content" placeholder="请输入正文描述（限20000字符以内）" style="width: 600px; height: 500px;"><#if news.content??>${news.content}</#if></textarea>
<p>
    您当前输入了 <span class="word_count2">0</span> 个文字。（字数统计包含HTML代码。）
    <span class="word_surplus"></span>
</p>

接下来进行后台上传图片代码编写

我这里的图片上传采取的是上传到fastdfs服务器，可以直接调用保存接口，fastdfs具体配置在这不做讲解。
接下来后台上传代码

/**
     * 富文本图片上传
     * @param uploadFile
     * @param redirectAttributes
     * @return
     */
    @PostMapping("/pic/uploadkindeditor")
    public JSONObject singleFileUploadKindEdit(@RequestParam("uploadFile") MultipartFile uploadFile,
                                               RedirectAttributes redirectAttributes) {
        String path = "";
        //定义允许上传的文件扩展名
        String[] typeImg = {"jpeg", "png", "jpg", "gif", "bmp"};
        String fileName = uploadFile.getOriginalFilename();
        String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
        if (ext != null) {
            boolean booIsType = false;
            for (int i = 0; i < typeImg.length; i++) {
                if (typeImg[i].equals(ext.toLowerCase(Locale.ENGLISH))) {
                    booIsType = true;
                }
            }
            //类型正确时上传
            if (booIsType) {
                JSONObject result = new JSONObject();
                try {
                    path = FastDFSClient.saveFile(uploadFile);
                } catch (IOException e) {
                    log.info("upload file failed", e);
                }
                result.put("error", 0);
                result.put("url", FastDFSConfig.getTrackerServerHost() + path);
                return result;
            } else {
                log.info("该图片类型不能上传：" + ext);
                result.put("error",1);
                result.put("message","该图片类型暂不支持上传")
                return result;
            }
        } else {
        //未选择图片
            log.info("图片扩展名不能为空");
            result.put("error",1);
            result.put("message","该图片扩展名为空，请重新选择")
            return result;
        }
    }

以上就是简单的kindEditor使用方法。