Jfinal整合百度富文本编辑器

其他 2018-06-04 12:46:15 阅读次数: 0

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



到此就完成了。


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

猜你喜欢

转载自blog.csdn.net/qq_35357001/article/details/78228639
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022