在做后台管理到时候, 写文章需要把写到内容还按照编辑时到文章进行保存, 这就用到了富文本编辑器, 看了大家说的,百度富文本编辑器不错,就开始了Jfinal和百度富文本编辑器到整合。
UEditor的功能非常强大,几乎是实现了一个富文本编辑器所有的功能,而且可以高度定制,可以自由选则留下或者去掉哪些功能。甚至还可以在里面添加自己的图标来实现自己定义的一些功能。由于我在使用过程中踩过一些坑,所以就记录一下。
1、首先需要做的就是下载 UEditor 所需要的JAR包与其他的js文件,这些东西百度的开发团队已经按分类打包好了,我们需要做的就是选择并下载:
由于我用到是jsp,所以选择了jsp版本 ,而且选择了UFT-8编码方式的版本,点击下载之后就可以直接下载了。
2.下载下来的文件是一个压缩包,接着在你的工程根目录下创建一个 ueditor 文件夹,把之前下载下来的文件解压,复制到创建好的文件夹内。这里用的tomcat服务器,所以是在
webapp下面到目录里建到ueditor文件夹
由于Jfinal在配置上对于静态文件不会怎么拦截,所以就不再配置.js/.png之类到了。进行下一步
本项目用到是maven,所以在maven里把ueditor需要到jar包进行下载
<!-- 百度富文本编辑器所需要的jar start --> <dependency> <groupId>cn.songxinqiang</groupId> <artifactId>com.baidu.ueditor</artifactId> <version>1.1.2-edit-1.0</version> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160810</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency> <!-- jfinal 的cos必须有,否则无法使用。 --> <dependency> <groupId>com.jfinal</groupId> <artifactId>cos</artifactId> <version>2017.5</version> </dependency> <!-- 百度富文本编辑器所需要的jar end -->
(3)配置完成之后,你可以尝试访问 http://localhost:8080/你的项目名/ueditor/index.html 这个地址,把汉字部分替换为你的项目名,如果显示以下的页面,那么就说明你的基本配置已经完毕了,可以在页面中使用了。
(4)接下来,就需要配置图片上传的路径了,配置文件的路径为 /ueditor/jsp/config.json
由于我在后台进行了配置,所以这个config.json就不再进行配置
(5)接着就可以按照需求在相关页面中引入这个功能了,首先你需要在原本需要文本编辑的地方添加一个文本域标签,命名之后在js代码中替换。在编写js代码之前,需要先引入以下的js文件:
- <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
- <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
- <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
- <script type="text/javascript">
- var ue = UE.getEditor('content');
- </script>
把文本域标签的代码添加到你需要的地方即可
- <textarea name="content" id="content" style="width: 800px; height: 400px; margin: 0 auto;"></textarea>
<% DIRECTIVE SAFE_OUTPUT_OPEN; var headContent = { include("/pages/template/head.html"){} %> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width:100%; } </style> <script type="text/javascript"> var ue = UE.getEditor('content'); </script> <script type="text/javascript"> var oper = { addImg:function () { var url = 'article/addImg'; var title = '添加图片'; Iframe(url, 800, 800, title); }, save:function(id){ if(!validForm()) { return false; } id = id || '0'; var hah= $("#actform").serialize();//获取表单里到内容 //console.log(hah); var html=UE.getEditor('content').getContent();//获取富文本编辑器里到所有内容 var args="title="+$('#titles').val()+"&url="+html+"&imgurl="+$('#resultImgBack')[0].src; var url = 'article/save/'+id; //alert(args); $.ajax({ data:args, url:url, type:"post", success:function (data) { console.log(data); alert("文章保存成功"); }, error:function (data) { alert("文章保存失败"); } }) return true; }, //刷新背景图 flash:function () { $.ajax({ url:"article/flashImgUrl", success:function (data) { console.log("后台返回到结果是:"+data.path) var result= data.result; if (result ==1){ $("#resultImgBack").attr("src",data.path);//设置对应到imgsrc console.log($("#resultImgBack").attr("src")); $("#resultImgBack").show(); $("#defaultbackImgSrc").hide(); } } }) } }; </script> <% }; var bodyContent = { %> <!-- 上传背景图 start --> <% if(model.imgurl == null){ %> <form class="form-horizontal"> <table> <tr> <td>添加背景图</td> <td> <button type="button" class="btn btn-primary" onclick="oper.addImg();">添 加</button></td> </tr> </table> </form> <%} %> <% if(model.imgurl == null){ }%> <!-- 上传背景图 end --> <form name="form1" id="actform" action="" method="post" class="form-horizontal" enctype="multipart/form-data" role="form" > <input type="hidden" name="articleNew.id" value="${model.id}" /> <table class="table"> <% // 列表头部%> <tr> <td>标题</td> <td> <input class="form-control" type="text" id="titles" name="articleNew.title" value="${model.title}" valid="vtext" validname="标题" /> </td> </tr> <tr> <td>背景图</td> <td name="articleNew.imgurl"> <% if(model.imgurl !=null){ %> <img id="resultImgBack" src="${model.imgurl}" /> <%}%> <% if(model.imgurl ==null){ %> <img id="defaultbackImgSrc" src="http://localhost:8089/img/u/police.jpg" /> <img id="resultImgBack" src="" style='display:none;'/> <span><button id="flashButton" class="btn btn-primary" type="button" onclick="oper.flash()">上传图后请刷新</button> </span></td> <% }%> </tr> <tr> <td>文章内容</td> <td> <textarea name="articleNew.url" id="content" style="width: 800px; height: 400px; margin: 0 auto;">${model.url}</textarea> </td> </tr> </table> <div style="height: 50px;clear: both;"> </div> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container" style="padding: 5px 0px 5px 0px;text-align: center;"> <button class="btn btn-primary" type="button" onclick="oper.save(${model.id!'0'}); return false;">保 存</button> <button class="btn btn-default" onclick="closeIframe();return false;">关 闭</button> </div> </nav> </form> <%}; %> <% layout("/pages/template/_layout.html",{head:headContent,body:bodyContent}){ %> <%} DIRECTIVE SAFE_OUTPUT_CLOSE; %>
本页面用到iframe, 请忽视这些, 只看百度富文本编辑器所用到到内容,其中要注意到就是: button按钮中,一定要给他设定type=“button” ,否则会报错
,我被这个原因坑了一天。
(6) 后台关于百度富文本编辑器upload到方法
/** * 上传文章的图片 * (百度富文本编辑器统一调用控制器 ) * @Clear 清除当前方法以及上一级路径的拦截,确保前端页面在没有登录 的情况下也能进行请求 */ @Clear public void upload(){ if ("config".equals(getPara("action"))) { render("/ueditor/jsp/config.json"); return; } UploadFile file = getFile("upfile"); //获取文件 String fileName = file.getFileName(); String[] typeArr = fileName.split("\\."); String orig = file.getOriginalFileName(); long size = file.getFile().length(); String url = file.getUploadPath();//上传路径 //获取相对地址 String serverIp = getRequest().getServerName();//获取IP Integer serverPort = getRequest().getServerPort();//获取端口号 int index=url.lastIndexOf("u");//获取upload的首个位置 String uu=url.substring(index);//获取upload这几个单词 String urls="http://"+serverIp+":"+serverPort+"/"+uu+"/"+fileName; System.out.println("图片地址是:======="+urls); Ret ret = Ret.create("state", "SUCCESS") //下面这几个都是必须返回给ueditor的数据 .set("url", urls) //文件上传后的路径 .set("title", fileName) //文件名称 .set("original", orig) .set("type", "."+typeArr[1]) .set("size", size); renderJson(ret); }
这些写完后,就可以进行编辑文章了。
下面让大家看看我到编辑页面
后面到保存就和以前到一样了。 就不再写了。
由于又用到了上传图片并裁剪,所以用到了jcrop插件, 下面把我在网上找到到整合给大家发一下 Jfinal-jcrop插件整合 。
其他不说了,直接上代码:
<% DIRECTIVE SAFE_OUTPUT_OPEN; var headContent = { include("/pages/template/head.html"){} %> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!--<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> 建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败–> 这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文–> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>--> <script type="text/javascript" charset="utf-8" src ="${pageContext.request.contextPath}/jcrop/js/jquery.Jcrop.min.js"> </script> <link rel ="stylesheet" charset="utf-8" href="${pageContext.request.contextPath}/jcrop/css/jquery.Jcrop.css" type="text/css"/> <!--图片上传的js start --> <script type="text/javascript"> var opers; jQuery(function($){ //页面方法 opers={ add : function() { // console.log("进入上传图片;;;;"); if($("#image").val() == ""){ alert("请选择一个图片文件,再点击上传。"); return; }else if(!/(.*\.jpg$)|(.*\.jpeg$)|(.*\.png$)|(.*\.gif$)/i.test($("#image").val())){ alert("请选择jpg,jepg,png格式到图片进行上传!"); return; } else{ $("#uploadImageForm").ajaxSubmit({ dataType: 'json', success:function(result,status){ if(result.success){ var url=result.path; console.log("图片地址:"+url); $("#currentPhoto").attr("src",url); $("#currentPhoto").show(); $("#save").show(); $("#add").hide(); $('#currentPhoto').Jcrop({ setSelect: [ 10, 10, 210, 210 ], aspectRatio: 16/9,//选框宽高比。说明:width/height scale:true, maxsize:[160,90],// 选框最大尺寸 // allowResize:false, //允许选框缩放 onChange: showCoords, onSelect: showCoords }); }else{ alert(result.msg); } }, error: function(result,status,e){ alert(status); } }); return false; } }, save_img:function () { var args = 'left='+$("#img_left").val()+'&top='+$("#img_top").val()+'&width='+$("#img_width").val()+'&height='+$("#img_height").val()+'&images='+$("#currentPhoto")[0].src; $.ajax({ url:'/article/saveBackImg?'+args, type:'post', dataType:'json', success : function(data){ alert(data.msg); // window.close(); //location.href="/user"; } }); }, }; }); function showCoords(c){ $('#img_left').val(c.x); $('#img_top').val(c.y); $('#img_width').val(c.w); $('#img_height').val(c.h); }; /*function closeIfr() { window.parent.ymPrompt.doHandler("close",true);//关闭本身到页面 }*/ </script> <!-- 图片上传的js end --> <% }; var bodyContent = { %> <!--上传背景图 start--> <form id="uploadImageForm" class="form-horizontal" action="/article/uploadBackdropImg" method="post" enctype="multipart/form-data" role="form"> <table > <div style="height:30px;align:center"> <tr> <td>图片文件(不得超过2M)</td> <td><input id="image" name="image" class="form-control" type="file" style="width:300px; overflow:hidden; border:none;"/></td> <div class="container" style="padding: 5px 0px 5px 0px;text-align: center;"> <td> <button id="add" onclick="opers.add()" type="button" class="btn btn-primary"/>上传</td> </div> </tr> </div> </table> </form> <div style='max-width:730px;'> <img id="currentPhoto" name="imgages" src="" alt="666666" style='display:none;max-width:730px;'></img> </div> <form class="form-horizontal"> <table> <tr> <td><button id="save" type="button" value="保存" class="btn btn-primary" onclick="opers.save_img()" style='display:none;' />保存图片 <span> <button class="btn btn-default" onclick="closeIframe();">关 闭</button></span> </td> </tr> </table> </form> <form id='form_save' action="" style='display:none;'> <input type='hidden' id='img_left' name='left' value='0'/> <input type='hidden' id='img_top' name='top' value='0'/> <input type='hidden' id='img_width' name='width' value='0'/> <input type='hidden' id='img_height' name='height' value='0'/> </form> <!--上传背景图 end --> <%}; %> <% layout("/pages/template/_layout.html",{head:headContent,body:bodyContent}){ %> <%} DIRECTIVE SAFE_OUTPUT_CLOSE; %>
后台相应到代码:
/** * 上传背景图片 */ public void uploadBackdropImg(){ // String path = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()); UploadFile file = getFile("image"); File source = file.getFile(); String fileName = file.getFileName(); String extension = fileName.substring(fileName.lastIndexOf(".")); if(!".png".equals(extension) && !".jpg".equals(extension)){ setAttr("success", false); setAttr("msg", "必须是图片文件才能上传!"); }else if(source.length()>MAX_SIZE){ setAttr("success", false); setAttr("msg", "图片大小不能超过2M!"); }else{ try { String url = file.getUploadPath();//上传路径 //获取相对地址 String serverIp = getRequest().getServerName();//获取IP Integer serverPort = getRequest().getServerPort();//获取端口号 int index=url.lastIndexOf("u");//获取upload的首个位置 String uu=url.substring(index);//获取upload这几个单词 String urls="http://"+serverIp+":"+serverPort+"/"+uu+"/"+fileName; setAttr("path", urls); setAttr("success", true); Ret ret = Ret.create("success",true) .set("path", urls) ; renderJson(ret); } catch (Exception e) { setAttr("success", false); setAttr("msg", "上传失败,请重新上传!"); } } } /** * 保存裁剪后到图片 */ public void saveBackImg() throws IOException { JSONObject json= new JSONObject(); int left= getParaToInt("left"); int top= getParaToInt("top"); int width= getParaToInt("width"); int height= getParaToInt("height"); String imgurl=getPara("images"); int index=imgurl.lastIndexOf("/"); String FileImgName=imgurl.substring(index-6);//后台图片到名字 getClass().getResourceAsStream(FileImgName); URL relativelyPath=ArticleController.class.getResource("/");//得到的是当前的classpath的绝对URI路径。 int baseUrl=relativelyPath.toString().indexOf(":");//获取第一个:的位置 int endUrl=relativelyPath.toString().indexOf("target");//获取target的位置 String baseFile=relativelyPath.toString().substring(baseUrl+2,endUrl);//截取需要到路径名 System.out.println("项目的根路径"+baseFile); File source = new File(baseFile+"target/WXXAdminProject/"+FileImgName); String fileName = source.getName(); System.out.println("图片到位置"+fileName); //获取相对地址 String serverIp = getRequest().getServerName();//获取IP Integer serverPort = getRequest().getServerPort();//获取端口号 String urls="http://"+serverIp+":"+serverPort+"/img/u/"+fileName; System.out.println("urls"+urls); boolean isSave = saveImage(source, PathKit.getWebRootPath()+"/img/u/"+fileName,top,left,width,height); if(isSave){ String sql="insert into wx_news\n" + "values(SEQ_WX_NEWS.NEXTVAL,?,?,?,?,?,?)"; Integer userid = getSessionUser().getUserID(); int result=Db.update(sql,getNow(),null,userid,0,null,urls); json.put("msg", "图片裁剪成功!"); }else{ json.put("msg", "图片裁剪失败!"); } renderJson(json); }
到此就完成了。
又学到新东西,每天进步一点点。