老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

最新版本的 ckeditor 与 ckfinder 整合流程及注意事项

WEB前端 BlandonTsai 6866℃ 0评论

最近项目中要发布一些资讯内容,涉及到了富文本编辑器。原来的项目框架中确实集成了 fckeditor ,但个人还是感觉版本太老了,自从 2009.08.20 开始就已经由 CKSource 公司正式更名为 ckeditor。并延续了原来的版本号,第一个版本号3.0,现在最新的版本号已经到了4.5.10了。

还有一个 ckfinder 基于 ajax 的文件浏览器,这个是我的大爱啊!浏览起来可以直接查看缩略图,与 windows 系统的磁盘浏览体验特别像,欧巴再也不用担心选错图片了。这个也是 CKSource 公司的产品,所以凡是此公司出品的功能组件,我估计以后都会以 CK 开头了。

1.下载 ckeditor 与 ckfinder 的最新版本

直接去官网下载吧,这里就不再赘述了。(原谅欧巴爱偷懒)

这里我下载的 ckeditor 是纯JS版本的,我测试发现可以完全满足项目需要。当然官方提供的也有 JAVA 版本的,涉及到一个 JAR 组件,延续了以前 fckeditor 的用法。基于 servlet 的实现,如果是现在的 SSH 或者 SSI 框架,还需要在项目的 web.xml 里面添加 servlet 的优先级启动,以免受到 spring 的 listener 的影响。实现上会多一些繁杂的步骤。

既然纯JS版本完全可用,在此建议大家直接使用JS版本吧。以下放出我正在使用的源码包,有兴趣的话可以看一下:

ckeditor 纯JS版本下载:ckeditor 纯JS版本

ckfinder 纯JS版本下载:ckfinder 纯JS版本

2.页面中添加 ck 的引用

注意一定要提前引用 Jquery ,这些个JS组件没有 Jquery 的帮助简直是寸步难行。(其中 ck.js ,是欧巴自主定义的配置文件)

3.加载 ckeditor 编辑器

很简单定义一个 textarea 对象,然后把 ckeditor 初始化进去。比起 fckeditor 又是页面 JAVA 代码,又或者是JS函数加载,这样简直就是满满的福利。

4.页面单独调用 ckfinder(情况一)

ckfinder 按钮调用

如图所示,页面通过按钮等直接调用 ckfinder 文件浏览器,这里我使用的是JS函数方法。官网上貌似介绍的还有其他两种方法,有兴趣的可以去看看API文档。把“浏览”按钮添加一个事件,然后调用声明好的方法。

在 ck.js 中定义一个方法,就是“浏览”按钮的 click 方法:

打开后就能看到如下图所示的浏览窗口,主题有三种:bootstrap、kama、v1,我当前使用的是 bootstrap 主题,这个可以在 config.js 中定义自己喜欢的皮肤。

5.ckeditor 整合 ckfinder(情况二)

在 ckeditor 下的 config.js 中添加文件、图片和视频浏览的请求链接,以替换原请求路径:

另附常用配置定义:

6.web.xml servlet配置为 ckfinder 放行

由于 ckeditor 使用的是纯JS版本,在此不需要添加 ckeditor 的web启动配置,但是 fckeditor 是需要添加的。

7.在web-inf下引入 ckfinder 的配置文件 config.xml

里面的文件存储和URL目录,可根据自己的项目情况进行设置。

整合完成之后,就可以妥妥地使用了。如果还有其他问题的话,那应该都是些小毛病,自己根据项目配置调整下就是了。

【项目问题扩展】

1.ckfinder 的配置属性 baseDir 与 baseURL

baseDir 一般设置为文件服务器磁盘的绝对或者相对路径,指向一个文件存储目录;baseURL 一般设置为文件服务器的浏览地址,常用于对外读取,ckfinder 选中文件后会把“baseUrl+文件相对路径”返回值给你,以供查看或者表单提交。

但是有一点切记,baseDir 和 baseURL 一定要指向同一个目录!因为每个项目的配置情况不一样,如果指向目录不一致,只有一种结果:不一定绝对会,但很容易出问题。

2.运行项目和 ckfinder 文件服务器不是同一个项目

在使用中,常会把文件上传下载单独提取出来融合为“文件服务器”,这就涉及到 ckfinder 的读取目录可能是独立的域名,这还不是主要的问题所在,只要在 baseURL中把文件服务器的域名配置上就可以正常读取了。可问题是:如果我的文件服务器域名不确定或者经常变动呢?这样在数据库中存储绝对路径那不是找死吗?后期把文件服务器维护一下,Game Over!

所以,出于良好的项目扩展性,ckfinder 的存储路径应该是相对的,这样只需要在项目配置中调整文件服务器的域名配置,就能找到原有的资源了。这样的话,baseURL 就无法进行设置,因为不确定性。

如果 project 和 ckfinder 不在同一个项目内,还不能使用 baseURL的话 ,就会造成以下严重后果:

ckeditor 图片无法显示

这种情况涉及到两种需求,在“主题图片”一栏设置图片时,我需要图片的相对路径;在 ckeditor 中预览图片时,却需要带域名的绝对路径,若不然图片肯定找不到。

所以这个地方,我看了一下 ckfinder 的JS调用后,找到了入手点。在处理的时候要遵循以下原则:

1.为了方便后期扩展,ckfinder 文件服务器推荐在库中存储相对路径,全局定义前缀域名(这样的话“主题图片”已经满足了);
2.ckeditor 中的文章插入的文件也要存储相对路径,依然是为了后期扩展;
3.ckeditor 中的内容既要满足用户临时的编辑预览,又要保证后期扩展。

有三块地方需要调整:

1.ckeditor 通过 ckfinder 插入内容时,目前默认没有前缀域名,为了让用户预览要添加上前缀。找到 ckfinder.html文件:

可以大致了解到,ckfinder 在插入文件时分了3种情况:一种是JS插入,第二种是 ckeditor 插入,第三种默认情况是 fckeditor 插入。所以找到第二种,在调用插入函数的时候,把 fileUrl 前面加入config.imageBaseUrl(在代码块中查找)。这个 config 在页面顶部有个声明,加入你自己的域名就行了:

2.由于预览时,内容中文件都添加了前缀,在存储的时候需要全部过滤掉。这个方法我写在了表单提交的action 里面进行的处理:

repalce 中的 image_base_path 可以自行定义,参数替换一下重新再放入 map 里面就是了(欧巴用的是 struts + spring + ibatis框架)。

3.由于存储时,内容中的文件都过滤掉了前缀,在后来编辑修改的时候,需要重新把所有文件加上前缀再展示预览:

哇咔咔,到此为止,大功告成!

转载请注明:似水流年 » 最新版本的 ckeditor 与 ckfinder 整合流程及注意事项

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
头像
发表我的评论
取消评论


(2)个小伙伴在吐槽
  1. 头像
    :jue: :baby: :yue:
    匿名2019-04-24 15:27 回复
  2. 头像
    :easy: :say: :golf: :bath: :bath:
    匿名2019-10-11 15:05 回复