ckeditor和ueditor那个好 CKEditor和UEditor使用比较
编程学习 2021-07-05 12:51www.dzhlxh.cn编程入门
本来项目中使用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）
<script type="text/javascript" src="${basePath}/js/ckeditor/ckeditor.js"></script>
//引入js后在textarea标签上添加一个richText=”true”这个属性即可
<textarea name="wxChoiceInfo.infoTextConte" id="wxChoiceInfoInfoTextConte" richText="true" cols="110" rows="15"></textarea>
获取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();
/