商城首页欢迎来到中国正版软件门户

您的位置: 首页 > 文章列表 > 编程开发 > ckeditor和ueditor那个好 CKEditor和UEditor使用比较

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

  发布于2026-07-22 阅读(0)

扫一扫,手机访问

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

本文转载于:https://www.jb51.net/article/109320.htm 如有侵犯,请联系zhengruancom@outlook.com删除。
免责声明:正软商城发布此文仅为传递信息,不代表正软商城认同其观点或证实其描述。
  • using namespace 使用中遇到的问题怎么解决 正版软件
    using namespace 使用中遇到的问题怎么解决
    命名空间的基本概念与常见引入问题在C++等编程语言中,命名空间(namespace)是一种将代码标识符(如变量、函数、类名)封装在特定名称下的机制,其主要目的是避免命名冲突,尤其是在大型项目或使用多个第三方库时。使用“using namespace”指令可以将指定命名空间中的所有名称引入当前作用域,
    9天前 0
  • c语言函数递归 实操经验总结:这些技巧很实用 正版软件
    c语言函数递归 实操经验总结:这些技巧很实用
    理解递归的基本原理在C语言中,递归是一种函数调用自身的编程技术。要掌握它,首先需要理解其核心思想:将一个复杂的大问题,分解为一个或几个与原问题相似但规模更小的子问题,直到子问题足够简单,可以直接求解。这个过程通常包含两个关键部分:递归出口和递归体。递归出口定义了问题何时不再继续分解,即最简单、可直接
    9天前 0
  • c语言函数递归 怎么选?常见方案对比分析 正版软件
    c语言函数递归 怎么选?常见方案对比分析
    递归函数的基本概念与适用场景在C语言编程中,递归是一种函数调用自身的编程技巧。它并非适用于所有问题,但在处理某些具有自相似结构的问题时,能提供极其清晰和优雅的解决方案。递归的核心思想是将一个大规模问题分解为一个或多个同类型但规模更小的子问题,直到子问题简单到可以直接求解。典型的适用场景包括树形结构的
    9天前 0
  • Objective-C 内存管理入门:从 alloc 到 dealloc 的生命周期详解 正版软件
    Objective-C 内存管理入门:从 alloc 到 dealloc 的生命周期详解
    理解内存管理的基石在Objective-C的编程世界中,内存管理是开发者必须掌握的核心技能之一。它直接关系到应用的性能、稳定性与资源利用效率。与一些采用自动垃圾回收机制的语言不同,Objective-C在很长一段时间里,依赖一套基于引用计数的、需要开发者部分介入的管理规则。这套规则的核心思想是明确的
    9天前 0
  • 如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏 正版软件
    如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏
    理解 dealloc 的角色与时机在 iOS 应用开发中,内存管理是保障应用性能与稳定性的基石。dealloc 方法是 Objective-C 中对象生命周期结束时的关键回调,它标志着对象即将被系统回收内存。正确理解其触发时机至关重要:当一个对象的引用计数降为零时,运行时系统会自动调用该对象的 de
    9天前 0