使用所见即所得(Wysiwyg)编辑器, Drupal7 安装 CKEditor 编辑器的方法及配置:
8 G5 h; `5 e( S1 ^( `+ ]& B1 N z- C4 h Z) r4 L6 p- n
- 首先要下载模块和编辑器
" L6 K0 Z3 k$ X; m( }CKEditor Moudle: http://drupal.org/project/ckeditor5 d+ I; O6 b( d2 J8 C7 d# o( v
IMCE Module: http://drupal.org/project/imce
! \5 h9 h: i8 O8 TCKEditor 编辑器: http://ckeditor.com/download - 安装 CKEditor Moudle 和 IMCE Moudle
9 R" Y6 x3 d/ y将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到3 K6 ?" V: d4 ^; c
sites/all/moudles/ckeditor/
* ^8 a6 \; d1 O+ _# X5 T- Usites/all/moudles/imce/
1 |& d7 d+ k7 F, m1 `( _; z. z% O然后将 CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图
, [% `, }% x' {6 L4 _ " Q9 l+ }' A$ g1 G1 }1 R. i! D* E
放好后的路径如:! ]! U% _5 {! @
/sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js
- c$ x! G& W, {5 T- l/sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php9 s) N; D. d! i! P \( f$ Q$ y: K
/sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php! _2 J8 Q) W- Z4 D z- J
/sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/*& u+ F6 @$ H: K8 S- p' {, {3 J) ]
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*1 P; `& S* `* P. p: q" X
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*; K# L7 f9 f2 b! M
/sites/all/modules/imce/css/*
6 O w1 D$ {& E. Z0 k… - 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
- 在 Home » Administration » Configuration » Content authoring 中配置CKEditor ( 路径为 /admin/config/content/ckeditor)& F- Z3 o/ w; l0 t% g
选择 Full HTML 的 edit Operations 进入 CKEditor 配置. ( 路径为 /admin/config/content/ckeditor/edit/Full )
0 r4 |" f0 g' G7 X" r4 g4 ~- b然后点击 EDITOR APPEARANCE 选项进去, 在显示的表单中有个Toolbar, 这个是配置CKEditor显示哪些操作标签的.# q8 Z8 Q; F" h, Y0 x9 |& E
在默认的这行 ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'], 中添加一个 ‘IMCE‘ 这样才能在编辑器里显示 IMCE上传图片的图标.
# I( `5 t6 f2 ^7 M添加后为: ['Image','IMCE','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],6 G4 q( b; E, r& { R& |
接着在 Plugins 中选中 IMCE Window button in toolbar
! j* M' m! m2 S1 \
# N! B6 L$ l3 z. t- N4 d; b最后在 File browser settings 中的
9 C; e8 ?8 k$ f! u( R6 AFile browser type (Link dialog)
. a9 v0 V$ W7 a8 X4 G! u/ GFile browser type (Image dialog) ! n1 C; f- b; ]8 G0 q/ V
File browser type (Flash dialog) $ e. l' ^0 k* }0 k7 `# b
三个选项都选择 IMCE, 如下图
e# w7 n2 S# p - OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了.
6 V) G2 N Z. N+ ]+ u; D) ]另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下, 比如我的设置如下3 } W+ m! D3 H* c7 @1 b
[backcolor=white !important][size=1em] [backcolor=white !important]1
. L$ h* i+ k' i[backcolor=white !important]2
+ q# |9 u& t# u[backcolor=white !important]3 , ~9 w3 X- f, }2 h" m
[backcolor=white !important]4 * @+ H/ i" J4 T* Q
[backcolor=white !important]5 ) L! a0 Y* L3 X, j! G
[backcolor=white !important]6
9 ]+ h& M$ Q; E; ]4 n[backcolor=white !important]7 + ^+ b. N& _# z, j3 K% ^9 Q
& H2 s$ I, M+ g7 i | [size=+0] [backcolor=white !important][
3 s; Z' t# q7 P) z: H[backcolor=white !important]['Source'], ' ~2 q% H0 m5 A
[backcolor=white !important]['Cut','Copy','Paste','PasteText','Undo','Redo'], " E [0 m8 D, q1 V' G8 i
[backcolor=white !important]['Bold','Italic','Underline','Strike','-'], 3 `8 h0 t) G8 o3 v
[backcolor=white !important]['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ; X1 z+ q5 ?' B6 z D: \' l
[backcolor=white !important]['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], * {: K, \4 L/ ]; k* z! V
[backcolor=white !important]
. w, {) x; z; i- I% z3 b3 S D( m/ G9 R
1 P0 o, c+ a( t% G
* O* b& \, j( s4 e- | |
7 G% |2 H' b$ y" G9 b" _
8 i C& B0 F& l; X5 @显示在 Filtered HTML 的效果为: ; [5 f! t3 L9 e2 w( a
5 D+ o/ s* ?( c/ |
/ ]: V% J+ v7 T- n' @
K! E" u5 Z9 [% ?% [
: g, O: Z8 F k; ^1 g) U9 ]8 ] |
|
发表于 8-30-2011 05:28
楼主