FCKeditor2.6.3基本设置、使用说明

来源：互联网发布：阿sa和郑中基知乎编辑：程序博客网时间：2024/04/20 12:22

一.使用说明

1.FCKeditor的官方网站是：http://www.fckeditor.net/download
目前最新的FCKeditor 2.6.3版本。
要下载FCKeditor_2.6.3.zip和   FCKeditor.NET_2.6.3.zip版的2个zip包。
说明：
FCKeditor_2.6.3.zip是其最新的Javascript文件和图片什么的；
FCKeditor.NET_2.6.3.zip是ASP.NET调用的DLL在里面。
2.分别解压后把FCKeditor_2.6.3.zip里的fckeditor目录整个复制到网站中。
3.解压FCKeditor.NET_2.6.3.zip包后在FCKeditor.Net_2.2/bin/Debug目录里找到FredCK.FCKeditorV2.dll。其他文件没用，把FredCK.FCKeditorV2.dll复制到我们的网站，建立一个Bin目录。
4.引用FredCK.FCKeditorV2.dll。
第一步：
第二步：
5.导入工具箱。
在“工具箱”下右键

点击“选择项”。弹出如图窗口：

点击浏览,找到dll所在目录。
这时发现工具箱里多出FCKeditor控件。

6.拖拽FCKeditor到页面上
7.配置WebConfig

<appSettings>
    <add key="FCKeditor:BasePath" value="~/fckeditor/"/>
    <add key="FCKeditor:UserFilesPath" value="/Files/" />
</appSettings>

说明：BasePath是fckeditor所在路径，fckeditor由于我们直接放网站目录下这样写就可以，如果您的网站多放几层适当调整即可。
            UserFilesPath是所有上传的文件的所在目录。为什么要设置成/Files这样而不是~/Files，因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端。否则的话客户访问的时候就会取客户的机器目录而不是http形式的目录。
建议：Files要单独做wwwroot目录下的一个站点比较好，和我们的站点FCKEditor平行。不要把它放FCKEditor里，为什么呢？因为Files是要让客户有写的权限的，如果放FCKEditor下很危险。
8.Files目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User实际中你可能用ASP.NET帐号更合理。
9.修改fckeditor/fckconfig.js文件
在第182行的位置
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
改为
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
10.FCKeditor给其瘦身。以_打头的的都是范例文件或源文件，不过建议小心。
11.下面以上传图片示例说明如何使用，
点击“浏览服务器”。
弹出窗口很容易报错
如果报错XML request error: Internal Server Error(500)，很可能就是目录路径不对和写权限没有。
选择图像

最后效果
前台代码：
<%@ Page Language="C#" validateRequest=false AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>FCKeditor文本编辑器</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fckeditorv2:fckeditor id="FCKeditor1" runat="server" DefaultLanguage="zh-cn" Height="400px" Width="660px"
></fckeditorv2:fckeditor>

    </div>
    </form>
</body>
</html>
怎么样获取结果呢？FCKeditor1.Value就是。

二.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中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式

本资料来自网上，经整合而成。