一.使用说明
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中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/xiaochongzi520/archive/2008/10/13/3070285.aspx
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
