Jfinal整合百度富文本编辑器

原创 2017年10月13日 17:25:06

在做后台管理到时候,  写文章需要把写到内容还按照编辑时到文章进行保存, 这就用到了富文本编辑器, 看了大家说的,百度富文本编辑器不错,就开始了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文件:

[html] view plain copy
  1. <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>    
  2. <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>    
  3. <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>    
然后就是手动地替换文本编辑的部分了,'content'是我的文本域标签名

[html] view plain copy
  1. <script type="text/javascript">  
  2. var ue = UE.getEditor('content');  
  3. </script>  

把文本域标签的代码添加到你需要的地方即可

[html] view plain copy
  1. <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);
    }



到此就完成了。


又学到新东西,每天进步一点点。

JFinal Web开发学习(十一)编辑已发布文章

JFinal Web开发学习(十一)编辑已发布文章代码:https://code.csdn.net/u012995856/jfinaltest/tree/master h-ui-admin使用ifr...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

SSM整合百度富文本编辑器ueditor二

传动门 http://blog.csdn.net/qq_34371461/article/details/78679993 正题: 修改config.json中的文件上传配置"...

java jsp 整合百度文本编辑器ueditor1_4_3-utf8-jsp 遇到的问题

java jsp 整合百度文本编辑器ueditor1_4_3-utf8-jsp 遇到的问题 1配置路径 ueditor.config.js 文件 2上传图片问题 jsp/config.json 文...

百度富文本编辑器和springMVC整合

  • 2017年10月29日 11:22
  • 16MB
  • 下载

[置顶]百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的dem...
  • a724888
  • a724888
  • 2017年03月08日 09:46
  • 1470

百度富文本编辑器压缩包

  • 2017年02月22日 14:49
  • 3.22MB
  • 下载

百度文本编辑器插件

  • 2016年04月07日 12:00
  • 2.79MB
  • 下载

为百度文本编辑器UEditor添加附件管理功能

最近朋友的一个项目需要一个文本编辑器,让我突然想起那个百度编辑器UEditor,功能比较齐全而且开源,但也有很多bug和不足。 http://ueditor.baidu.com/website/...
  • my98800
  • my98800
  • 2016年11月02日 22:59
  • 2216
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jfinal整合百度富文本编辑器
举报原因:
原因补充:

(最多只允许输入30个字)