使用所见即所得(Wysiwyg)编辑器, Drupal7 安装 CKEditor 编辑器的方法及配置:
4 m7 b i1 o0 A8 A$ H, F0 y! s4 M) p! h4 ]
- 首先要下载模块和编辑器
4 Q9 R/ y) ~# \$ ACKEditor Moudle: http://drupal.org/project/ckeditor
: ~0 h& u9 b: G! P: YIMCE Module: http://drupal.org/project/imce
& q. c8 L5 O9 I1 OCKEditor 编辑器: http://ckeditor.com/download - 安装 CKEditor Moudle 和 IMCE Moudle
. k: u! M( Z1 |1 q# M* Z4 U: V将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到
6 @# {' E! P/ asites/all/moudles/ckeditor/+ Z/ ~4 D4 I+ M! e& C( A$ C
sites/all/moudles/imce/& F" {0 f5 Z7 v R* ?% {
然后将 CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图
7 Z/ X; P+ B" M0 E! V
1 U6 n2 a8 `3 E5 `7 \6 v e. b8 a放好后的路径如:! z4 v, O" H3 C6 d$ {, C
/sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js% h2 }* `8 D! c/ c/ }6 I
/sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php
\* C @6 o( u+ j) P1 q2 h! b/sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php
Z" t7 r$ e+ n/sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/*
6 r6 W0 B; w, O4 [/sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*
/ W* _7 t6 `9 Q/ Q, O7 o$ a3 A+ C/sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/** S& }8 z8 e7 ?6 ?! V. l) A
/sites/all/modules/imce/css/*- l# w/ O6 r3 L1 f
… - 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
- 在 Home » Administration » Configuration » Content authoring 中配置CKEditor ( 路径为 /admin/config/content/ckeditor)
; y+ c. R5 }& x. S选择 Full HTML 的 edit Operations 进入 CKEditor 配置. ( 路径为 /admin/config/content/ckeditor/edit/Full ); |% O! B: u# Z' `
然后点击 EDITOR APPEARANCE 选项进去, 在显示的表单中有个Toolbar, 这个是配置CKEditor显示哪些操作标签的.
9 a# w" o/ z7 B& N6 ~% K( T* B& |. a在默认的这行 ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'], 中添加一个 ‘IMCE‘ 这样才能在编辑器里显示 IMCE上传图片的图标.! A3 e/ o8 V( S" Z* b3 u- e4 n6 T
添加后为: ['Image','IMCE','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],3 ]! n. l7 g& H& f" X
接着在 Plugins 中选中 IMCE Window button in toolbar
: T t# I Q0 ]- C( ?3 M' _+ @$ D0 `: F 1 G3 E0 A, v6 F+ C; U6 I- o
最后在 File browser settings 中的 7 l! \3 D6 k- H# R2 o5 P# l
File browser type (Link dialog)
}0 v, I' r6 T8 Q/ wFile browser type (Image dialog) ! f* B5 o6 B, r
File browser type (Flash dialog)
# d8 R; L' ~" K9 d9 _, F三个选项都选择 IMCE, 如下图
1 R. J/ v# L7 f) p - OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了., J1 a/ ~, I& o b5 M
另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下, 比如我的设置如下* d% Q1 I3 G5 }
[backcolor=white !important][size=1em] [backcolor=white !important]1 8 ~6 ?( S% a/ X/ e$ N+ ~
[backcolor=white !important]2 4 p7 ^! L1 r: h/ J' X
[backcolor=white !important]3
) G) {+ {) @" b7 k5 F% g, K, I[backcolor=white !important]4 ( w# t( V7 X& E
[backcolor=white !important]5 # i+ j: c( B& p1 Q' H. A
[backcolor=white !important]6 + G9 h7 _; P/ J9 _
[backcolor=white !important]7
" C& g3 S ^7 i- \( Z# t$ }! a3 W W Q2 K9 r* l( M- l1 ~
| [size=+0] [backcolor=white !important][
+ L: J7 _( P, l+ B* c X* j7 M[backcolor=white !important]['Source'], - J2 |$ T8 \* z; A. o5 O
[backcolor=white !important]['Cut','Copy','Paste','PasteText','Undo','Redo'], 6 `2 S8 s9 E& x0 v
[backcolor=white !important]['Bold','Italic','Underline','Strike','-'],
2 M" u1 G8 r& u[backcolor=white !important]['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 5 k) H* H" s5 A% U+ F% M. ]* v$ r2 o
[backcolor=white !important]['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
9 [* ^3 f+ P! V4 }[backcolor=white !important]
* A" t8 G* ?7 _; p" F% j
3 t, Z) k3 R0 Q; p* m2 h( d' p' A- j( w Q
+ e& |( ?1 h5 b, z' D& a
|
$ |$ s+ C- H; c* R- r* Y0 {& G. X( b
显示在 Filtered HTML 的效果为: + D3 ?% S% F" C( f
* @1 ^: b9 @4 B- O
: K0 H3 r; H( r7 F( @
: p; p- n/ {+ ?' M |
|
发表于 8-30-2011 05:28
楼主