`
随影清风
  • 浏览: 39367 次
  • 性别: Icon_minigender_1
  • 来自: 福州
文章分类
社区版块
存档分类
最新评论

FCK3.5替换表情和设置工具栏

阅读更多
    上周五因为项目中需要用到文本编辑器,就选了比较出名的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编辑器(调整工具栏,下拉宽度)

    总的来说,调整FCK编辑器的工具栏和下拉菜单宽度涉及对配置文件和CSS样式的理解。通过深入研究FCKeditor的文档和源代码,你可以实现更复杂的自定义,比如改变颜色、字体大小,甚至添加自定义功能。记住,每次修改后...

    FCK编辑器漏洞综合利用工具

    FCK编辑器漏洞综合利用工具

    FCK简装版 fck表情版

    【FCK简装版 fck表情版】是一个轻量级的富文本编辑器,它在原始的FCKeditor基础上进行了简化,旨在提供一个更易于集成和使用的版本。FCKeditor是一款广泛应用于网页开发中的开源文本编辑器,能够让用户在网页上进行...

    fck编辑器 增加了表情

    在“fck编辑器增加了表情”这一主题中,我们主要关注的是FCKeditor如何扩展其功能,以支持表情的插入和管理。在默认情况下,FCKeditor可能只提供基本的文字编辑功能,但通过自定义和扩展,我们可以将其转变为一个...

    FCK编辑器综合利用工具.exe

    fckeditor综合利用工具,图形化界面,简单易上手

    FCK编辑器漏洞利用工具

    可以利用FCK编辑器漏洞的工具,具体利用方法见附件文档。

    FCK第三方工具

    使用FCKeditor为WordPress的第三方工具,开发者可以定制编辑器的外观和功能,比如添加自定义按钮来执行特定的JavaScript函数,或者调整工具栏布局以适应特定的编辑需求。此外,还可以通过插件实现与WordPress媒体库...

    FCK配置过的源代码

    综上所述,这份"FCK配置过的源代码"提供了对FCKeditor深度定制的实例,包括处理中文文件名乱码问题、调整文件上传大小、自定义字体和工具栏,以及通过JavaScript实现的特定功能。对于需要使用或进一步开发FCKeditor...

    FCK中文配置指南

    这两个文件主要负责初始化编辑器实例,并设置其基本属性,如宽度、高度、默认工具栏等。 **三、FCKEditor的配置** FCKEditor的配置主要通过JavaScript文件`fckconfig.js`进行,以下是一些重要的配置项: 1. **...

    网页FCK编辑控件示例

    4. **自定义配置**:用户可以根据自己的需求调整编辑器的外观和行为,包括工具栏布局、语言设置、默认样式等。 5. **源码查看与预览**:用户可以切换到源代码模式查看和编辑HTML代码,同时也可以实时预览编辑效果。...

    Fck文本编辑器 FCKeditor fckeditor

    2. **配置文件**: 修改`fckconfig.js`文件,根据需求设置编辑器的默认参数,如工具栏布局、语言设置等。 3. **集成到网页**: 在网页中引用FCKeditor的JavaScript文件,并通过代码调用来实例化编辑器。 4. **表情配置...

    FCKeditor QQ表情包

    这款编辑器功能强大,提供了丰富的工具栏选项,支持多种语言,并且可以自定义配置,以满足不同用户的需求。其中,FCKeditor的一个特色功能是支持插入各种表情符号,为用户提供更生动的文本表达方式。 QQ表情,源自...

    FCK编辑器谷歌地图插件 for pjblog.rar

    然后找到FCK工具栏按钮设置代码,我这里以图片按钮为例 ,'Image',  在其后插入谷歌地图按钮代码 'googlemaps',  然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5...

    FCK文本编辑器

    5. **自定义配置**:可以通过修改`fckconfig.js`文件,定制编辑器的外观、工具栏布局及默认设置。 ### 安全与优化 虽然FCK文本编辑器提供了便捷的编辑功能,但也需要注意以下安全和优化问题: 1. **XSS攻击**:...

    Fck 编辑器 实例

    3. **配置文件**:打开`fckconfig.js`配置文件,可以定制编辑器的各种设置,如工具栏按钮、语言、默认样式等。 4. **引用JavaScript**:在你的网页中,通过引入`fckeditor.js`文件来加载编辑器。例如: ```html ...

    FCK代码高亮插件

    **FCK代码高亮插件**是一款用于增强文本编辑器功能的工具,它能够帮助用户在编辑代码时实现代码的语法高亮显示,使得代码更易于阅读和理解。这款插件通常集成在富文本编辑器(如FCKeditor)中,提供了一种便捷的方式...

    fck资源整合包

    本资源包“fck资源整合包”专注于解决一个常见的问题:图片上传时出现的中文乱码问题,同时整合了三个关键的技术栈:FCKeditor、Struts和Hibernate。下面我们将详细探讨这些技术以及它们在整合中的作用。 FCKeditor...

    FCK在线JSP编辑器

    总的来说,FCK在线JSP编辑器以其全面的功能和人性化的设计,为JSP开发带来极大的便利,是现代Web开发工具箱中不可或缺的一员。无论是进行快速原型设计,还是日常代码维护,它都能提供出色的支持。通过不断更新和优化...

Global site tag (gtag.js) - Google Analytics