上周五因为项目中需要用到文本编辑器,就选了比较出名的FCK ,去官方下载最新的3.5 。
很早很早以前用过这玩意,但当时只是在学习编程的时候,而且只是简单的调用,其他啥都没干。。现在再来使用这东西,已经完全不记得怎么使用了,没办法,只好看了一下官方提供的DEMO,尝试着使用了。
还好,demo不复杂,看了下效果,大致就明白了。因为这次算是正式的第一次使用,对这玩意不太了解,不敢乱来,所以只是简单的替换了一下自带的表情以及研究了一下怎么设置toolbar 。
1、替换自带的表情:
这里要说一下,FCK的toolbar都是以插件的形式来加入的,插件是放在plugins这个文件夹下,所以表情也不例外,地址是:plugins\smiley\images 这个文件夹中。
a、把做好的图片都丢到这个文件夹中
b、在FCK的根目录找到ckeditor.js(之前的版本好像文件名不叫这个)文件,打开,找到里面的 smiley_images 变量,该变量是数组,在里面加上自己的表情的名字就OK啦。然后smiley_descriptions这个数组变量,则是表情的描述,可写可不写。。
PS: 官方自带的表情的size是 20*20 ,刚好我这次项目的表情也是20*20 ,如果图片不是20*20的,就要做一些其他的设置啦。这个设置没研究,不会,不过上网google一下应该是有的。。
2、选择我们需要的toolbar
根据官方的DEMO,我选择了JQUERY的方式选择tool,代码如下:
$(function(){
//begin
var config = {
toolbar:
[
['Styles','-','Format','-','Font','-','Bold', 'Italic', '-','Smiley','-','Image','-','Flash','-','Table']
]
}; //end 这个config就是我们对FCK的一些设置,采用JSON的形式,而toolbar就是设置tool了,里面的值不细说了,自己去查吧,"-"的作用只是为了分块的可写可不写,效果自己写一个demo就知道啦。
$('textarea').ckeditor(config); //这个就是创建FCK了
});
这次项目,FCK暂时只使用到以上2个功能,其他的等有需要再研究咯。
分享到:
相关推荐
总的来说,调整FCK编辑器的工具栏和下拉菜单宽度涉及对配置文件和CSS样式的理解。通过深入研究FCKeditor的文档和源代码,你可以实现更复杂的自定义,比如改变颜色、字体大小,甚至添加自定义功能。记住,每次修改后...
FCK编辑器漏洞综合利用工具
【FCK简装版 fck表情版】是一个轻量级的富文本编辑器,它在原始的FCKeditor基础上进行了简化,旨在提供一个更易于集成和使用的版本。FCKeditor是一款广泛应用于网页开发中的开源文本编辑器,能够让用户在网页上进行...
在“fck编辑器增加了表情”这一主题中,我们主要关注的是FCKeditor如何扩展其功能,以支持表情的插入和管理。在默认情况下,FCKeditor可能只提供基本的文字编辑功能,但通过自定义和扩展,我们可以将其转变为一个...
fckeditor综合利用工具,图形化界面,简单易上手
可以利用FCK编辑器漏洞的工具,具体利用方法见附件文档。
使用FCKeditor为WordPress的第三方工具,开发者可以定制编辑器的外观和功能,比如添加自定义按钮来执行特定的JavaScript函数,或者调整工具栏布局以适应特定的编辑需求。此外,还可以通过插件实现与WordPress媒体库...
综上所述,这份"FCK配置过的源代码"提供了对FCKeditor深度定制的实例,包括处理中文文件名乱码问题、调整文件上传大小、自定义字体和工具栏,以及通过JavaScript实现的特定功能。对于需要使用或进一步开发FCKeditor...
这两个文件主要负责初始化编辑器实例,并设置其基本属性,如宽度、高度、默认工具栏等。 **三、FCKEditor的配置** FCKEditor的配置主要通过JavaScript文件`fckconfig.js`进行,以下是一些重要的配置项: 1. **...
4. **自定义配置**:用户可以根据自己的需求调整编辑器的外观和行为,包括工具栏布局、语言设置、默认样式等。 5. **源码查看与预览**:用户可以切换到源代码模式查看和编辑HTML代码,同时也可以实时预览编辑效果。...
2. **配置文件**: 修改`fckconfig.js`文件,根据需求设置编辑器的默认参数,如工具栏布局、语言设置等。 3. **集成到网页**: 在网页中引用FCKeditor的JavaScript文件,并通过代码调用来实例化编辑器。 4. **表情配置...
这款编辑器功能强大,提供了丰富的工具栏选项,支持多种语言,并且可以自定义配置,以满足不同用户的需求。其中,FCKeditor的一个特色功能是支持插入各种表情符号,为用户提供更生动的文本表达方式。 QQ表情,源自...
然后找到FCK工具栏按钮设置代码,我这里以图片按钮为例 ,'Image', 在其后插入谷歌地图按钮代码 'googlemaps', 然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5...
5. **自定义配置**:可以通过修改`fckconfig.js`文件,定制编辑器的外观、工具栏布局及默认设置。 ### 安全与优化 虽然FCK文本编辑器提供了便捷的编辑功能,但也需要注意以下安全和优化问题: 1. **XSS攻击**:...
3. **配置文件**:打开`fckconfig.js`配置文件,可以定制编辑器的各种设置,如工具栏按钮、语言、默认样式等。 4. **引用JavaScript**:在你的网页中,通过引入`fckeditor.js`文件来加载编辑器。例如: ```html ...
**FCK代码高亮插件**是一款用于增强文本编辑器功能的工具,它能够帮助用户在编辑代码时实现代码的语法高亮显示,使得代码更易于阅读和理解。这款插件通常集成在富文本编辑器(如FCKeditor)中,提供了一种便捷的方式...
本资源包“fck资源整合包”专注于解决一个常见的问题:图片上传时出现的中文乱码问题,同时整合了三个关键的技术栈:FCKeditor、Struts和Hibernate。下面我们将详细探讨这些技术以及它们在整合中的作用。 FCKeditor...
总的来说,FCK在线JSP编辑器以其全面的功能和人性化的设计,为JSP开发带来极大的便利,是现代Web开发工具箱中不可或缺的一员。无论是进行快速原型设计,还是日常代码维护,它都能提供出色的支持。通过不断更新和优化...