关于富文本框KindEditor的使用

最新推荐文章于 2025-07-29 11:24:09 发布

羡慕南飞的燕

最新推荐文章于 2025-07-29 11:24:09 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

分类专栏： java基础 KindEditor 文章标签： KindEditor

本文链接：https://blog.youkuaiyun.com/qq_41178295/article/details/80763971

本文介绍了如何使用富文本编辑器KindEditor，提供了官网和资源下载链接，详细讲解了前端后端的集成过程，特别是针对Linux环境下与JSP的兼容问题，以及动态配置编辑器功能的方法。内容包括上传图片、查看已上传文件、动态地图等功能，并展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 首先献上官网地址和资源

js，css等资源百度云链接：https://pan.baidu.com/s/1tbSeToJQ1BYsXNPKChX7Zg 密码：xry2

2.具体前端后端代码（html没有加入其他样式）

引入上面的js和css

<textarea id="description" name="goodConte" style="width:80%" rows="20">${goods.goodConte}</textarea>

$(function(){
    KindEditor.ready(function(K) {
        window.editor = K.create('#description',{
            items : [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', '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', 'multiimage',
                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                'anchor', 'link', 'unlink', '|', 'about'
            ],
                allowImageUpload:true,//允许上传图片
                allowFileManager:true,
                allowPreviewEmoticons : true,
                uploadJson : '../WxGoods/imageUpload',//富文本框图片上传
                fileManagerJson : '../WxGoods/imageManage',//富文本框图片查看
                urlType : "domain",
                afterBlur: function(){this.sync();}//解决表单通过ajax请求提交造成的提交不到后台的问题
        });
    }); 
});

//富文本框图片上传
@ResponseBody
@RequestMapping(value = "/imageUpload",method = RequestMethod.POST)
public Map<String, Object> imageUpload(HttpServletRequest request,HttpServletResponse response,RedirectAttributes ra) throws Exception {
	ServletContext application = request.getSession().getServletContext();
    String Path = application.getRealPath("/");
    File uploadDir1 = new File(Path);
        
        String savePath  = uploadDir1.getParent()+ "/file/KindEditor/";
        
        //展示到富文本框上的链接
        String saveUrl = "/file/KindEditor/";
         
         // 定义允许上传的文件扩展名
         HashMap<String, String> extMap = new HashMap<String, String>();
         extMap.put("image", "gif,jpg,jpeg,png,bmp");
         extMap.put("flash", "swf,flv");
         extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
         extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
 
         // 最大文件大小
         long maxSize = 1000000;
 
         response.setContentType("text/html; charset=UTF-8");
 
         if