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

相关文章

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并给

Tomcat性能参数设置

转自:http://blog.csdn.net/chinadeng/article/details/6591542 Tomcat性能参数设置 2010 - 12 - 27 Tomcat性能参数设置 博客分类: Java Linux Tomcat 网络应用 多线程 Socket 默认参数不适合生产环境使用,因此需要修改一些参数   1、修改启动时内存参数、并指定J

linux下非标准波特率的设置和使用

通常,在linux下面,设置串口使用终端IO的相关函数设置,如tcsetattr等函数,linux内部有一个对常用波特率列表的索引,根据设置的波特率用底层驱动来设置异步通信芯片的寄存器 对于非标准的任意波特率需要用ioctl(fd, TIOCGSERIAL, p)和ioctl(fd, TIOCSSERIAL, p)的配合,ioctl的最后一个参数是struct serial_struct *

win7如何设置SATA硬盘

Win7在安装时设置的是IDE,安装完后需要在注册表中设置为SATA,否则直接设BIOS会不认硬盘,具体如下 注册表子项:HKEY_LOCAL_MACHINE/System/CurrentControlSet/Services/Msahci 找到Start键,将值0改为3

centOS7.0设置默认进入字符界面

刚装的,带有x window桌面,每次都是进的桌面,想改成自动进命令行的。记得以前是修改 /etc/inittab 但是这个版本inittab里的内容不一样了没有id:x:initdefault这一行而且我手动加上也不管用,这个centos 7下 /etc/inittab 的内容 Targets systemd uses targets which serve a simil

设置zookeeper开机自启动/服务化

设置启动zk的用户为zookeeper 设置启动zk的用户为zookeeper用户,而非root用户,这样比较安全。 可以使用root用户进行zookeeper的管理(启动、停止…),但对于追求卓越和安全的的人来说,采用新非root用户管理zookeeper更好。 步骤: 1. 创建用户和用户组 2. 相关目录设置用户和用户组属性 3. 采用zookeeper用户启动进程 设置z

如何设置好看的电脑屏保?电脑屏保设置教程

如何设置好看的电脑屏保?电脑屏保设置教程。大家好,今天小编给大家带来了好看的电脑屏保,教大家如何设置一个好看的电脑屏保。屏保软件很多,今天我们介绍一款比较有特殊的屁屏保软件:芝麻时钟(芝麻时钟 桌面时钟软件 桌面日历 时钟屏保 世界时钟软件下载芝麻时钟是很有个性的时钟软件,支持桌面时钟,任务栏时钟美化,世界时钟,桌面日历,桌面天气,记事便签,时钟屏保。把时钟放到桌面,选择自己喜欢的主题修改任务栏时

jqgrid设置单元格可编辑

1 在单元格的属性列设置为editable。 2 点击编辑按钮的时候,触发某一行设置为edit的状态。 jQuery("#rowed4").jqGrid({url:'server.php?q=2',datatype: "json",colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],colModel

eclipse中相同变量显示变色设置

java文件的设置"Window"-"preferences"-"Java"-"Editor"-"Mark Occurrences"复选框勾选 js文件的设  置"Window"-"preferences"-"web"-"javascript"-"Mark Occurrences"复选框勾选 。