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

相关文章

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令:chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

java如何调用kettle设置变量和参数

《java如何调用kettle设置变量和参数》文章简要介绍了如何在Java中调用Kettle,并重点讨论了变量和参数的区别,以及在Java代码中如何正确设置和使用这些变量,避免覆盖Kettle中已设置... 目录Java调用kettle设置变量和参数java代码中变量会覆盖kettle里面设置的变量总结ja

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给