Drupal7所见即所得编辑，灯箱，图片上传ckeditor，insert，colorbox

Drupal 7: editor wysiwyg, pictures upload, lightbox




) {. N! p( f' X; q

配置Drupal7，使用所见即所得的编辑器CKEditor，按钮进入图像观看灯箱脚本内的文章和照片。Drupal7的最佳配置，当然也有许多其他的方式。

I was hoping that with the release of Drupal 7 an editor was finally built in but was not the case, so I decided to publish this guide (or tutorial if you prefer) to configure Drupal 7 to use the WYSIWYG editor CKEditor, buttons for entering images within articles and photo viewing with a Lightbox script.

1）在sites\all创建名为libraries文件夹 。

1) Createa foldercalled "libraries"in the "sites\all" folder.

2）下载在colorbox（1.3.17测试）。

2) Download the colorbox (tested with 1.3.17) script at this url.

3）解压缩Colorbox上传到“sites\all\libraries”文件夹。

3) Unzip the Colorbox script and upload it to "sites\all\libraries" folder.

4）下载CKEditor（3.6.1测试）。

4) Download the CKEditor (tested with 3.6.1) at this url.

5）解压缩CKEditor，并把它上传到“sites\all\libraries”文件夹。

5) Unzip CKEditor and upload it to "sites\all\libraries" folder.

6）下载Drupal7版本的Colorbox（1.1测试版）模块 。

6) Download the Drupal 7 version (tested with 1.1) of the Colorbox module.

7）下载Drupal7版本的（2.1测试）WYSIWYG模块 。

7) Download the Drupal 7 version (tested with 2.1) of the WYSIWYG module.

8）下载Drupal7版本的（1.1测试）Insert模块 。

8) Download the Drupal 7 version (tested with 1.1) of the Insert module.

9）解压Colorbox, WYSIWYG, Insert这三个模块入，放入sites\all\modules文件夹

9) Unarchive the three modules (Colorbox, WYSIWYG, Insert) and upload them in the "sites\all\modules" folder.

% R% _7 h! D. R

现在你的sites\all文件夹如下图所示。

Now your "sites\all" folder must be like this picture.

10）进入Administrator---Configuration

10) Connect to your site as Administrator and go to the Configuration area.

11）启用Colorbox, WYSIWYG, Insert modules.三个模块。

11) Enable Colorbox, WYSIWYG, Insert modules.

12）编辑的“所见即所得编辑器Wysiwyg profiles”。

12) Edit the "Wysiwyg profiles".

13）设置CKEditor的Full HTML项目。

13) You need to set CKEditor for the Full HTML profile.

14）单击“Edit”按钮，勾选需要的选项。

14) Click the Edit button and select all the buttons you want to use on your CKEditor.

15）编辑Colorbox---configuration。设置Large Image Style。

15) Edit the Colorbox configuration.Set the Large Image Style.

16）进入Structure（结构），并选择Content Types（内容类型）。

16) Go to the Structure Area and choose Content Types.

17）点击Manage Fields（管理文章）内容类型的字段。

17) Click Manage Fields for the Article content type.

18）创建一个新的文件夹Type和Widget均为Image

18) Create a new folder eith type Image and Widget Image

19下一步所有选项为默认设置，保存，退出。

19) In the next form leave all the default settings and save.

20）在INSERT(插入)部分，选择"Enable insert button"(启用插入按钮)，检查"Colorbox thumbnail"(Colorbox缩略图)复选框，设置 "Number of values"值为Unlimited（无限）。然后点击保存按钮。

20) In the Insert section select "Enable insert button", check the "Colorbox thumbnail" checkbox, set Unlimited for the "Number of values" option.

6 c$ @8 [& A& K+ P

21）在管理显示“部分中选择”Hidden隐藏“的标签和格式的新领域。（此处原文不是很清楚，最好返回Structure页面，点击Article (Machine name: article)一行右侧manage display（管理显示）可看到下图界面），LABEL和FORMAT设为Hidden

21) In the Manage Display section select "Hidden" for the label and Format of the new field.

现在，当你发表文章的时候，如果设置Text Format为Full HTML格式，即可使用CKEditor。

（content type-Add content-Article）

Now when you create an article if you set Full HTML text format you can use the CKEditor.

在编辑器中，可以找到一个“Insert插入”选项，在这里你可以上传并插入图片。

Under the editor you find a "Insert" section where you can upload pictures and then you can insert them on the body.

点击缩略图显示图片灯箱效果。

When you click on the thumbnail the picture is displayed with a lightbox effect.

其他有趣的模块是所见即所得Wysiwyg ImageField和Media媒体，但他们还不太稳定 。

Other interesting modules are Wysiwyg ImageField and Media but they are not yet stable.

3 J  F, Y+ E# t, Q
本帖由型动视觉www.doooor.com翻译并测试，转载请著明，谢谢！

) b5 {( U: X- F* P4 ^
. I- l- t( k  U
1 {/ S! e# b$ f7 D: J/ Hhttp://jacklmoore.com/colorbox/