[转]百度Ueditor的基本配置和照片的上传

最新推荐文章于 2021-07-28 11:41:03 发布

C.Hang

最新推荐文章于 2021-07-28 11:41:03 发布

阅读量356

点赞数

分类专栏： ueditor 文章标签：百度

ueditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近领导指派个任务,要使用ueditor上传图片,第一次不会用,发现以下这篇博客比较适合初次使用的人,故转载

原文地址:http://blog.csdn.net/shaochong047/article/details/52673648?locationNum=13

原文作者:http://blog.csdn.net/shaochong047

最近刚弄了百度富文本的基本使用，拿来跟大家分享一下。

1.下载，http://ueditor.baidu.com/website ，最正规的下载网站，百度一下，随处可见。

2.解压下载的文件

3.把这些东西都复制到你的工程的跟目录下，这里我以sts为例：

4.有的项目可能需要把最下方的几个jar包再导入一遍，不用介意，再重新导入一遍就是了。ueditor.all.js ueditor.config.js ,ueditor.parse.js, 这三个就够了。

5.直接打开index.html就可以使用神奇的ueditor了。（http://localhost:8080/工程名称/ueditor/index.html)

6.如果你想要上传图片，还要进行相关配置，先来看ueditor.js的配置，

注意画红的部分，尽量别写错了。

7.然后就是config.json的配置，这里才是重头戏，看仔细了。

千万注意以上的两个配置，记住了

8.配置完成，刷新或重启，就可以实现文件的上传了。

9.下面写一下自己的测试代码（主要是加强自己记忆）

update.jsp

[html]view plain copy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <script type="text/javascript" src="ueditor/ueditor.config.js"></script>    
 <script type="text/javascript" src="ueditor/ueditor.all.js"></script>  
 <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>  
 <title></title>  
 <link rel="stylesheet" type="text/css" href="css/default.css" />  
 <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />  
 <link rel="stylesheet" type="text/css" href="js/themes/default/icon.css" />  
 <link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/default/easyui.css"/>  
 <link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/icon.css"/>  
 <link rel="stylesheet" type="text/css" href="jqueryeasyui/demo/demo.css"/>  
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>  
 <script type="text/javascript" src="js/jquery.json-2.4.js"></script>  
 <script type="text/javascript" src="js/json2.js"></script>  
 <script type="text/javascript" src="js/jQuery.easyui.js"></script>  
 <script type="text/javascript" src="jqueryeasyui/jquery.easyui.min.js"></script>  
 <script type="text/javascript" src="jqueryeasyui/easyui-lang-zh_CN.js"></script>  
   
 </head>  
 <body>  
       
  <div id="mainPanle" scrolling="no" region="center"   
                  style="background: #ffffff; overflow:hidden;width: 1100px; height: 630px;margin: 15px  auto   0px   auto;overflow: hidden;padding:  0px 0px 0px  0px;border:2px #ffffff solid;"  >      
   
 <div id="form"   style="padding:3px   auto  9px  auto;margin:67px  auto  9px  auto;width:400px;border:solid 2px #91b5e7;height:300px;">  
  <c:if test="${!empty error}">  
        <c:out value="${error}" />  
 </c:if>     
    
  <script type="text/javascript">  
 var editor = new baidu.editor.ui.Editor({   
     toolbars:[['Spechars','Emotion','InsertImage','bold','Italic','ForeColor','FontFamily','FontSize',]],  
     textarea:'content' });  
  editor.render("editor");  
 </script>  
   
             <form action="<c:url value="addnews.html"/>" name="aname"  
                 style="padding: 3px auto 9px auto; margin: 67px auto 9px auto; width: 240px; border: solid 0px #91b5e7; height: 165px;"  
                 method="post" enctype="multipart/form-data">  
   
   
                 主题：<input type="text" name="theme" placeholder="描述"><br />  
                     模块:<input type="text" name="plate"></input> <br /> <script  
                         type="text/plain" id="editor" name="content"></script> <input  
                     type="submit" value="上传">      <input  
                         type="reset" value="取消"> 备注：<br />  
                             1.支持的文件格式是jpg/png/jpeg/gif<br /> 2.文件大小应小于1M<br />  
                             3.请不要上传与版权/名誉相关的图片 <br />  
                         <br />  
                         <p></p>  
                             <hr></hr>  
                             <p>  
                                 <p>  
                                     <p>  
                                         <p>  
                                             <p></p>  
                                         </p>  
                                     </p>  
                                 </p>  
                             </p>          
             </form>  
   
             <div  >  
   
   
   
   
 <div  id="clear"></div>  
         </div><!--form-->  
   
   
   
     </div><!--mainPanle-->  
 <!--</div>end   mainPanle1-->  
   
   
   
   
 </body>  
 </html>  

后台接受代码：

[html]view plain copy 
   
 @RequestMapping(value="/addnews.html")  
     @ResponseBody  
     public String newsAdd(Core core,HttpServletRequest request) throws ServletException, Exception  
     {  
         System.out.print(123);  
         // 获得表单传过来的几个数据  
                 String theme = core.getTheme();  
                 String content = core.getContent();  
                 int plate = core.getPlate();  
                 System.out.print(plate);  
                 String URL = request.getContextPath()+"/"+"ueditor/jsp";  
                 SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");  
                 Date newsDate =new Date();  
                 String date =format.format(newsDate);  
                 String imageURL = URL+"/upload/"+date+".jpg";  
                 Core core1 = new Core();  
                 core1.setTheme(theme);  
                 core1.setContent(content);  
                 core1.setPlate(plate);  
                 core1.setPicurl(imageURL);  
                 if (tryCatchCoreService.saveCore(core1)) {  
   
                     return returnStatus.Success;  
                 }  
   
                 else {  
                     return returnStatus.Fail;  
                 }  
     }  

这是自己的效果图，虽然很丑，但是成功了。

暂时就是这样，加强记忆，也希望对大家有帮助。

C.Hang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]百度Ueditor的基本配置和照片的上传

最近领导指派个任务,要使用ueditor上传图片,第一次不会用,发现以下这篇博客比较适合初次使用的人,故转载原文地址:http://blog.csdn.net/shaochong047/article/details/52673648?locationNum=13原文作者:http://blog.csdn.net/shaochong047最近刚弄了百度富文本的基本使用，拿来跟大
复制链接

扫一扫