FCKeditor的皮肤设置

2024-03-13 22:58
文章标签 设置 皮肤 fckeditor

本文主要是介绍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. 我们很欢迎你在那发布你设计的皮肤

 

 

http://www.zaccn.com

 

这篇关于FCKeditor的皮肤设置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806462

相关文章

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快?想要通过设置路由器mtu获得最佳网速,该怎么设置呢?下面我们就来看看路由器MTU设置最佳网速的技巧... 答:1500 MTU值指的是在网络传输中数据包的最大值,合理的设置MTU 值可以让网络更快!mtu设置可以优化不同的网

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。

详解Linux中常见环境变量的特点与设置

《详解Linux中常见环境变量的特点与设置》环境变量是操作系统和用户设置的一些动态键值对,为运行的程序提供配置信息,理解环境变量对于系统管理、软件开发都很重要,下面小编就为大家详细介绍一下吧... 目录前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》:本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换(推荐方法)二、通过 settings.json 配置(项目级/全局)三、

如何Python使用设置word的页边距

《如何Python使用设置word的页边距》在编写或处理Word文档的过程中,页边距是一个不可忽视的排版要素,本文将介绍如何使用Python设置Word文档中各个节的页边距,需要的可以参考下... 目录操作步骤代码示例页边距单位说明应用场景与高级用China编程途小结在编写或处理Word文档的过程中,页边距是一个

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设