使用所见即所得(Wysiwyg)编辑器, Drupal7 安装 CKEditor 编辑器的方法及配置:
3 L3 J* E) B; I% H* I2 V9 x7 z: H! d# w" ]# o5 Q0 O4 s M
- 首先要下载模块和编辑器
4 o& l5 ^2 h" m8 FCKEditor Moudle: http://drupal.org/project/ckeditor1 A) S7 z9 G) ?" O
IMCE Module: http://drupal.org/project/imce k4 a; T/ |# [0 k* N% g/ ~
CKEditor 编辑器: http://ckeditor.com/download - 安装 CKEditor Moudle 和 IMCE Moudle
7 R/ b* S& z2 u2 V将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到% c& Z" R; ^! M% P- h [4 E0 W
sites/all/moudles/ckeditor/
5 k/ S. y1 M4 h# qsites/all/moudles/imce/
% e( l, {7 b0 I6 w+ F然后将 CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图0 C% G8 U$ `' e# I) g: u
 d6 {7 o8 T3 I! A
放好后的路径如:5 f4 D3 w3 n4 ^1 \. D q- p
/sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js
7 U+ B/ e( d1 k5 @7 Q& K" f/sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php
5 Z7 q' Q, a: E$ c: m; E, ]8 R/sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php) e7 \ `5 c) U6 P3 A" V% Z: D
/sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/*
0 d2 G1 h' x+ ]2 P; Q0 F/sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/*2 n* I( x B i7 [* l3 E0 e5 j
/sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*+ C/ Z) e( }( r+ M7 }; {
/sites/all/modules/imce/css/*5 E8 \1 |- S. x, C8 y9 S
… - 在 Modules 中启用 CKEditor 和 ICME 这两个模块.
- 在 Home » Administration » Configuration » Content authoring 中配置CKEditor ( 路径为 /admin/config/content/ckeditor)* D1 {: v) ?) B; l# W" U# l
选择 Full HTML 的 edit Operations 进入 CKEditor 配置. ( 路径为 /admin/config/content/ckeditor/edit/Full )& n# m( ]1 r% Y+ u$ \# X
然后点击 EDITOR APPEARANCE 选项进去, 在显示的表单中有个Toolbar, 这个是配置CKEditor显示哪些操作标签的.) v$ O. _! r1 V1 Y2 `, N5 D
在默认的这行 ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'], 中添加一个 ‘IMCE‘ 这样才能在编辑器里显示 IMCE上传图片的图标.9 k1 Q" c% v9 L2 u' c' ^
添加后为: ['Image','IMCE','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],2 r& g9 s! L. ~! X# p0 ^( i
接着在 Plugins 中选中 IMCE Window button in toolbar, Z- H1 S5 ]5 V6 J& h) Z
' g, ^. ~% z: w, N. N6 ]# i最后在 File browser settings 中的
7 N9 V6 y+ D9 K" O0 I! M" L) ZFile browser type (Link dialog)
) E% K7 q5 m* C. `- cFile browser type (Image dialog) 2 A3 l( V+ y5 X7 \2 b- M6 D
File browser type (Flash dialog) 9 W6 x9 H' W: ~! Q. ]. R
三个选项都选择 IMCE, 如下图
; n. A7 m* A, E' l# I' s - OK, 配置完毕, 在 add Content 时选择 FULL HTML就行了.+ M* z( Q/ `, s# X( x
另外也可以配置 Filtered HTML, 在 Toolbar配置里面设置一下, 比如我的设置如下& |( G' f& P8 `2 w7 Y1 N3 _
[backcolor=white !important][size=1em] [backcolor=white !important]1 o* k+ g$ b( K
[backcolor=white !important]2
6 B0 G. ?3 u% ]$ [7 x* A[backcolor=white !important]3 H; V0 V* u- n1 v+ N
[backcolor=white !important]4 5 O) A: n7 r+ U- @
[backcolor=white !important]5 # |5 u5 x H" {$ E
[backcolor=white !important]6
+ h' X5 _+ B8 _/ D$ }: {% x[backcolor=white !important]7 + c( B& ]' U1 L9 \
' W+ S4 ] l- [: V' N | [size=+0] [backcolor=white !important][
1 G9 E9 m" Z+ X$ N8 o! r9 ?[backcolor=white !important]['Source'], " }# X/ V3 j0 K- b/ t5 T* P
[backcolor=white !important]['Cut','Copy','Paste','PasteText','Undo','Redo'], - _9 t' |; D' k3 v7 {7 D7 T" X
[backcolor=white !important]['Bold','Italic','Underline','Strike','-'], 1 B& N) Y2 J) g, C# M, t/ I
[backcolor=white !important]['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 7 [2 C. c% k/ X3 @! Q5 V, M, R3 m
[backcolor=white !important]['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 3 `" S+ w/ O) O. w# h
[backcolor=white !important] ( v7 {! ~, N4 `: @+ T. L3 k
7 g, ~) E7 ^- O+ }8 w1 U% Y: q# H9 P( }) u8 B$ n
9 `& e* }5 j9 ^$ ~4 C4 K; e4 N5 z |
; C2 R! O& E5 x) h9 T# S
p! r- s* a2 } ]
显示在 Filtered HTML 的效果为: . ^3 \2 G* k2 N. j0 J2 g: f/ W
' _& ~8 K( ]% }
: M5 }* J- g. Y" X2 e
% x2 G. ?" n" D9 ~ |
|
发表于 8-30-2011 05:28
楼主