使用所见即所得(Wysiwyg)编辑器, Drupal7 安装 CKEditor 编辑器的方法及配置:
& M2 I0 ]% ]9 l- R9 Y7 H
3 d+ |' h" i' `. u- 首先要下载模块和编辑器
8 O" F1 i# F- @/ ]" lCKEditor Moudle: http://drupal.org/project/ckeditor
9 R* Z8 y. |) tIMCE Module: http://drupal.org/project/imce1 `- t' Y+ r4 L2 N
CKEditor 编辑器: http://ckeditor.com/download - 安装 CKEditor Moudle 和 IMCE Moudle1 b- K P0 e" I2 c$ V$ e
将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到# t" |1 M1 C f
sites/all/moudles/ckeditor/) I( K1 J% v% s7 \" B4 H, w
sites/all/moudles/imce/# S$ ]" d5 V' v: I
然后将 CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图+ {2 u% Y1 S' b/ Z' \6 n
: p, E7 I% o, ?- F2 h) e8 ]放好后的路径如:1 P7 G% Z" m4 r% y/ H
/sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js
J0 @. o1 C% c' \- Z/sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php, C6 W2 F8 L% Y' w# J! A! p
/sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php
/ E1 k' b( b9 d8 s" }$ @# z/sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/* W5 D, Q* @5 { G! U' q
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*& b8 f' Q& J: x" p" [" M: z
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*" h/ a& c/ |4 P/ g' e
/sites/all/modules/imce/css/*) ]9 O$ W' X& N9 F: j1 z
… - 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
- 在 Home » Administration » Configuration » Content authoring 中配置CKEditor ( 路径为 /admin/config/content/ckeditor)/ z% Q( ]& l! {1 K/ J
选择 Full HTML 的 edit Operations 进入 CKEditor 配置. ( 路径为 /admin/config/content/ckeditor/edit/Full )
1 [' f) @0 @$ l( u然后点击 EDITOR APPEARANCE 选项进去, 在显示的表单中有个Toolbar, 这个是配置CKEditor显示哪些操作标签的.
5 y4 o, W6 \# K- E2 r0 d在默认的这行 ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'], 中添加一个 ‘IMCE‘ 这样才能在编辑器里显示 IMCE上传图片的图标.
$ ?+ N! r! V) k. k1 I* Y/ L7 g' L添加后为: ['Image','IMCE','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
! q2 t2 R7 G/ J, q" W! Y接着在 Plugins 中选中 IMCE Window button in toolbar
6 [3 y9 r+ M" y * o7 V* B! T- U& f1 }/ {8 o
最后在 File browser settings 中的
6 Z) W+ v( t4 V4 L0 |+ z9 kFile browser type (Link dialog)
$ F1 @/ e- R8 h6 k1 T f! f8 XFile browser type (Image dialog)
% _' @2 }& b. kFile browser type (Flash dialog)
( i1 B7 @: Y% v K三个选项都选择 IMCE, 如下图
r4 z9 B# E9 H- S - OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了.+ D* z6 G$ A2 O3 r, Z& D( t# f
另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下, 比如我的设置如下+ a; F( G" i0 T+ s& d
[backcolor=white !important][size=1em] [backcolor=white !important]1
- ^; `1 o9 d( }2 {7 B[backcolor=white !important]2
5 H: n G. i% b, @+ ?. X9 Q' x" d6 j[backcolor=white !important]3 6 i( o- O9 o2 A3 t/ v# Q7 B6 n
[backcolor=white !important]4
0 w* H. b# z" B% ]( d[backcolor=white !important]5
1 c/ Q/ C, ], \[backcolor=white !important]6
3 \# w* t$ X/ i. _7 l[backcolor=white !important]7
( N0 p7 C2 {6 e/ l/ i: W! i5 _
& ?- _2 d) H: e: ?/ F; P | [size=+0] [backcolor=white !important][
' |3 h k% X" p! E A[backcolor=white !important]['Source'],
9 z4 s7 J1 @5 I[backcolor=white !important]['Cut','Copy','Paste','PasteText','Undo','Redo'],
% e& \$ h2 n8 B0 h1 V/ F% f[backcolor=white !important]['Bold','Italic','Underline','Strike','-'], 2 y6 y- J- q; }. J# ^
[backcolor=white !important]['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], + b6 g' T. }. l7 M/ j' O& W4 ]3 E
[backcolor=white !important]['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ) F; Q9 Y5 r, B1 y( F- W) _
[backcolor=white !important] $ k B3 v& R. j# t' e+ G
( ~& ~1 R, o- p6 ]! |
: j6 _4 l' l: O- S& C. z3 i; c' e" P+ E( h2 a
|
( B: M2 G5 ^2 }$ J0 ~" I& |
$ K }+ [6 g( u8 C! O& a, W显示在 Filtered HTML 的效果为: ' R- l1 _, o& w( F. N
* l/ F) t! @( n3 ]/ ?! C; w
7 [5 E* f6 n" e5 w [
1 P. Q' F$ K3 x$ |5 M- u' b |
|
发表于 8-30-2011 05:28
楼主