当前位置:

首页 > 编程开发 > ckeditor和ueditor那个好 CKEditor和UEditor使用比较

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

CKEditor功能成熟但需自行编写较多逻辑;UEditor界面美观、开箱即用,但前后台交互较复杂,上传配置需注意路径前缀,还需处理Struts过滤器对静态请求的拦截问题。两者各有侧重,需根据项目需求选择。

CKEditor 和 UEditor,这两款富文本编辑器在实际项目中经常会遇到。原本项目里已经用 CKEditor 把功能搭好了,结果业务方觉得 UEditor 界面更美观,非要换过来。既然都踩过一遍坑,那干脆把两者的使用心得和关键配置整理出来,给后来人省点时间。

先说说总体感受。我用的 UEditor 是 1.4.3 版本(以官方 API 为准)。UEditor 更注重用户体验,上手比 CKEditor 简单,但前后台交互这块稍微麻烦一些。CKEditor 则相反,很多方法需要自己实现,不过毕竟是老牌编辑器,如果你之前已经写过相关逻辑,集成的便利性反而更高。

CKEditor 的使用

在 JSP 页面里,先引入 CKEditor 的 JS 文件(当然 jQuery 也得先引入,另外别忘导入 ckeditor-Ja va-core-3.5.3.jar 这个类库)。

JS 引入后,在

获取 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 的引入需要三个文件:ueditor.config.js、ueditor.all.js 和对应的 CSS 主题。



JSP 页面里,通过 script 标签的 id 定义容器,然后实例化编辑器:

" method="post" id="form"> 投资服务流程

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 功能成熟,但需要自己写更多代码。根据项目需求和团队技术栈选择即可。

本文内容来源于网友投稿,如有侵权请联系删除。
作者最新文章
编程开发 UEditor
相关文章 更多
CSS设置透明度的注意事项有哪些?opacity属性详解
CSS设置透明度的注意事项有哪些?opacity属性详解

深入解析CSS中设置透明度的核心属性opacity,剖析子元素继承、事件穿透、层叠上下文等关键注意事项,并提供与rgba、hsla的实用选型对比。

flutter页面传值到后台的方法及示例代码
flutter页面传值到后台的方法及示例代码

flutter页面传值到后台的完整实现方法及示例代码,帮助读者快速掌握相关技术要点。

Java 8至21新特性代码写法对比:Lambda、Record与Switch
Java 8至21新特性代码写法对比:Lambda、Record与Switch

本文通过具体的旧版与新版代码对比,详细剖析Java 8引入的Lambda表达式、Java 14/16引入的Record类,以及Java 12至21逐步演进完善的Switch表达式与模式匹配,展示代码简化路径与避坑要点。

AI智能体开发培训课程学什么及实战内容介绍
AI智能体开发培训课程学什么及实战内容介绍

系统梳理AI智能体开发培训的核心知识模块、技术栈选型与典型实战项目,解析低代码平台与纯代码框架的差异,提供从零构建可落地智能体的完整学习与实施路径。

Java子类未实现抽象方法编译错误修复指南
Java子类未实现抽象方法编译错误修复指南

针对Java开发中常见的“子类未实现抽象方法”编译错误,深入分析报错原因,提供重写实现、声明抽象子类两种标准修复路径,并总结参数签名、访问修饰符等典型避坑要点。

解决PHP递归报错:max_nesting_level限制与内存溢出处理
解决PHP递归报错:max_nesting_level限制与内存溢出处理

遇到PHP递归报错时,不要盲目调大max_nesting_level。本文教你区分Xdebug限制、内存耗尽和正则递归错误,提供代码级的终止条件优化与迭代替代方案,彻底解决栈溢出问题。

PHP递归中static变量与引用传递的常见陷阱及调试
PHP递归中static变量与引用传递的常见陷阱及调试

本文分析PHP递归中static变量导致的状态污染及引用传递引发的共享数据修改问题。提供具体的代码复现、缓存键设计建议及调试打印技巧,帮助开发者避免隐蔽的逻辑错误。

PHP递归性能优化技巧与迭代替代方案
PHP递归性能优化技巧与迭代替代方案

解析PHP递归函数在树形数据处理中的性能瓶颈,提供预加载数据消除I/O、使用显式栈替代深层递归的实战方案,帮助开发者在代码可读性与执行效率间做出合理取舍。

Java测试中怎么使用Mockito模拟依赖对象
Java测试中怎么使用Mockito模拟依赖对象

详细讲解在Java单元测试中如何使用Mockito模拟依赖对象,包括引入依赖、创建Mock、打桩返回值、行为验证以及Mock与Spy的核心差异和常见陷阱排查。

链表删除节点的时间复杂度是多少及其详细分析
链表删除节点的时间复杂度是多少及其详细分析

详细分析链表删除节点的时间复杂度,深入探讨单链表与双向链表在不同已知前提下的查找与删除开销,并结合完整代码与清晰图解进行对比总结。

查看更多
精品专题 更多
装机必备
装机必备

正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

Windows
Windows

正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

macOS软件
macOS软件

正软商城macOS软件专区,精选适用于Mac电脑的办公、设计、影音、效率、开发和系统工具,提供软件功能介绍、macOS兼容版本、正版授权及购买下载服务。

Mac软件 更多
photoshop
photoshop
Windows、macOS 、 iPad

Photoshop 2026 是 Adobe 推出的专业图像处理与视觉设计软件,支持 Windows、macOS 和 iPad 等平台,广泛应用于摄影修图、电商设计、平面海报、数字绘画及视觉合成等创作场景。

Blender
Blender
Windows、macOS 和 Linux

Blender 是一款免费开源、跨平台的专业 3D 创作软件,集建模、动画、渲染、视频编辑与视觉合成等功能于一体,广泛应用于影视动画、游戏设计和建筑可视化等领域。软件支持 Cycles 物理渲染器与 Eevee 实时渲染引擎,并提供多边形建模、骨骼绑定、物理模拟等专业工具。Blender 兼容 Windows、macOS 和 Linux 系统,安装包轻巧、运行流畅,依托活跃的全球开发者社区持续更新,是从初学者到专业创作者都值得选择的正版 3D 创作工具。

灵活计算器
灵活计算器
macOS/iOS/Android

灵活计算器是一款笔记式算数应用,支持实时计算、动态关联和云端同步功能。记录、整理和输出之间的过渡会更自然,适合长期写作、做笔记或持续沉淀个人内容。

WINDOWS 更多
3dmax(3ds max)
3dmax(3ds max)
Windows

Autodesk 3ds Max 是一款专业的三维建模、动画与渲染软件,广泛应用于建筑可视化、游戏开发、影视动画、广告设计和产品展示等领域。

photoshop
photoshop
Windows、macOS 、 iPad

Photoshop 2026 是 Adobe 推出的专业图像处理与视觉设计软件,支持 Windows、macOS 和 iPad 等平台,广泛应用于摄影修图、电商设计、平面海报、数字绘画及视觉合成等创作场景。

Blender
Blender
Windows、macOS 和 Linux

Blender 是一款免费开源、跨平台的专业 3D 创作软件,集建模、动画、渲染、视频编辑与视觉合成等功能于一体,广泛应用于影视动画、游戏设计和建筑可视化等领域。软件支持 Cycles 物理渲染器与 Eevee 实时渲染引擎,并提供多边形建模、骨骼绑定、物理模拟等专业工具。Blender 兼容 Windows、macOS 和 Linux 系统,安装包轻巧、运行流畅,依托活跃的全球开发者社区持续更新,是从初学者到专业创作者都值得选择的正版 3D 创作工具。