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

相关文章

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

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 的值。