1、ckeditor 需要的jar包:
ckeditor-java-core.jar
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
slf4j-api-1.5.8.jar
slf4j-simple-1.5.8.jar
2、在JSP页面引入<%@ taglib uri="http://ckeditor.com" prefix="fck"%>
引入js文件 <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
body标签:<fck:editor editor="myEditor" basePath="/ckeditor" value="this is content"></fck:editor>
3、配置的更改:(三种方式)
第一种:直接在ckeditor的核心js文件(ckeditor.js)中更改
第二种:自定义js文件将ckeditor.js文件中要更改的内容拷贝到自定义js文件中进行更改
注意:拷贝、更改内容要保持原来的格式
第三种:在页面的调用代码中实现对editor的实例进行配置(较麻烦)
4、一般更改的配置:
① ckeditor中 Ctrl键 ---- 换段落 shift+Ctrl 键----换行
需要改为 Ctrl键----换行 Shift+Ctrl键----换段落
更改的地方:ckeditor.js文件中找到 enterMode:1 改为 enterMode:2 shiftEnterMode:2 改为 shiftEnterMode:1
②工具栏的修改:可以将不需要的图标删除
在ckeditor.js中将不需要的删除(大约在11488行找到 toolbar_Full 将此中不需要的删除)
也可以将toolbar_Full中的代码拷贝到config.js中将不需要的删除
注意:工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,
“/”表示工具栏换行,“-”表示工具图标之间的中隔线“|”
③添加字体:在ckeditor.js文件中找到i.font_names= "……" 这句 在里面添加要增加的字体 i.fontSize_sizes 可更改字体
④更改表情符号:将要更换的表情图片拷贝到 ckeditor--plugins--smiley--image
在ckeditor.js中找到 i.smiley_images=[ ] 将图片名称填写到里面
并在i.smiley_descriptions=[] 中填写图片的对应提示信息
⑤更改背景色:在config.js中配置 config.uiColor = '#FF0080';
⑥更改工具栏上图标提示语的语言 在config.js中配置 config.language = 'fr'; ()
5、文件上传:(使用struts2)
① 首先,还是image.js这个文件,搜索“upload”可以找到这一段 ---- id:'Upload',hidden:true
实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。
② 上面的只是一个上传页面。也就相当于一个HTML的form表单,要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。
加入:
config.filebrowserUploadUrl="actions/ckeditorUpload";
"ckeditorUpload"是请求的URL,也就是点击这个按钮就会post到ckeditorUpload地址进行处理,这里指向的是Struts 2的一个Action。当然,也可以用servlet或者ASP、PHP等来处理请求。
③ 文件上传的控件相当于<input type="file" name="upload" .../>,其name是”upload”,知道了name那么就可以在Action中获取这个文件。
private File upload; //文件
private String uploadContentType; //文件类型
private String uploadFileName; //文件名
④ 如果上传的图片格式不正确,可以在上传界面进行提示。
这个提示不是ckeditor提示的,要在Action中响应。
HttpServletResponse response =ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
if(???){
out.print("<font color=\"red\"size=\"2\">*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)</font>");
return null;
}
⑤ nputStream is = newFileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg"); //设置保存目录
String fileName =java.util.UUID.randomUUID(); //采用UUID的方式随机命名
fileName+= uploadFileName.substring(uploadFileName.length() - 4);
File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();
这段代码是Struts 2上传图片的核心代码,把图片上传后保存在项目的某个目录下,并随机重命名。
⑥ 图片上传成功,在目录下也可以看到图片,至此图片上传成功。
到这里,要在Action中加入一段JS。
String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<scripttype=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')");
out.println("</script>");
有了这段代码,图片上传成功后,根据这里的
"img/postImg/" + filename
相对地址,就可以使用这个图片,直接转到“图像”页面
ckeditor-java-core.jar
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
slf4j-api-1.5.8.jar
slf4j-simple-1.5.8.jar
2、在JSP页面引入<%@ taglib uri="http://ckeditor.com" prefix="fck"%>
引入js文件 <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
body标签:<fck:editor editor="myEditor" basePath="/ckeditor" value="this is content"></fck:editor>
3、配置的更改:(三种方式)
第一种:直接在ckeditor的核心js文件(ckeditor.js)中更改
第二种:自定义js文件将ckeditor.js文件中要更改的内容拷贝到自定义js文件中进行更改
注意:拷贝、更改内容要保持原来的格式
第三种:在页面的调用代码中实现对editor的实例进行配置(较麻烦)
4、一般更改的配置:
① ckeditor中 Ctrl键 ---- 换段落 shift+Ctrl 键----换行
需要改为 Ctrl键----换行 Shift+Ctrl键----换段落
更改的地方:ckeditor.js文件中找到 enterMode:1 改为 enterMode:2 shiftEnterMode:2 改为 shiftEnterMode:1
②工具栏的修改:可以将不需要的图标删除
在ckeditor.js中将不需要的删除(大约在11488行找到 toolbar_Full 将此中不需要的删除)
也可以将toolbar_Full中的代码拷贝到config.js中将不需要的删除
注意:工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,
“/”表示工具栏换行,“-”表示工具图标之间的中隔线“|”
③添加字体:在ckeditor.js文件中找到i.font_names= "……" 这句 在里面添加要增加的字体 i.fontSize_sizes 可更改字体
④更改表情符号:将要更换的表情图片拷贝到 ckeditor--plugins--smiley--image
在ckeditor.js中找到 i.smiley_images=[ ] 将图片名称填写到里面
并在i.smiley_descriptions=[] 中填写图片的对应提示信息
⑤更改背景色:在config.js中配置 config.uiColor = '#FF0080';
⑥更改工具栏上图标提示语的语言 在config.js中配置 config.language = 'fr'; ()
5、文件上传:(使用struts2)
① 首先,还是image.js这个文件,搜索“upload”可以找到这一段 ---- id:'Upload',hidden:true
实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。
② 上面的只是一个上传页面。也就相当于一个HTML的form表单,要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。
加入:
config.filebrowserUploadUrl="actions/ckeditorUpload";
"ckeditorUpload"是请求的URL,也就是点击这个按钮就会post到ckeditorUpload地址进行处理,这里指向的是Struts 2的一个Action。当然,也可以用servlet或者ASP、PHP等来处理请求。
③ 文件上传的控件相当于<input type="file" name="upload" .../>,其name是”upload”,知道了name那么就可以在Action中获取这个文件。
private File upload; //文件
private String uploadContentType; //文件类型
private String uploadFileName; //文件名
④ 如果上传的图片格式不正确,可以在上传界面进行提示。
这个提示不是ckeditor提示的,要在Action中响应。
HttpServletResponse response =ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
if(???){
out.print("<font color=\"red\"size=\"2\">*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)</font>");
return null;
}
⑤ nputStream is = newFileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg"); //设置保存目录
String fileName =java.util.UUID.randomUUID(); //采用UUID的方式随机命名
fileName+= uploadFileName.substring(uploadFileName.length() - 4);
File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();
这段代码是Struts 2上传图片的核心代码,把图片上传后保存在项目的某个目录下,并随机重命名。
⑥ 图片上传成功,在目录下也可以看到图片,至此图片上传成功。
到这里,要在Action中加入一段JS。
String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<scripttype=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')");
out.println("</script>");
有了这段代码,图片上传成功后,根据这里的
"img/postImg/" + filename
相对地址,就可以使用这个图片,直接转到“图像”页面