上海戴文 - Drupal开发专家

你在这里

Drupal7下 CKEditor + IMCE 安装和配置图文教程

主标签

CKEditor介绍:

CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

最近询问安装和配置CKEditor + IMCE模块的朋友很多,其实对于熟悉的朋友来说,应该还是比较简单的。编写一篇比较简单的教程供各位参考。

目前,CKEditor官方专门提供了为Drupaal定制的已包含了CKEditor模块的打包文件,提供Drupal7和Drupal6两个版本,这样,我们只需简单的安装和配置就可以轻松使用CKeditor编辑器了。

安装前准备:

1. 下载CKEditor为Drupal定制的包含了Drupal CKeditor模块和编辑器组件的压缩包文件(CKEditor for Drupal):http://ckeditor.com/download 链接已更新为: http://cksource.com/ckeditor-for-drupal/trial

2. 下载Imce模块:http://drupal.org/project/imce

备注:本文以Drupal7为例,所以请下载CKEditor针对Drupal7定制的压缩包。

开始安装

1. 将imce模块解压缩并放置“sites/all/modules”目录下:

2. 将CKEditor for Drupal 的文件解压缩并放至“sites/all/modules/”目录。

接下来就可以启用这ckeditor和imce这两个模块了。

3. 至“Modules”页面开启ckeditor和imce两个模块:

说明:将CKeditor和imce开启以后,我们可以测试一下编辑器是否已经可以正常加载了。我们使用user 1(超级管理员)来测试,创建一篇内容类型为Article的node,发现编辑器可以正常加载了。我们也可以新建一个注册用户来测试,Drupal7默认的注册用户并没有创建Article和Page的权限,需要管理员到权限页面设置一下,这里就不再赘述。经过测试,新增的测试用户也是可以加载CKeditor的。

配置CKeditor

此时,CKeditor编辑器已经可以正常使用了,不过此时的CKeditor还不能上传图片:

接下来我们就介绍一下如何配置。

依次点击“Configuration”> “CKeditor”,进入CKeditor的管理界面(admin/config/content/ckeditor):

 

这里CKeditor为默认的输入格式(Input format):Filtered HTML和Full HTML分别提供了默认配置(profile),通过这2种配置可以分别在这两种输入格式下,对CKeditor的编辑器外观和按钮等进行不同的配置,这里仅介绍一下利用IMCE来上传图片的功能,以Full HTML为例:

点击Full HTML后面的edit(编辑)按钮,进入设置页面:

 

设置图片上传是在“File browser settings”这里,点击它,即可展开设置,因为我们这里只是以图片上传为例,所以只需配置一下图片上传的功能。

在File browser type (Image dialog window)一栏的下来选项中,选择“IMCE”:

 

然后点击“Save”即可保存配置。

赶紧测试一下吧,看看效果:

 

 

 

 

这样,CKeditor编辑器配合IMCE来实现图片上传的介绍就告一个段落了,当然,CKeditor还有更多配置的地方需要研究和学习,如果你对这方面感兴趣,或者有任何疑问,请回复。

 

声明:本文由Drupal中国原创,如需转载,请注明来源,更多教程请关注http://drupalchina.cn

Drupal 版本: 

猜你喜欢

相对于wp来说,drupal即使配置个编辑器也显得繁琐,这一方面我想会阻碍它成为最流行cms的步伐。但作为一个框架,它毋庸置疑的No.1,再看它的核心代码,简洁而强大。只不过他在国内没有那么流行,活动胜少。
希望在苏州能有drupal的圈子。

Drupal8会有很大的改进,比如内置自己的编辑器,能够灵活拖拽,排版非常方便。期待吧!

我也很希望各地的Drupal圈子都能活跃起来!加油!

Drupal China http://drupalchina.cn

 官网下载的ckeditor模块跟在ckeditor下载的for drupal软件包,是不是只需要一个就足够?还有
 ckecitor模块跟wysiwyg模块使用那一种比较好呀?

wysiwyg模块可以搭载不同的编辑器,比如有的地方想用ckeditor编辑器,有的地方想用tinyimce编辑器,都可以配置,而ckeditor模块只是为ckeditor编辑器定制的。

Drupal China http://drupalchina.cn

ckeditor4发布了,有了不少新特性,新皮肤比较漂亮的说,大家可以用wysiwyg模块整合啊,由于当前的wysiwyg模块不支持ckeditor4版,需要修改下,这里有篇教程,大家可以参考下

在WYSIWYG模块中为Drupal 7配置CKEditor 4

我的个人网站 Joomla Drupal 译站
致力于汉化 Joomla Drupal 教程文档、扩展组件、模块插件、主题模板

真的谢谢!

对于我们这样的菜鸟中的菜鸟, 这样的讲解才能让我们做出来.

谢谢普及drupal,如有需要愿意帮忙! 只是希望多一些这样的文章.

正在入门drupal

我的是drupal7,按照上面的方法安装后,还没有配置那个按钮上就有字,但是无论是否配置,点击的结果都是“The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file”,google和百度上都搜了一遍,没解决……请帮忙解决一下咯。谢谢

欣賞是最浪漫的距離,還未碰觸前總是充滿幻想又保有尊重,是最有氣質的感動

ckfinder是收费的,这里用IMCE替代。

你可能IMCE还没有配置,请检查一下!

Drupal China http://drupalchina.cn

您好:

請問 文中講到

ckeditor-7.x-1.13.zip 與ckeditor_4.0.1_for_drupal_7.zip

這2個都要安裝嗎?

還是只安裝其中一個?那要安裝哪一個?

ckeditor_4.0.1_for_drupal_7.zip 可用多久?

 

我安裝 Wysiwyg+Ckeditor+media,結果 編輯時SOURCE CODE 會擠在一起,沒有格式化;且後面的程式碼會被切掉或 php會自動被加上<!-- ,結果就無法正常RUN了!

 

謝謝!

我按照上面说的办法操作,但后台显示都挺正常的,而前台却没有办法显示,这不知道是什么原因,都要急死了,求高手指点

 

qqjie_tu_20140702173914.jpg

更为推荐的办法是  wysiwyg+ckeditor 而不是直接去用他们的模块 

扫一扫关注Drupal社区公众号LoveDrupal

qrcode_for_gh_037d374f7de5_258.jpg

我一直是使用ckeditor模块 + ckeditor编辑器,用的很不错!

说说为什么 wysiwyg + ckeditor 更好呢?

Drupal China http://drupalchina.cn

for drupal的不是试用的么?过期不就收费了么?

现在到底有几中安装方式啊?

(1)ckeditor官网通用模块+drupal官网IMCE

(2)ckeditor for drupal+drupal官网IMCE

(3)drupal官网ckeditor模块+drupal官网IMCE

至今没有看到一篇帖子能将ckeditor的全部情况说清楚的。

需要搞清楚几点

  1. ckeditor 是一款编辑器,是由cksource公司开发的,它分为开源版企业付费版
  2. ckeditor模块在不断更新中,因此,对ckeditor编辑器的版本也不断兼容更新。经过初步测试,当前的ckeditor模块7.x的最新版是7.x-1.15,该版本对当前ckeditor编辑器的支持已经非常好了。
  3. ckeditor-for-drupal  是为社区贡献的一个整合了drupal的ckeditor模块 + ckeditor编辑器 + ckfinder(类似于IMCE)的包,但是他们是由cksource团队维护并提供技术支持的。从他们官网上看,提示这个更新和维护将在2015年4月底截止。

综上,可以给出这样的解决方案:

  • 单独下载ckeditor模块 + ckeditor 编辑器 + IMCE
  • 下载ckeditor模块 + libraries模块 + ckeditor 编辑器 + IMCE
  • 直接使用ckeditor-for-drupal (内置了ckfinder,就不需要IMCE模块了),但注意他们有更新维护截止日期。

Drupal China http://drupalchina.cn

很详细,谢谢,但我还有个疑问:

drupal上下载的ckeditor模块安装完直接就能用了,为什么还要去ckeditor官网下载ckeditor编辑器?

ckeditor模块只是一个桥接的工具,本身不包含编辑器的代码,所以,编辑器要单独下载。

除了ckeditor模块,你还可以使用wysiwyg模块,也可以。

Drupal China http://drupalchina.cn

我也是ckeditor官网下载的模块+IMCE,很好用

我也是使用ckeditor+IMCE  为什么在网站后端显示前端不显示图片呢

天使理财,P2P网贷理财行业门户网,会理财让生活更轻松

按照教程,一步一步做,但是还是有问题,当点击浏览服务器的时候,提示需要登录,我在IMCE下如此设置了一下2015-07-01_192814.jpg

什么都是唯一的,包括你、我、他。

竟然是限制html没有<img>

什么都是唯一的,包括你、我、他。