FCKeditor的皮肤设置

Skins  皮肤

The FCKeditor interface is built using a skin system. The package is distributed with three skins ready to be used, but you can easily create your custom one.  FCKeditor的界面显示依赖于一套皮肤系统。这个发行包里有三套皮肤系统可以使用,当然你也可以很容易的创造一个自己的皮肤系统。

The distributed skins can be found in the "editor/skins" directory. Each skin (default, office2003 and silver) has its own directory with its files. Take a look at the "_samples/html/sample05.html" files to see those skins at work. 系统提供的皮肤文件可以在"editor/skins" 目录中找到。每种皮肤(default默认,office2003 和 silver银色皮肤)都有自己的目录。可以浏览"_samples/html/sample05.html" 文件来查看这些皮肤的显示效果。

Creating your Skin 创建你自己的皮肤

The easiest way to create a skin is making a copy of the default one and making modifications to its files. So, just make copy of the "editor/skin/default" folder and give it the name you prefer. 最简单的创建一套皮肤的方式就是拷贝默认的皮肤目录,比如拷贝 "editor/skin/default" 目录,然后对该目录里的文件做些修改,再改名为自己的皮肤名字即可。

It is recommended to place your skin outside the FCKeditor directory. In this way you don't have to be afraid of losing it when updating the editor to newer versions. 建议将你自己的皮肤文件放到FCKeditor的安装目录外。这样你就不用担心在升级新版本时会丢失自己的皮肤文件了。

Basic Skin Files   基本的皮肤文件

The following files must be found in your skin directory:   下面是你的皮肤目录中必须有的几个文件。

      ● fck_editor.css: this file defines the main interface, including the toolbar, its items (buttons, panels, etc.) and the context menu.  fck_editor.css: 这个文件定义了主体界面的布局,包括工具条,按钮,各种面板,以及弹出菜单等的样式。

      ● fck_dialog.css: this file defined the dialog boxes basic structure (standard for all dialogs).  fck_dialog.css: 这个文件定义了对话框的基本结构(所有对话框的标准)。

      ● fck_strip.gif: the default toolbar buttons and context menu icons are designed in this special image file. It is a vertical image containing all icons placed one above the other. Each icon corresponds to a 16x16 pixels image. Custom images can also be added to this "strip".   fck_strip.gif: 所有默认的工具条按钮以及弹出式菜单按钮的图标都是在这个图形文件中设计的。这是一个包含了所有图标的垂直图像文件,可以使用css来定位不同的图标。每个图标都是一副16x16像素的图形。自定义的图形也可以添加到这个条状图形集里。

      ● images/toolbar.buttonarrow.gif: the small arrow image used in the toolbar combos and "panel buttons". 
images/toolbar.buttonarrow.gif: images目录中的toolbar.buttonarrow.gif 小型箭头图标主要用于下拉列表组合框以及一些面板按钮(比如前景色,背景色面板的按钮)。

Other images used by the skin (in the css files) are encouraged to be placed in the "images" folder. 皮肤中需要使用的其他图形文件(比如在css文件中要用到的图形),这些文件最好统一放在"images"目录中。

The CSS Files  CSS文件

The most common way of customizing the skin is by making changes to the fck_editor.css and fck_dialog.cssfiles. Those files have some comments regarding their contents. 自定义皮肤的最常用的方式是对fck_editor.css 和 fck_dialog.css文件做修改即可。这些文件对他们的内容都做了些注释以方便查看和修改。

So, just go playing with those files and have fun! If your changes to the .css files appear to have no effect, try flushing your browser's cache and reload the page containing the FCKeditor. 所以,只需要玩转这些文件,你就会发现其中的乐趣!如果你改变了.css文件后,界面显示没什么改变的话,可以试着清空一下你的浏览器的缓存,再重新加载编辑器的页面。

Configuring the Editor  编辑器的皮肤配置

By default, FCKeditor is configured to use the "editor/skins/default" skin.  默认情况下,FCKeditor 使用的是"editor/skins/default" 目录中的皮肤。

It is quite simple to set the editor to use other skin. Just set the SkinPath configuration option to the skin directory path. For example, in the fckconfig.js file:   只需要设置SkinPath 该配置选项为指定的皮肤所在路径,即可改变编辑器的皮肤。例如,在fckconfig.js文件中设置如下:

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

Or: 或:

FCKConfig.SkinPath = '/MySkin/' ;

Of course the best solution is to set the skin directory path in your cutom Configuration File

You may also set the path in the server side, when creating an editor instance. In PHP, for example:
当然,设置皮肤路径最好是在你的自定义的配置文件中设置(这样可以防止升级后导致配置失效),你当然也可以在服务端程序中进行设置,当使用PHP来创建编辑器的实例时,可以使用以前提到过的Config数组来改变配置,例如:

$oFCKeditor->Config['SkinPath'] = '/MySkin/' ;
Publishing and Downloading Skins    发布和下载皮肤

You can find our Skins directory at our SourceForge web site, following this URL:
你可以在下面的链接中查找我们提供的皮肤目录:
http://sourceforge.net/tracker/?group_id=75348&atid=740153

We are inviting our community to publish your skins there. 我们很欢迎你在那发布你设计的皮肤。

posted @ 2010-09-04 07:46  夜壶  阅读(1755)  评论(0编辑  收藏  举报