ckeditor总结 java

网上有很多关于ckeditor的文章,就一个字“乱”;

下面总结下:

1、ckeditor本身的功能强大,没有必要使用ckfinder;

2、插入图片或者FLash的时候,只需要开启其功能即可;

3、网上有的说,在图片模块上添加一个上传按钮,真心没有必要,ckeditor的上传图片功能很友好的;

4、目前我的实验在火狐上没有问题,增在解决IE兼容的问题……

实验:

1、下载ckeditor

2、导入项目,就是解压后将ckeditor文件夹放在webroot下;

3、在jsp页面使用插件:


<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<tr><textarea id="editor1" name="articleContent"></textarea>
<ckeditor:replace replace="editor1" basePath="/huanghe/ckeditor/"/>
</tr>

效果:

192936996.png

4、大家关心是开启图片和FLASH功能:

在配置文件config.js中这样写:

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
config.filebrowserWindowWidth = '800';
config.filebrowserWindowHeight = '800';
config.language = "zh-cn";
config.skin = 'office2003';
// з
//  config.enterMode = CKEDITOR.ENTER_BR;
// shift+Enter
//config.shiftEnterMode = CKEDITOR.ENTER_BR;
//
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;
config.enterMode = CKEDITOR.ENTER_P;//换行
config.pasteFromWordRemoveStyles = false; //去除复制来的样式
//当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;
//当用户键入TAB时,编辑器走过的空格数,(&nbsp;) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js
config.tabSpaces = 0;
//撤销的记录步数 plugins/undo/plugin.js
config.undoStackSize =20;
// ckeditor�J
//config.removePlugins = 'save';
config.filebrowserImageUploadUrl = "CkeditorUpload";
config.filebrowserFlashUploadUrl = "CkeditorUploadFlash";
};

说明:

config.filebrowserImageUploadUrl="CkeditorUpload";
config.filebrowserFlashUploadUrl="CkeditorUploadFlash";

这两行就开启了所需功能;使用ckfinder的时候,后面的url是ckfinder的上传处理器;现在我们不需要ckfinder了,就写自己的上传处理器.下面附上上传文件的代码:注意的是ckeditor上传图片和FLASH的对话框中,实际就是<inputtype="file"name="upload">,这一点很重要知道了name其他就好办了;

package org.whhn.utils;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.whhn.action.BaseAction;
import com.opensymphony.xwork2.ActionSupport;
public class CkeditorUpload extends BaseAction {
private File upload;
private String uploadContentType;
private String uploadFileName;
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;   }
public String execute() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//对文件进行校验
if(upload==null || uploadContentType==null || uploadFileName==null){
//out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'请选择上传文件\');");
out.println("</script>");
return null;
}
if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg"))
&& uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")) {
//IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
}else if(uploadContentType.equals("image/png") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){
}else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){
}else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){
}else{
// out.print("<font color=\"red\" size=\"2\">*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)</font>");
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件\');");
out.println("</script>");
return null;
}
if(upload.length() > 6000*1024){
// out.print("<font color=\"red\" size=\"2\">*文件大小不得大于6000k</font>");
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'文件大小不得大于6000k\');");
out.println("</script>");
return null;
}
//将文件保存到项目目录下
InputStream is = null;
try {
is = new FileInputStream(upload);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String uploadPath = ServletActionContext.getServletContext()
.getRealPath("img/");   //设置保存目录
File uploadFilePath = new File(uploadPath);
if (uploadFilePath.exists() == false){
uploadFilePath.mkdirs();
}
String fileName =  UUID.randomUUID().toString();  //采用UUID的方式随机命名
fileName += uploadFileName.substring(uploadFileName.length() - 4);
File toFile = new File(uploadFilePath, fileName);
OutputStream os = null;
try {
os = new FileOutputStream(toFile);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
byte[] buffer = new byte[1024];
int length = 0;
try {
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
is.close();
os.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//设置返回“图像”选项卡
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
String URL=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+ request.getContextPath()+"/";
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",\'" +URL+"img/"+fileName+ "\',\'\');");
out.println("</script>");
return null;
}
public String CkeditorUploadFlash(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//对文件进行校验
if(upload==null || uploadContentType==null || uploadFileName==null){
//out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'请选择上传文件\');");
out.println("</script>");
return null;
}
if(uploadContentType!=null){
if ((uploadContentType.equals("flash/swf") || uploadContentType.equals("flash/flv"))
&& uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".swf")) {
}
if ((uploadContentType.equals("flash/swf") || uploadContentType.equals("flash/flv"))
&& uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".flv")){
}
}else{
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'文件格式不正确(必须为.swf/.flv/文件\');");
out.println("</script>");
return null;
}
if(upload.length() > 10000*1024){
// out.print("<font color=\"red\" size=\"2\">*文件大小不得大于10m</font>");
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'\'," + "\'文件大小不得大于10m\');");
out.println("</script>");
return null;
}
//将文件保存到项目目录下
InputStream is = null;
try {
is = new FileInputStream(upload);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String uploadPath = ServletActionContext.getServletContext()
.getRealPath("flash/");   //设置保存目录
File uploadFilePath = new File(uploadPath);
if (uploadFilePath.exists() == false){
uploadFilePath.mkdirs();
}
String fileName =  UUID.randomUUID().toString();  //采用UUID的方式随机命名
fileName += uploadFileName.substring(uploadFileName.length() - 4);
File toFile = new File(uploadFilePath, fileName);
OutputStream os = null;
try {
os = new FileOutputStream(toFile);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
byte[] buffer = new byte[1024];
int length = 0;
try {
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
is.close();
os.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//设置返回“图像”选项卡
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
String URL=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+ request.getContextPath()+"/";
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",\'" +URL+"flash/"+fileName+ "\',\'\');");
out.println("</script>");
return null;
}
}



这样的话ckeditor就没有问题了!

194219653.png

194325754.png

194429196.png


你可能感兴趣的:(文章,ckeditor)