开场白：
最近用到了ckeditor网上看了好多大同小异，但是版本都比较老旧了，也许使用过程中有瑕疵，本人
自己总结了下，已经经过实测，方便大家参考，也可以提宝贵意见，互相交流。
正文：
由于Fckeditor只能用于基于ie内核的浏览器，如果要使用于chrome，safi等浏览器，必须要用ckeditor。
我这边对ckeditor的使用以及图片上传做个简单的说明。
（本人用的ckeditor是Version 4.6.2 • 12 Jan 2017 Full Package） 是在struts2框架下用的
先看一下Fckeditor的界面
再看一下ckeditor的界面
通过界面大家也能直观感受到了ckeditor的华丽转身了吧。
下面我们就介绍下怎么使用这个ckeditor
1.首先可以去ckeditor官网下载需要的ckeditor版本http://ckeditor.com/download
2.下载完成后解压，放到你项目的资源目录下，我的是WebRoot目录下。
3.要在你使用ckeditor的jsp界面中加入ckeditor.js 如：
<script type="text/javascript" src="ckeditor_full/ckeditor.js">
4.在要转换成富文本的textarea下方编写js：CKEDITOR.replace('textarea的name')，如
<textarea name="financial.bz"></textarea>
<script type="text/javascript">CKEDITOR.replace('financial.bz');</script>
补充：这里发现了一个比较简单的方法，前提是3要配置。
<textarea id="editor" class="ckeditor"></textarea>(注意，里面的id class属性值一个都不能错，不能省)
这里还有个好处就是后台用struts2框架获取ckeditor的值，可以设置textarea的name为content具体要看你的action中的对象内容用的什么标签了。
这样就可以把值传递给后台action了。
例如： <textarea name="content" cols="100" id="editor" class="ckeditor" rows="10"></textarea> 这样后台就可以获取到content的值了。
补充：以上方法可以用来替换老的FCKEDITOR 无需改代码，直接用上述例子代码就可以替换，主要name要改成你之前FCKEDITOR的NAME。
代码片段
<html>
<head>
<script type="text/javascript" src="ckeditor_full/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script type="text/javascript">CKEDITOR.replace('editor1');</script> </body>
</html>
以上你的ckeditor就可以展现出来了。
解决图片上传问题
1：上传按钮显示解决
在ckeditor/plugins/image/dialogs/文件中找到，我这里用的是full版本所以改了文件夹名字
{id:"Upload",hidden:!0,filebrowser:"uploadButton", 然后将hidden:!0 改成hidden:0
（此方法不推荐）
或者在config.js配置文件中加上
config.filebrowserUploadUrl="actions/ckeditorUpload";//待会要上传的action或servlet
2：预览中的英文句子显示解决。
3:
上传功能实现
上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。
加入：
config.filebrowserUploadUrl="actions/ckeditorUpload"; 用名字空间为actions的写法，目前没有调测通过。
config.filebrowserUploadUrl = "ckeditorUpload.action"; 不用名字空间的写法，已经调测通过。
"ckeditorUpload"是请求的URL，也就是点击这个按钮就会post到ckeditorUpload地址进行处理，这里指向的是Struts 2的一个Action。当然，也可以用servlet或者ASP、PHP等来处理请求。
在ckeditor中的config.js中配置
CKEDITOR.editorConfig = function( config ) {
config.image_previewText=' '; //预览区域显示内容
config.filebrowserUploadUrl = "ckeditorUpload.action";
};在struts.xml中配置
<package name="actions" extends="struts-default" >
<action name="ckeditorUpload" class="action.CkeditorUpload">
</action>
</package> 不要用名字空间之前试了不好用。这里的包名没有用到切记。
<package name="myactions" extends="struts-default" namespace="/actions">
<action name="ckeditorUpload" class="action.CkeditorUpload ">
</action>
</package>
记得要加上CkeditorUpload的类代码：
package action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class CkeditorUpload extends ActionSupport {
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() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
// CKEditor提交的很重要的一个参数
String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
String expandedName = ""; //文件扩展名
if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
//IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
}else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){
//IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
}else if(uploadContentType.equals("image/gif")){
expandedName = ".gif";
}else if(uploadContentType.equals("image/bmp")){
expandedName = ".bmp";
}else{
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() > 600*1024){
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return null;
}
InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext()
.getRealPath("/img/postImg");
String fileName = java.util.UUID.randomUUID().toString(); //采用时间+UUID的方式随即命名
fileName += expandedName;
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();
// 返回“图像”选项卡并显示图片
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')");
out.println("</script>");
return null;
}
}
加完之后运行会发现下面的报错那就是说在你的工程下没有img\postImg这个路径在WebRoot（本人工程的）下面加上这个文件路径，重新clear一下工程，重新运行一下工程会自动重启server。
严重: Servlet.service() for servlet [default] in context with path [/forum] threw exception [java.io.FileNotFoundException: J:\tool\eclipse_mars\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\forum\img\postImg\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)] with root cause
java.io.FileNotFoundException: J:\tool\eclipse_mars\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\forum\img\postImg\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)
使用过程截图
补充下
Struts.xml配置中的包介绍
<package name="itcast" namespace="/test" extends="struts-default">
<action name="helloworld" class="cn.itcast.action.HelloWorldAction" method="execute" >
<result name="success">/WEB-INF/page/hello.jsp</result>
</action>
</package>
扫一扫
7863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
