使用jQuery插件和FCK实现csdn博客功能

 

页面代码:

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="FCK" uri="http://java.fckeditor.net" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>

 


 <script type="text/javascript" src="fckeditor/fckeditor.js"></script> 
 <link href="js/uploadify.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/swfobject.js"></script>
 <script type="text/javascript" src="js/jquery.uploadify.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  $("#uploadify").uploadify({
 
   'uploader'       : 'js/uploadify.swf',
   'script'         : 'upload',            //servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif' 如果是.jsp,我还加上了'scriptData'和'method'
   'scriptData':   {'x':$("#nodeid").attr("value")},
   'method':'post',
   'cancelImg'      : 'js/cancel.png',
   'folder'         : 'uploads',
   'queueID'        : 'fileQueue',
   'auto'           : true,
   'multi'          : false,
   'buttonText':  'upload',
   'simUploadLimit' : 10, //一次同步上传的文件数目 
    'sizeLimit'  :19871202, //设置单个文件大小限制,单位为byte 
   'queueSizeLimit' : 10,
   'fileDesc': '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的 
    'fileExt': '*.jpg;*.gif;*.jpeg;*.png',//允许的格式
    onComplete: function (event, queueID, fileObj, response, data) {
    var value = response ;

   
   $("#fileQueue").html(value);
                                                   
    },
    onError: function(event, queueID, fileObj) { 
     alert("文件:" + fileObj.name + "上传失败"); 
    }, 
    onCancel: function(event, queueID, fileObj){ 
     alert("取消了" + fileObj.name); 
      }
  })
 })
 
 function getEditorHTMLContents(EditorName)
  {
      var oEditor = FCKeditorAPI.GetInstance(EditorName);
      return (oEditor.GetXHTML(true));
  }
  function SetEditorContents(EditorName,ContentStr)
  {
      var oEditor = FCKeditorAPI.GetInstance(EditorName);
      oEditor.SetHTML(ContentStr);
  }


  function setImage(EditorName,imageName){
   var oEditor = FCKeditorAPI.GetInstance(EditorName);
      var contents= oEditor.GetXHTML(true);
  var imgPath = contents+ "<img src ="+imageName + " />";
   SetEditorContents('FCKeditor1',imgPath);
  }
 </script>

 
 
  </head>
 
  <body>
    uThis is my JSP page     <br>
 

   
    
 <!--<script type="text/javascript">
    var oFck=new FCKeditor('FCKeditor1');
    oFck.BasePath="/fck1/fckeditor/";
    oFck.Create();
    </script>
   
     --><form action = "result.jsp"  method= "post">
 
      <textarea name ="FCKeditor1" rows="" cols="">利用Javascript取和设FCKeditor值也是非常容易的,如下:<br />
// 获取编辑器中HTML内容<br />
function getEditorHTMLContents(EditorName) {&nbsp;<br />
var oEditor = FCKeditorAPI.GetInstance(EditorName);&nbsp;<br />
return(oEditor.GetXHTML(true));&nbsp;<br />
}<br />
// 获取编辑器中文字内容<br />
function getEditorTextContents(EditorName) {&nbsp;<br />
var oEditor = FCKeditorAPI.GetInstance(EditorName);&nbsp;<br />
return(oEditor.EditorDocument.body.innerText);&nbsp;<br />
}<br />
// 设置编辑器中内容<br />
function SetEditorContents(EditorName, ContentStr) {&nbsp;<br /></textarea>
        <script type="text/javascript">
           
            var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
            oFCKeditor.BasePath    = "/fck1/fckeditor/";
            oFCKeditor.Value =''  ;
             oFCKeditor.Height = 400 ;
             oFCKeditor.Width = 500 ;
            oFCKeditor.ReplaceTextarea() ;
          

        </script>
        <br />
        <input type="submit" value="获取值" οnclick="document.getElementById('txtContent').value = getEditorHTMLContents('FCKeditor1'); return false;"/>
        <br />
        <input id="txtContent" type="text" />
        <input type="submit" value="设置值" />
        <input type="button" value="图片超链接"  οnclick="setImage('FCKeditor1','test.jpg')"/>
    </form>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消所有上传</a></p>
<input type="text" name="nodeid" id="nodeid" value="inputtxtvalue" />
   

  </body>
</html>

 

 

后台Servlet处理方法:

 

 response.setContentType("text/html; charset=utf-8");
  request.setCharacterEncoding("utf-8");
  PrintWriter out = response.getWriter();
  
  System.out.println("request:"+request.getParameterNames());
  Map map = request.getParameterMap();
  System.out.println(map.size());
  System.out.println(map.keySet().toString());
   String savePath = this.getServletConfig().getServletContext() 
   
         .getRealPath(""); 

 savePath = savePath + "/uploadsFolder/"; 

 File f1 = new File(savePath); 

 System.out.println(savePath); 

 if (!f1.exists()) { 

     f1.mkdirs(); 

 } 

 DiskFileItemFactory fac = new DiskFileItemFactory(); 

 ServletFileUpload upload = new ServletFileUpload(fac); 

 upload.setHeaderEncoding("utf-8"); 

 List fileList = null; 

 try { 

     fileList = upload.parseRequest(request); 
     System.out.println(request.getParameter("uploadify"));

 } catch (FileUploadException ex) { 

     return; 

 } 

 Iterator<FileItem> it = fileList.iterator(); 

 String name = ""; 

 String extName = ""; 

 while (it.hasNext()) { 

     FileItem item = it.next(); 

     if (!item.isFormField()) { 

         name = item.getName();
         System.out.println("文件name:"+item.getFieldName());
         System.out.println("文件ContentType:"+item.getContentType());
        
         System.out.println("文件size:"+item.getSize());
  

         long size = item.getSize(); 

         String type = item.getContentType(); 

         System.out.println(size + " " + type); 

         if (name == null || name.trim().equals("")) { 

             continue; 

         } 

         //扩展名格式:  

         if (name.lastIndexOf(".") >= 0) { 

             extName = name.substring(name.lastIndexOf(".")); 

         } 

         File file = null; 

         do { 

             //生成文件名: 

             name = UUID.randomUUID().toString(); 

             file = new File(savePath + name + extName); 

         } while (file.exists()); 

         File saveFile = new File(savePath + name + extName); 

         try { 

             item.write(saveFile); 

         } catch (Exception e) { 

             e.printStackTrace(); 

         } 

     } 

 } 
 
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
System.out.println(basePath+"uploadsFolder/"+name + extName);

StringBuffer stringBuffer = new StringBuffer();
stringBuffer.append("<a href = '");
stringBuffer.append(basePath+"uploadsFolder/"+name + extName);
stringBuffer.append(" '>"+basePath+"uploadsFolder/"+name + extName+"</a>");
stringBuffer.append("<input type = 'button' value = '插入正文' οnclick=/"setImage('FCKeditor1','"+path+"/uploadsFolder/"+name + extName+"')/"/>");
System.out.println(stringBuffer.toString());
response.getWriter().print(stringBuffer.toString()); 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值