发布于2026-07-22 阅读(0)
扫一扫,手机访问
CKEditor 和 UEditor,这两款富文本编辑器在实际项目中经常会遇到。原本项目里已经用 CKEditor 把功能搭好了,结果业务方觉得 UEditor 界面更美观,非要换过来。既然都踩过一遍坑,那干脆把两者的使用心得和关键配置整理出来,给后来人省点时间。
先说说总体感受。我用的 UEditor 是 1.4.3 版本(以官方 API 为准)。UEditor 更注重用户体验,上手比 CKEditor 简单,但前后台交互这块稍微麻烦一些。CKEditor 则相反,很多方法需要自己实现,不过毕竟是老牌编辑器,如果你之前已经写过相关逻辑,集成的便利性反而更高。
在 JSP 页面里,先引入 CKEditor 的 JS 文件(当然 jQuery 也得先引入,另外别忘导入 ckeditor-Ja va-core-3.5.3.jar 这个类库)。
JS 引入后,在 标签上加一个 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 配置如下(struts.xml 中):
5120000
对应的 CkeditorUploadAction 类源码需要处理文件校验、存储路径、回显等逻辑。关键点包括:文件类型校验(jpg/jpeg/png/gif/bmp)、文件大小限制、将文件保存到指定目录,并通过回调函数将图片 URL 返回给编辑器。注意这里使用 out.print 输出 Ja vaScript 脚本调用 CKEDITOR.tools.callFunction 来实现回显。
// CkeditorUploadAction类源码(关键部分)
public class CkeditorUploadAction extends ActionSupport {
// ... 省略属性定义和getter/setter ...
public String execute() throws Exception {
// 校验文件是否为空
// 校验文件类型
// 校验文件大小
// 保存文件到imagePath目录
// 生成回调URL并返回
out.println("");
return null;
}
}
图片回显到编辑器还需要一个 Servlet(FckImageReaderServlet),用于以文件流方式读取本地图片。web.xml 中配置如下:
FckReader com.***.common.file.FckImageReaderServlet FckReader /fckImageReader.servlet
UEditor 的引入需要三个文件:ueditor.config.js、ueditor.all.js 和对应的 CSS 主题。
JSP 页面里,通过 script 标签的 id 定义容器,然后实例化编辑器:
UEditor 上传路径的配置需要修改 ueditor/jsp/config.json 文件。重点关注图片配置项:
"imageUrlPrefix": "/", /* 图片访问路径前缀 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" // 这里是我改过的上传路径
注意 imageUrlPrefix 必须正确设置,因为编辑器中的图片显示路径是 imageUrlPrefix + imagePathFormat。如果前缀不对,图片会显示不出来。imagePathFormat 是相对于服务器的相对路径。
使用 UEditor 时还有一个容易踩的坑:Struts 过滤器。如果项目前台要求全部以 .html 结尾,那么 UEditor 上传时产生的静态页面(比如 image.html)会被 Struts 当成 Action 处理,导致 404 错误。解决办法是自定义一个 CommonFilter 继承 StrutsPrepareAndExecuteFilter,在 doFilter 中判断请求路径是否包含 /ueditor,如果是则直接放行,否则交给 Struts 处理。
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);
}
}
}
以上就是两个编辑器在实际项目中的使用要点。从集成难度来看,UEditor 开箱即用体验更好,但上传配置和 Struts 兼容性需要额外注意;CKEditor 功能成熟,但需要自己写更多代码。根据项目需求和团队技术栈选择即可。
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
正版软件
正版软件
正版软件
正版软件
正版软件
1
2
3
7
8