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

最新推荐文章于 2021-07-01 21:56:06 发布

choufuluo1840

最新推荐文章于 2021-07-01 21:56:06 发布

阅读量144

点赞数

原文链接：https://my.oschina.net/Blanicy/blog/365130

版权

首先要介绍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

choufuluo1840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
summernote富文本编辑器配合Jfinal实现异步上传

首先要介绍summernote这个编辑器。是基于bootstrap而使用的。由于IE8对Jquery和bootstrap都有要求。基本确定在Jquery-1.8.0这个版本左右。推荐一个网站bootstrap中文网，这里有很多的js,css静态资源，可以去下载。额外提一个，如果下载f...
复制链接

扫一扫