`
caiying0504
  • 浏览: 343138 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

FCKeditor常用设置

阅读更多
由于FCKeditor功能强大,所以我们可以通过一些简单的设置使FCKeditor更加符合您的项目需求。
设置工具栏很简单,只需打开fckeditor目录下面的fckconfig.js文件,按CTRL+F搜索FCKConfig.ToolbarSets["Default"]代码,找到如下代码。
       FCKConfig.ToolbarSets["Default"] = [
       ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
       ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
       '/',
       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
       ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
       ['Link','Unlink','Anchor'],
       ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
       '/',
       ['Style','FontFormat','FontName','FontSize'],
       ['TextColor','BGColor'],
       ['FitWindow','ShowBlocks','-','About']
]
在默认情况下,FCKeditor会调用上面定义的所有工具栏按钮。可以根据自己的需求进行设置。对上面的配置选项功能说明进行汇总。
代码名称                     功能                                代码名称                                 功能
Source                        源代码                           DocProps                                页面属性
-                                   |分隔符                         Save                                         保存
NewPage                   新建                                Preview                                    预览
Templates                 模板                               Cut                                             剪切
Copy                           复制                                Paste                                        粘贴
PasteText                  粘贴为无格式文本        PasteWord                              从MS Word粘贴
Print                            打印                                 SpellCheck                              拼写检查
Undo                          撤消                                Redo                                         重做
Find                            查找                                Replace                                    替换
SelectAll                    全选                                 RemoveFormat                       清除格式
Form                          表单                                 Checkbox                                 复选框
Radio                        单选框                             TextField                                   单行文本
Textarea                    多行文本                          Select                                       列表菜单
Button                        按钮                                 ImageButton                            图像域
HiddenField             隐藏域                               Bold                                            加粗
Italic                           倾斜                                  Underline                                下划线
StrikeThrough          删除线                               Subscript                                 下标
Superscript              上标                                   orderedList                             插入/删除编号列表
UnorderedList         插入/删除项目列表       Outdent                                     减少缩进
Indent                        增加缩进                           Blockquote                              块引用
CreateDiv                 创建DIV                             JustifyLeft                                左对齐
JustifyCenter           居中对齐                           JustifyRight                                右对齐
JustifyFull                 两端对齐                            Link                                            插入/编辑链接
Unlink                       取消链接                            Anchor                                        插入/编辑锚点链接
Image                       插入编辑图像                     Flash                                          插入/编辑Flash
Table                        插入/编辑表格                 Rule                                             插入水平线
Smiley                      插入表情                              SpecialChar                            插入特殊符号
PageBreak              插入分页                             Style                                          样式
FontFormat             格式                                     FontName                               字体
FontSize                  大小                                     TextColor                                 文本颜色
BGColor                  背景颜色                              FitWindow                              全屏编辑
ShowBlocks           显示区域                               About                       关于Fuckeditor               
工具栏配置选项功能进行汇总

你也可以创建一个非默认的工具栏按钮设置,您可以从FCKConfig.ToolbarSets["Default"]当中的代码重新复制一份,然后将Default改成您想要的名字。

注意:fckconfig.js配置选项采用JavaScript语法,如果您不懂JavaScript的话,请在配置之前进行备份。

如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,这里配置了一个适合于大部份网站使用的工栏目按钮
FCKConfig.ToolbarSets["MyDesign"] = [
['Source','DocProps','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Style','FontFormat','FontName','FontSize'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks']] ;
要想使用自定义的工具栏按钮,必须在创建FCKeditor实例后设置使用的工具栏选项。
oFCKeditor.ToolbarSet = "MyDesign";       //JavaScript

接下来,我们对常用的一些设置选项功能进行总结,可参考fckeditor目录下fckconfig.js文件进行阅读

FCKConfig.AutoDetectLanguage             自动语言检查
FCKConfig.DefaultLanguage                    默认语言设计,建议改成zh-cn
FCKConfig.ContextMenu                            右键菜单内容
FCKConfig.ToolbarStartExpanded           当页面载入的时候,工具栏默认情况下是否展开
FCKConfig.FontColors                               文字颜色列表
FCKConfig.FontNames                             字体列表,可加入国内常用的字体,如宋体、揩体、黑体等
FCKConfig.FontSizes                                 字号列表
FCKConfig.FontFormats                            文字格式列表
FCKConfig.StylesXmlPath                         指定风格XML文件路径
FCKConfig.TemplatesXmlPath                 指定模板XML文件路径
FCKConfig.BodyId                                       设置编辑器的id
FCKConfig.BodyClass                               设置编辑器的class
FCKConfig.DefaultLinkTarget                   设置链接默认情况下的target属性
FCKConfig.BaseHref                                  相对链接的基地址
FCKConfig.SkinPath                                  设置默认皮肤路径
FCKConfig.SmileyPath                              表情文件路径,您可以设置此项更改表情
FCKConfig.SmileyImage                          表情文件
FCKConfig.SmileyColumns                     将表情分成几列显示
FCKConfig.SmileyWindowWidth             显示表情窗口的宽度,单位像素
FCKConfig.SmileyWindowHeight           显示表情窗口的高度,单位像素
FCKConfig.TabSpaces                             编辑器域内是否可以使用Tab键,1为可以,默认为0(不可以)

    接下来是编辑器位置的设置,我的习惯是把editor放在根目录下,最开始所述的六个文件也放在根目录下(Tips:建议放在根目录下,并且建议使用时设置路径也采用绝对路径,如"/fckeditor/",而我的习惯的设置是"/"),这样有利于fckeditor的更新升级,并且网站下所有文件夹都可以任意调用,不存在其它文件夹名变了而其它地方就无法使用编辑器的问题。
    打开fckeditor.js文件,找到 this.BasePath = '/fckeditor/' ;改为 this.BasePath = '/' ;
    编辑器域内默认的显示字体为12px,想要修改可以通过修改样式表来达到要求,打开editor/css/fck_editorarea.css,把第4行改为 font-size: 14px;即可。 14即为你想要的字体的大小

FCKEDITOR类参考:(fckeditor.js)
下面是用来在页面中建立编辑器的FCKEDITOR类的说明

构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容

属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;

集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并输出编辑器

RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框

自定义样式列表
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中
这个XML文件的结构分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式。
分享到:
评论

相关推荐

    FCKeditor具体设置及使用

    FCKeditor具体设置及使用 FCKeditor是一款功能强大且灵活的在线编辑器,可以帮助开发者轻松实现网页上的富文本编辑功能。下面将详细介绍FCKeditor的配置和使用方法。 配置FCKeditor 首先,需要下载FCKeditor_...

    FCKEDITOR 常用上传方法

    **FCKEditor常用上传方法** FCKEditor是一款开源的富文本编辑器,它允许用户在网页上进行类似Word的文本编辑。在FCKEditor中,文件上传是其功能之一,对于图片、文档等媒体资源的管理非常关键。以下是关于FCKEditor...

    比较常用的组建fckeditor的实例

    在本文中,我们将深入探讨FCKeditor的常用组建及其应用实例,帮助你更好地理解和使用这款编辑器。** ### 一、FCKeditor简介 FCKeditor是一款基于JavaScript的Web富文本编辑器,支持多种浏览器,如Internet ...

    FCKeditor.Net_2.6.3.zip和FCKeditor-v2.6.3

    3. **丰富的编辑功能**:FCKeditor提供了许多高级编辑功能,如字体样式调整、段落格式设置、颜色选择、链接管理、图片上传、表格编辑、嵌入多媒体内容等。 4. **自定义扩展**:开发者可以通过API和插件系统对...

    Fckeditor(综合利用工具)

    这款编辑器支持多种操作系统和浏览器,并且具备高度的可定制性,是开发人员集成到网站中用于创建、编辑内容的常用工具。 Fckeditor的核心特性包括: 1. **丰富的文本格式化**:Fckeditor提供了对文本样式、字体、...

    最新FCKeditor_2.6 版本 FCKeditor编辑器和控件

    按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用中,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器...

    常用插件 FCKeditor 自己可以修改图片字体

    FCKeditor是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和管理,它允许用户在浏览器端进行类似于桌面文字处理软件的编辑操作。这个编辑器以其丰富的功能、易用性和可扩展性深受开发者喜爱。在标题和描述中...

    FCKeditor使用指南(FCKeditor_2.6.3)

    2. **语言设置**:FCKeditor支持多种语言,可以在`languages`目录下找到语言文件,根据需求调整默认语言。 **四、功能特性** 1. **文本格式化**:提供加粗、斜体、下划线、字体选择、字号调整、颜色设置等基本格式...

    传智播客fckeditor视频

    综上所述,“传智播客fckeditor视频”主要围绕FCKeditor这款富文本编辑器展开,不仅覆盖了安装配置、常用功能、高级特性和实战案例等多个方面,还可能涉及其他相关技术领域的知识,旨在帮助学习者全面掌握FCKeditor...

    FCKeditor_2.6.3+FCKeditor-2.3.rar

    2. **丰富的编辑功能**:它提供了诸如字体、字号、颜色、对齐方式、列表、表格、链接、图片、多媒体插入等文本编辑常用功能。 3. **HTML格式化**:编辑器可以对输入的HTML代码进行格式化,保持代码整洁,便于后期...

    FCKeditor GB2312 编码ASP

    5. **乱码解决方案**:如果在使用FCKeditor时出现乱码,首先检查ASP页面是否正确设置了代码页,然后检查数据库连接字符串、存储过程或SQL语句中的字符集设置。另外,还要确保在提交数据到服务器时,对中文内容进行了...

    FCKeditor完整.zip

    - **兼容性测试**:尽管FCKeditor支持多种浏览器,但在实际应用中仍需进行兼容性测试,确保在目标用户群体常用的浏览器上表现良好。 - **安全性**:由于FCKeditor允许用户输入HTML,可能存在XSS(跨站脚本攻击)风险...

    fckeditor2.6.1在线编辑器

    3. **丰富的编辑功能**:包括字体样式设置、段落格式调整、链接创建、图像和多媒体插入、表格操作、颜色选择等,几乎涵盖了所有常规的文本编辑需求。 4. **自定义工具栏**:用户可以根据自己的需要自定义编辑器的...

    FCKeditor使用指南

    - **将FCKeditor中的内容是否有改动的值重新设置** #### 8. 外联编辑条(多个编辑域共用一个编辑条) - 实现多个编辑域共享相同的工具栏。 #### 9. 解释fck样式(CSS)的工作原理 - 了解FCKeditor如何使用CSS来渲染...

    asp.net FCKeditor 配置例子

    ASP.NET FCKeditor是一个在ASP.NET环境中常用的富文本编辑器,它允许用户在网页上创建和编辑复杂的HTML内容。FCKeditor提供了丰富的功能,如文本格式化、图像上传、链接管理等,使得非程序员也能方便地编辑网页内容...

    FCKeditor2.6.4使用说明

    - 工具栏功能:包含文字格式化、段落样式、插入链接、图片、表格等常用编辑工具。 3. **配置** - 通过修改`fckconfig.js`文件,可以自定义工具栏按钮、语言、文件上传路径等配置。 - `FCKConfig.ToolbarSets`...

    fckeditor for asp.net

    在实际应用中,为了更好地利用fckeditor for asp.net,开发者需要了解如何配置编辑器的设置,如何通过服务器端代码(如C#或VB.NET)与编辑器进行交互,以及如何处理用户提交的富文本内容。同时,掌握JavaScript和ASP...

    JS操作Fckeditor的一些常用方法(获取、插入等)

    本文将详细介绍如何使用JavaScript与FCKeditor进行交互,包括获取和设置编辑器内容、插入内容以及调用编辑器的内置命令。 ### 1. 获取FCKeditor内容 FCKeditor提供了两个方法来获取编辑器中的内容,分别对应HTML...

    FckEditor 2.5优化版

    2. **功能精简**:在保留核心编辑功能的同时,去除了一些不常用或冗余的功能,使得整个编辑器更加轻量化,便于快速集成到各种项目中。 3. **体积缩小**:35KB的大小相对于原版大幅减小,减少了用户的网络负担,对于...

    FCKeditor配置方法

    2. 将FCKeditor控件添加到VS工具箱:右键点击工具箱中的“常用”标签,选择“组件”-&gt;“选择项”,然后定位到FredCK.FCKeditorV2.dll并添加。 配置Web.Config文件是关键步骤之一。你需要在`&lt;appSettings&gt;`节点下...

Global site tag (gtag.js) - Google Analytics