使用jQuery插件和FCK实现csdn博客功能
2011-03-05 15:01
851 查看
页面代码：
<%@ 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) { <br />
var oEditor = FCKeditorAPI.GetInstance(EditorName); <br />
return(oEditor.GetXHTML(true)); <br />
}<br />
// 获取编辑器中文字内容<br />
function getEditorTextContents(EditorName) { <br />
var oEditor = FCKeditorAPI.GetInstance(EditorName); <br />
return(oEditor.EditorDocument.body.innerText); <br />
}<br />
// 设置编辑器中内容<br />
function SetEditorContents(EditorName, ContentStr) { <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="获取值" onclick="document.getElementById('txtContent').value = getEditorHTMLContents('FCKeditor1'); return false;"/>
<br />
<input id="txtContent" type="text" />
<input type="submit" value="设置值" />
<input type="button" value="图片超链接" onclick="setImage('FCKeditor1','test.jpg')"/>
</form>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>
<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 = '插入正文' onclick=/"setImage('FCKeditor1','"+path+"/uploadsFolder/"+name + extName+"')/"/>");
System.out.println(stringBuffer.toString());
response.getWriter().print(stringBuffer.toString());
<%@ 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) { <br />
var oEditor = FCKeditorAPI.GetInstance(EditorName); <br />
return(oEditor.GetXHTML(true)); <br />
}<br />
// 获取编辑器中文字内容<br />
function getEditorTextContents(EditorName) { <br />
var oEditor = FCKeditorAPI.GetInstance(EditorName); <br />
return(oEditor.EditorDocument.body.innerText); <br />
}<br />
// 设置编辑器中内容<br />
function SetEditorContents(EditorName, ContentStr) { <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="获取值" onclick="document.getElementById('txtContent').value = getEditorHTMLContents('FCKeditor1'); return false;"/>
<br />
<input id="txtContent" type="text" />
<input type="submit" value="设置值" />
<input type="button" value="图片超链接" onclick="setImage('FCKeditor1','test.jpg')"/>
</form>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>
<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 = '插入正文' onclick=/"setImage('FCKeditor1','"+path+"/uploadsFolder/"+name + extName+"')/"/>");
System.out.println(stringBuffer.toString());
response.getWriter().print(stringBuffer.toString());
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能
- 使用jquery.cookie.js插件实现记住密码功能
- 使用jquery插件实现打印指定区域功能
- GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能
- 简单测试实现 博客园的头像上传功能 使用插件jquery jcrop+fineupload
- GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能
- jQuery实现换肤功能(使用cookie.js插件)
- 使用Jquery X-Menu 插件实现多选checkbox控件的功能
- ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
- 使用jquery插件【jquery.cookie】，实现【记住我】功能
- jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- C#实现越过CSDN博客中不能使用CSS的style标签功能
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 使用jquery插件【jquery.cookie】，实现【记住我】功能
- thinkphp使用ajax、jquery、Mysql实现了简单的客户端通信功能