使用所见即所得(Wysiwyg)编辑器, Drupal7 安装 CKEditor 编辑器的方法及配置:. D0 o5 _- }$ ~ g
$ C, v6 k( K$ z- 首先要下载模块和编辑器! |; T9 { e; ]" C* e" U- G- k
CKEditor Moudle: http://drupal.org/project/ckeditor1 O6 q# }& s9 z( R
IMCE Module: http://drupal.org/project/imce; s- ]% ?" w3 X' B% P( U7 x
CKEditor 编辑器: http://ckeditor.com/download - 安装 CKEditor Moudle 和 IMCE Moudle
9 x) g7 H1 n3 q: s: t1 ^* |将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到- v. j+ j' m2 J0 ?+ I9 C
sites/all/moudles/ckeditor/
4 a2 c+ s% Z+ A7 Q6 isites/all/moudles/imce/
7 z3 ?5 C/ O9 E5 g2 U* P$ P f然后将 CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图
) A1 m/ ~3 S6 Z" j. t) M/ x
( V" ]% T" w* }9 O放好后的路径如:
; p0 S8 X/ R: O! F3 U/sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js6 y7 e% v8 K! J# {
/sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php
5 K7 R1 F; x: S- Q' O% B$ k/sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php) | @ r6 ?- {2 y: |. Q
/sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/*$ b) q' s/ Q, e9 g
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*8 e8 \, A9 |: G, S, p5 e* o
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*; X0 K. y6 i* X; R3 l$ S$ _
/sites/all/modules/imce/css/*
$ g. Y2 f8 D0 p: F… - 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
- 在 Home » Administration » Configuration » Content authoring 中配置CKEditor ( 路径为 /admin/config/content/ckeditor)
$ a5 A! H" I! K1 v c1 W: `选择 Full HTML 的 edit Operations 进入 CKEditor 配置. ( 路径为 /admin/config/content/ckeditor/edit/Full )
4 i8 C9 a; i) S然后点击 EDITOR APPEARANCE 选项进去, 在显示的表单中有个Toolbar, 这个是配置CKEditor显示哪些操作标签的.: K7 L# V' Z0 y8 r
在默认的这行 ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'], 中添加一个 ‘IMCE‘ 这样才能在编辑器里显示 IMCE上传图片的图标.; m7 X& N1 O& [4 v( z3 Y# \
添加后为: ['Image','IMCE','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],/ o) s& m$ h- n A
接着在 Plugins 中选中 IMCE Window button in toolbar
. `, `2 E8 i5 R" L 2 L4 g1 R2 @ `& d( h9 v
最后在 File browser settings 中的
2 w# }( H: D3 t, nFile browser type (Link dialog)
) w5 _* _2 P* h, ]* m0 N' JFile browser type (Image dialog) + ~' v: K% E) t6 H# a3 U. `" H
File browser type (Flash dialog)
7 a1 i- V B. p# K/ y" n. I$ K' |三个选项都选择 IMCE, 如下图
( K* T" l' @& U$ w8 J3 W, T5 l7 C - OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了.( z) }/ _# f1 r+ t$ W, V
另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下, 比如我的设置如下$ ~! }' u6 o/ X9 ~( ?& H# O9 f% u
[backcolor=white !important][size=1em] [backcolor=white !important]1
R1 S! M( g% L4 P3 \: `[backcolor=white !important]2
" d7 w( z$ ~- P* x[backcolor=white !important]3
7 {) {; P1 E+ \( ?, X/ e[backcolor=white !important]4
: o. b; p5 j9 t0 y; U[backcolor=white !important]5
% N) c5 w- V0 Y4 l, r[backcolor=white !important]6 ' n0 \% ?# b0 z- S6 w
[backcolor=white !important]7 - J. R7 n5 W/ R$ N2 T( R0 `0 ?
6 e( m2 Z- q( z9 y0 z, ? | [size=+0] [backcolor=white !important][
5 g7 {/ C) H. O: a[backcolor=white !important]['Source'], * I) @! m ?0 S+ u
[backcolor=white !important]['Cut','Copy','Paste','PasteText','Undo','Redo'], # B, e& y' K- n" Q) V: O3 C
[backcolor=white !important]['Bold','Italic','Underline','Strike','-'],
& ]5 B4 q- e( h' ^' g[backcolor=white !important]['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], " j) H- ^- T% R" k5 ?- T+ Z8 @
[backcolor=white !important]['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ) e; r. R/ m" V x
[backcolor=white !important]
, Z ~5 v) l5 ]4 X) e7 u; f% B* Y6 l- L4 E- e; m
8 z6 M' A* I7 y; x
4 ~; e( |. k4 B5 a6 `
|
0 M5 ~+ w+ z7 }: B2 p3 L
/ B+ i3 ]9 }7 i {/ h) B$ G% N
显示在 Filtered HTML 的效果为: ( ^* q! V; @2 [% K) ?7 `
6 W8 e6 ~. i1 T. Q% f4 o
, G2 C5 z4 u% S; x( }: n8 j* c! l* K* y {
|
|
发表于 8-30-2011 05:28
楼主