ckeditor和ueditor那个好 CKEditor和UEditor使用比较

CKEditor和UEditor使用比较

本来项目中使用CKEditor已经做好了的富文本编辑器的功能，但是业务考虑到美观性要求换成UEditor，所以就在这里总结下

先说下使用这两个不同插件的感想，我用的ueditor是1.4.3的版本：(ueditor API)

UEditor：ueditor更注重用户体验，而且使用起来较ckeditor简单，但是ueditor在处理前后台交互时相比于ckeditor稍显麻烦
ckeditor：ckeditor不像ueditor，更多的方法需要自己去实现，但是毕竟是老牌富文本编辑器，如果之前有写过这些方法的话，集成ckeditor个人觉得还是比ueditor更方便简单。

CKEditor的使用

在jsp页面下引入ckeditor下的ckeditor.js（当然首先要引入jQuery.js,引入插件类库ckeditor-Java-core-3.5.3.jar）

//引入js后在textarea标签上添加一个richText=”true”这个属性即可

获取ckeditor中的内容

Var content = CKEDITOR.instances.wxChoiceInfoInfoTextConte.getData(content);

//初始化
$(function() {
//富文本字段初始化
$(\”[richText]\”).each(function (e) {
CKEDITOR.replace($(this).attr(\”id\”),{
height : 400,
skin : \’kama\’,
language : \’zh-cn\’,
filebrowserImageUploadUrl:\’${basePath}/wxdate/ck_upload.action?fileType=1\’,
toolbar: \’ToolbarCommon\’,
resize_enabled: false
});
});
});

Action配置

<!– FckEdit上传–>
<action name=\”ck_upload\” class=\”com.ccxe.wxdate.action.CkeditorUploadAction\”>
<param name=\”fileSize\”>5120000</param> <!– 上传文件大小 –>
</action>

CkeditorUploadAction类源码

//CkeditorUploadAction类源码
public class CkeditorUploadAction extends ActionSupport {

private static final long serialVersionUID = 1L;
private File upload;
private String uploadContentType;
private String uploadFileName;
//文件大小
private long fileSize;
//取文件路径
private String fileType;

public String getFileType() {
return fileType;
}

public void setFileType(String fileType) {
this.fileType = fileType;
}

public long getFileSize() {
return fileSize;
}

public void setFileSize(long fileSize) {
this.fileSize = fileSize;
}

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 {
try {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType(\”text/html;charset=UTF-8\”);
PrintWriter out = response.getWriter();

String callback = ServletActionContext.getRequest().getParameter(\”CKEditorFuncNum\”);
//对文件进行校验
if(upload==null || uploadContentType==null || uploadFileName==null){
//out.print(\”<font color=\\\”red\\\” size=\\\”2\\\”>*请选择上传文件</font>\”);
String path = \”\”;
String alt_msg = \”*请选择上传文件\”;
out.print(\”<script type=\’text/javascript\’>window.parent.CKEDITOR.tools.callFunction(\”
+ callback
+ \”, \’\”
+ path
+ \”\’ , \’\”
+ alt_msg
+ \”\’);</script>\”);
return null;
}
if ((uploadContentType.equals(\”image/pjpeg\”) || uploadContentType.equals(\”image/jpeg\”)) && (uploadFileName.substring(uploadFileName.length() – 4).toLowerCase().equals(\”.jpg\”)||uploadFileName.substring(uploadFileName.length() – 5).toLowerCase().equals(\”.jpeg\”))) {
//IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
}else if((uploadContentType.equals(\”image/x-png\”) || 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(\”<script language=\\\”javascript\\\”>alert(\\\”*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）\\\”);return false;</script>\”);
String path = \”\”;
String alt_msg = \”*请选择图片文件格式（必须为.jpg/.jpeg/.gif/.bmp/.png文件）\”;
out.print(\”<script type=\’text/javascript\’>window.parent.CKEDITOR.tools.callFunction(\”
+ callback
+ \”, \’\”
+ path
+ \”\’ , \’\”
+ alt_msg
+ \”\’);</script>\”);

return null;
}

if(upload.length() > this.getFileSize()){
//out.print(\”<font color=\\\”red\\\” size=\\\”2\\\”>*文件大小不得大于\”+this.getFileSize()/(1000*1024)+\”m</font>\”);
String path = \”\”;
String alt_msg = \”*请选择上传\”+this.getFileSize()/(1000*1024)+\”M以内的图片文件\”;
out.print(\”<script type=\’text/javascript\’>window.parent.CKEDITOR.tools.callFunction(\”
+ callback
+ \”, \’\”
+ path
+ \”\’ , \’\”
+ alt_msg
+ \”\’);</script>\”);
return null;
}
String imagePath = \”\”;

//imagePath路径的设置
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
WxConfig wxConfig = (WxConfig)wac.getBean(\”wxConfig\”);
//if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
imagePath = wxConfig.getFilePath();
//}
//WxConfig wxConfig;
File directory = new File(imagePath);
if(!directory.isDirectory()) {
directory.mkdirs();
}
//将文件保存到项目目录下
InputStream is = new FileInputStream(upload);
Date date = new Date(); // 获得系统时间，用于生成文件名
long lTime = date.getTime();
String fileName = DateUtil.toStringNoInterval(date, 8)+\”_\”+lTime;
fileName += FileUtil.getFileSuffix(uploadFileName);
File toFile = new File(imagePath, 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();

//设置返回“图像”选项卡

String callbackUrl = ServletActionContext.getRequest().getContextPath() +\”/fckImageReader.servlet?fold=\”+this.getFileType()+\”&imageName=\”+fileName;
out.println(\”<script type=\\\”text/javascript\\\”>\”);
out.println(\”window.parent.CKEDITOR.tools.callFunction(\” + callback + \”,\’\”+ callbackUrl + \”\’,\’\’)\”);
out.println(\”</script>\”);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}

}

图片回显到编辑器的servlet代码

/**
* 文件流方式读取本地图片文件（图片回显处理）
* FckImageReaderServlet
*/
public class FckImageReaderServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void init() throws ServletException {
}

public void doGet(HttpServletRequest request, HttpServletResponse response) {
this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response) {
try {
//得到文件名称
String imageName = request.getParameter(\”imageName\”);
String foldType = request.getParameter(\”fold\”);
String imagePath = \”\”;

//imagePath路径的设置
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext();
WxConfig wxConfig = (WxConfig)wac.getBean(\”wxConfig\”);//模块配置文件
//if(fileType.equals(PubParaConstants.DC_CK_UPLOAD_PATTH_PARAM.DC_CK_UPLOAD_PATTH_PARAM_PROSELECT)) {
imagePath = wxConfig.getFilePath();
//}
if (imageName != null) {
String imageExt = imageName.substring(imageName.lastIndexOf(\”.\”) + 1); //扩展名
//得到配置文件路径
String imageDir = imagePath+\”/\”+imageName; //文件全局路径

File inputFile = new File(imageDir);
if (inputFile.exists()) {
//BufferedImage input = ImageIO.read(inputFile);
// 禁止图像缓存。
response.setHeader(\”Pragma\”, \”no-cache\”);
response.setHeader(\”Cache-Control\”, \”no-cache\”);
response.setDateHeader(\”Expires\”, 0);
//response.setContentType(\”image/jpeg\”);
// 将图像输出到Servlet输出流中。
// ServletOutputStream sos = response.getOutputStream();
// ImageIO.write(input, imageExt, sos);
// sos.flush();
// sos.close();
InputStream in = new FileInputStream(inputFile);
OutputStream os = response.getOutputStream(); //创建输出流
byte[] b = new byte[1024];
while( in.read(b)!= -1){
os.write(b);
}
in.close();
os.flush();
os.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}

web.xml

Web.xml配置FckImageReaderServlet
<!– FCK –>
<servlet>
<servlet-name>FckReader</servlet-name>
<servlet-class>com.***.common.file.FckImageReaderServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FckReader</servlet-name>
<url-pattern>/fckImageReader.servlet</url-pattern>
</servlet-mapping>

再来看UEditor：

//引入相关的js和css
<script type=\”text/javascript\” src=\”${basePath}/js/ueditor/ueditor.config.js\”></script>
<script type=\”text/javascript\” src=\”${basePath}/js/ueditor/ueditor.all.js\”></script>
<link type=\”text/css\” rel=\”stylesheet\” href=\”${basePath}/js/ueditor/themes/default/css/ueditor.css\” rel=\”external nofollow\” >

jsp页面部分代码：

<form action=\”<s:url value=\”/p2p/updateIProductServices.action\”/>\” method=\”post\” id=\”form\”>
<tr id=\”proInvSerTr\”>
<th>投资服务流程 <input type=\”hidden\” id=\”hidInvestProcess\” name=\”productServices.investSerProcess\”/></th>
<td>
<!– 加载编辑器的容器 –>
<script id=\”container\” name=\”content\” type=\”text/plain\”>${productServices.investSerProcess}</script>
<!– 实例化编辑器 –>
<script type=\”text/javascript\”>
var ue = UE.getEditor(\’container\’);
</script>
</td>
</tr>
<input type=\”button\” value=\”保存\” class=\”ImgButton\” onclick=\”submitForm\”/>
</form>
<script type=\”text/javascript\”>
function submitForm(){
$(\”#hidInvestProcess\”).val(ue.getContent());
$(\”#form\”).submit();
}

说了那么多，那使用ueditor怎么修改文件上次的路劲呢，在1.4.3版本下，找到ueditor\\jsp\\config.json文件

找到上次图片配置项的\”imageUrlPrefix\”: \”/\”, /* 图片访问路径前缀 */ \”imagePathFormat\”: \”upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\” //这里是我改过了的上传路径

注意要修改imageUrlPrefix，因为编辑器中图片显示路径是imageUrlPrefix+imagePathFormat，如果不修改imageUrlPrefix图片是不能正常显示的，imagePathFormat这个上传路径是相对于服务器的相对路径。

使用ueditor最主要的就是需要修改web.xml中得struts的过滤器了，这个项目的前台要求全部使用.html结尾，如果不修改的话，struts就会把上传的静态页面image.html当成action去处理了会报404，修改代码如下：

<filter>
<filter-name>struts2</filter-name>
<filter-class>com.***.***.filter.CommonFilter</filter-class>
<init-param>
<param-name>config</param-name>
<param-value>../config/struts.xml</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

filter的代码

public class CommonFilter extends StrutsPrepareAndExecuteFilter{

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)req;
String url = request.getRequestURI();
if(url.contains(\”/ueditor\”)){
chain.doFilter(req, resp);
}else{
super.doFilter(req, resp, chain);
}
}
}

有什么问题，欢迎各位指正。

您可能感兴趣的文章: