summernote富文本编辑器配合Jfinal实现异步上传

53 阅读 0 评论 35 点赞

我是靠谱客的博主儒雅日记本，最近开发中收集的这篇文章主要介绍summernote富文本编辑器配合Jfinal实现异步上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先要介绍summernote这个编辑器。

是基于bootstrap而使用的。由于IE8对Jquery和bootstrap都有要求。基本确定在Jquery-1.8.0这个版本左右。

推荐一个网站 bootstrap中文网，这里有很多的js,css静态资源，可以去下载。额外提一个，如果下载font-awesome.css

记得把相关的字体文件下下来。以上库中具有提供。

下面是summernote的初始化

<!DOCTYPE html>
<html lang='ZH_CN'>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <title>summernote</title>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script> 
  <！-- include bs-->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.css" />
  <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.js"></script>
  <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.0.2/css/font-awesome.css" >
  <!-- include summernote -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/summernote/0.5.9/summernote.css">
  <script type="text/javascript" src="http://cdn.bootcss.com/summernote/0.5.9/summernote.js"></script>
  <!--选择中文语言环境的js  这里下载   -->
  <!--http://pan.baidu.com/s/1gdIO0pX-->
   <script type="text/javascript" src="summernote-zh-CN.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#summernote').summernote({
        height: 200,
        width:820,
        focus:false,
        lang:'zh-CN',
        onImageUpload: function(files, editor, editable) {
        sendFile(files[0],editor,editable);
        } 
        });
    });
    function sendFile(file,editor,editable) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "upload/upload",/*填写后台上传文件的路径*/
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {/*url为上传成功后返回的图片路径*/
                editor.insertImage(editable, url);
        }
    });
}
  </script>
</head>
<body>
<!--此时的表单只是普通表单，并不是上传表单,-->
<form action="upload/subform" method="post">
    <！-- id必须为summernote-->
  <textarea id="summernote" name="areaCode">${areaCode}</textarea>
  <button type="submit" class="btn btn-default">submit</button>
</form>
</body>
</html>

以上HTML代码
关于summernote.js源码问题 因为默认的文件样式是无法修改的。只能曲线救国了。
找到源码中 ctrl+f  找note-image-input 。
给这个文件的input加个属性 style='display:none;'
然后再这个input前面再加个button 加上事件 onclick='$(this).next().click();'
通过这个按钮触发选择文件的click事件。
再附上我自己写的按钮样式
.mybtn{
width:100px;
height:30px;
display:inline-block;
background-color:rgb(91,183,91);
border:1px solid rgb(91,183,91);
border-radius:3px;
color:white;
font-size:14px;
font-family:微软雅黑;
cursor:pointer;
text-align:center;
vertical-align: center;
box-shadow:0px 0px 1px 1px rgb(91,160,91);
}

效果图就是这样的：

JFinal 后台

//表单接收
public void subform(){
String areaCode = getPara("areaCode");
setAttr("areaCode", areaCode);
render("/index.jsp");
}
//关于上传 请参考我的另一篇记录
public void upload(){
UploadFile uploadFile = getFile();
File f = Util.renameFile(uploadFile, "");
if(f!=null){
        //upload为默认的文件存放路径
renderText("upload/"+f.getName());
}
}

请检查自己的相关jar包、路由配置等信息，以免不必要的错误。

感谢Github上贡献的开发者，

转载于:https://my.oschina.net/Blanicy/blog/365130