在jsp页面添加富文本编辑器kindeditor

最新推荐文章于 2024-07-30 11:24:32 发布

我爱吃菠菜

最新推荐文章于 2024-07-30 11:24:32 发布

阅读量6.5k

点赞数 7

本文链接：https://blog.csdn.net/love_spinach/article/details/80882374

版权

Java 同时被 3 个专栏收录

8 篇文章 2 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

jsp

1 篇文章 0 订阅

订阅专栏

近来，博主有一个个人网站想要更新（网站主要是实时资讯类的）。因为是资讯网站，每次在发资讯的时候，文字的样式以及图片都无法进行固定化，而且都不美观，后来想起富文本编辑器来着，所以接下来为大家带来kindeditor这一款富文本编辑器的使用。

简介
点这里：kindeditor的官网地址
按照如下步骤：

下载完压缩包，解压缩到本地。

这里就不对每个包的用途进行解释了，对目录asp asp.net php 进行删除，剩下的就是我们想要的包。

由于项目中jsp页面的代码过多，不易分析，博主写了个demo，核心代码是一样的。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>富文本编辑器</title>
        <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
        <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
        <script type="text/javascript">  
   var editor;
        KindEditor.ready(function(K) {
            editor = K.create('textarea[name="content"]', {
                resizeType: 1,
                 uploadJson : '/wenjiqiwu/upload.do',// 上传图片接口  项目名（此处项目名是wenjiqiwu）+上传图片的路径
                 filePostName: 'imgFile',// name属性默认值 
                allowPreviewEmoticons: false
            });
        });

        function save() {
            //取得HTML内容?
            //同步数据后可以直接取得textarea的value?
            editor.sync();
            html = document.getElementById('addeditor_id').value; //原生API
            $("#schtmlnr").val(html); //把KindEditor产生的html代码放到schtmlnr里面，用于提交
            return true;
        }
</script> 
    </head>

    <body>
        <form action="addNews.do" method="post" onsubmit="return save();">
        <div>
                <textarea id="addeditor_id" name="content" style="width:100%;height:600px;border: 0 none;visibility:hidden;"></textarea>
            <textarea rows="" cols="" name="ncontent" id="schtmlnr" style="display:none;"></textarea>
        </div>
        <input type="submit" value="提交" " />
        </form>
    </body>

</html>

这里写图片描述
这里面强调一点，富文本编辑器的图片上传以及多图片上传的js代码片段：

还有一点就是，富文本编辑器在表单提交的时候，文本域中获得的值总是为null，后来博主是利用隐藏域解决了。

图片上传我是用的阿里云的OSS,大家也可以将图片存在本地，附上图片上传的代码：

@RequestMapping("/upload")
     public @ResponseBody KindEditorResult uploadImg(  
                @RequestParam("imgFile") MultipartFile imgFile) {  
            KindEditorResult result = new KindEditorResult();  

            try {  
                CommonsMultipartFile cf= (CommonsMultipartFile)imgFile; 
                DiskFileItem fi = (DiskFileItem)cf.getFileItem(); 
                File file = fi.getStoreLocation();
                 String Objectkey = "www/news/"+System.currentTimeMillis()+"_"+imgFile.getOriginalFilename();
                  String URL=OSSUtil.uploadFile(Objectkey, file);
                result.setError(0);  
                result.setUrl(URL);    
            } catch (Exception e) {  
                result.setError(1);  
                result.setMessage("上传图片出错！");  
            }  

            return result;  
        }

图片上传返回实体：

public class KindEditorResult {
      private Integer error;// 0成功 1失败  
        private String url;// 上传成功时路径  
        private String message;// 上传失败时信息
        public Integer getError() {
            return error;
        }
        public void setError(Integer error) {
            this.error = error;
        }
        public String getUrl() {
            return url;
        }
        public void setUrl(String url) {
            this.url = url;
        }
        public String getMessage() {
            return message;
        }
        public void setMessage(String message) {
            this.message = message;
        }

}