那么为什么说是FCKeditor的冰冷之心呢？这不是哗众取宠，主要是说它使用起来有点麻烦，下文就详细说明如何搞定这玩意儿。
1.FCKeditor的官方网站是：http://www.fckeditor.net/download
下载地址：http://sourceforge.net/project/showfiles.php?group_id=75348
如图所示：
要下载FCKeditor2.4.2.zip和 FCKeditor.NET版的2个zip包。
说明：
FCKeditor2.4.2.zip是其最新的Javascript文件和图片什么的；
FCKeditor.NET.zip是ASP.NET调用的DLL在里面。
2.分别解压后把FCKeditor2.4.2.zip里的fckeditor目录整个复制到网站中。
3.解压FCKeditor.NET.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
<?xml version="1.0"?>
<!--
注意: 除了手动编辑此文件以外，您还可以使用
Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的
“网站”->“Asp.Net 配置”选项。
设置和注释的完整列表在
machine.config.comments 中，该文件通常位于
\Windows\Microsoft.Net\Framework\v2.x\Config 中
-->
<configuration>
<appSettings>
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/Files/" />
</appSettings>
<connectionStrings/>
<system.web>
说明：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就是。
2.常用配置
这里主要包括了以下内容:
- Configuration File 配置文件
- Toolbar 工具栏
配置文件:
这个编辑器包括了丰富的配置选项,所以你可以自定义它的显示方式,特色,和行为,主配置文件是 “fckconfig.js”,你可以在安装目录的根目录找到.
重写默认的配置文件:
你 可以直接编辑方配置文件,你也可以在不同的文件夹中重写默认的配置文件,Javascript是用来配置FCKeditor的,为了简单的升级你站点中的 FCKeditor,最好的方式就是把你的所有的配置文件放到一个独立的配置文件中,并且该文件不在根目录下,这样的话,你只需要覆盖安装目录就可以升级 了.
首先,你可以创建一相文件,比方说叫做 “myconfig”并且保存在你在根目录下(或者任何其它的目录),你的自定义设置将会放在这里,比方说你想要设置你的编辑器一直以法文显示,你只要写 下面的代码到你在文件中.FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "fr" ;
其次,你需要告诉编辑器去加载你的自定义配置,这里有两种方法
第 一种,在fckeditor.js中找到后面的一行,FCKConfig.CustomConfigurationsPath = '' ;并且在路径中加入你自定义配置文件的位置,如:FCKConfig.CustomConfigurationsPath = '/myconfig.js' ;这种方法是好的,但是你可以想像,在不改变原始文件方面,你缺少了灵活性.但是不管怎样,你只要记住需要改变的只有一行,其它的改变都还是独立的.
第 二种,这是一种能够达到上述效果,并且更为好的方法,你不需要更改原来的配置文件fckeditor.js,你可以直接设置你的自定义在使用编辑器的地 方,下面是达到这个目标的一小段javascript代码:var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js" ;
oFCKeditor.Create() ;
你可以使用你想用的语言达到同样地效果,你只需要看看例子,找到怎样使用代码去配置编辑器.
配置加载过程:
当重载配置文件的时候,我们会经历下面的步骤
1.在主配置文件(fckeditor.js)中的配置加载;
2.如果提供了自定义的配置文件,那么,这些配置文件要进行加载;
3.除了用"CustomConfigurationsPath" 配置的内容在第一步之后加载外,在页面内的配置文件加载完毕.
注意:你需要保留原始的配置文件在根目录下,否则的话,fckeditor就会出问题了.
浏览器缓存:在对配置文件做更改试试更改之后,请记住清空浏览器缓存,否则的话,你就不会看到你做得更改.当在代理环境下工作时,这就更显得重要了,你的代理可能会保存更长时间的js文件,这里有一些建议可以用来更新最新的配置文件:
如果你使用的是IE,使用CTRL+F5应该就可以清空js文件的缓存了,并且加载js到最新的配置.
如果你使用的是firefox或者mozilla子项目下的浏览器,一般情况下,使用Shift+CTRL+R可以加载最新的js配置文件;如果失败的话,你就要手动清空缓存了.
在自定义配置文件的路径之后,你可以添加几行代码,这样浏览器每次运行就必须加载它们了,如
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js?" + ( new Date() * 1 ) ;
oFCKeditor.Create() ;
工具栏配置:
配置你需要的工具栏是一件十分简单的事情,只要在配置文件"FCKConfig.ToolbarSets" 中修改或者填加新的选项;当然了,你也可以创建你自己的配置文件。
你可以看一下fckconfig.js ，看看这两个简单的工具栏定义。
//默认配置
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'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
//精减工具栏
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
工具栏集合：
每一个工具栏设置都包含有一组工具栏集合，每一个工具栏集合都在一个不同的层上，当你重新设置editor大小时，工具栏集合就会一起移动。你可以在上面 工具栏定义看到，每一个工具栏集合都被定义成一个javaScript字符串数组，每一个字符串都对应了在代码中定义的一个小工具，或者一个插件。如果这 个小工具不存在，则在编辑器加载的时候，就会给出错误提示。你也可以通过在工具栏定义中填加 “-” 字符串，以在工具栏集合中包括一个分隔符。
强迫工具栏集合换行：
看看默认工具栏的定义，你会发现在某一行使用 “/” 代替一个数组，这个标记可以告诉编辑器，你想要下一个工具栏集合换到另一行。
自定义工具栏：
在fckconfig.js 的配置文件中已经包括了”Default” 和“Basic” 两个工具栏，你可以修改它们，当然，你也可以创建新的自定义工具栏。例如，你可以创建名为”MyToolbar”的工具栏，只需要在默认的配置文件中加入 下面内容，当然，你也可以在自定义的配置文件中加入。FCKConfig.ToolbarSets["MyToolbar"] = [
['Cut','Copy','Paste','PasteText','PasteWord'],
['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
'/',
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link','Unlink','Anchor'],
'/',
['Style'],
['Table','Image','Flash','Rule','SpecialChar'],
['About']
] ;
现在，你需要在创建编辑器实例的时候设置你的工具栏，下面就是在不同语言中定义工具栏的一些例子。JavaScript
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.ToolbarSet = 'MyToolbar' ;
oFCKeditor.Create() ;
</script>
$oFCKeditor->ToolbarSet = 'MyToolbar';
<FCK:editor id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>
oFCKeditor.ToolbarSet = "MyToolbar"
<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />
fckEditor.toolbarSet = "MyToolbar";
额外的注意事项：
在自定义工具栏时通常犯的错误是，只记得从默认工具栏中移去你不要的元素，包括About的菜单，留下最后一行仅仅是一个逗号。所以你要记住的是最后一个工具栏集合最后没有逗号。
记住清空浏览器缓存，否则，你对配置文件做更改的时候，你将看不到变化，你也不知道为什么。
工具栏的行为：
开始行为：
当编辑器加载的时候，你可以决定它的显示方式。工具栏默认情况可以是展开的，也可以是合上的。如果你想要改变工具栏的显示方式，你可以查看ToolbarStartExpanded 选项，或者仅仅在配置文件中加入以下的代码，记住，‘true’设置为展开，'false'设置为合上。
FCKConfig.ToolbarStartExpanded = true ;
工具栏收起：
当使用编辑器的时候，你可以选择是否允许闭合工具栏。你可以查看ToolbarCanCollapse 的选项，或者在配置文件中声明，'true'为允许,'false'为不允许。
FCKConfig.ToolbarCanCollapse = false;
3.使用js获取值
FCKeditorAPI是FCKeditor加载后注册的一个全局对象，利用它我们就可以完成对编辑器的各种操作。
EditorName是页面中可编辑区域元素的id比如：
<TEXTAREA id="texterea1" name="content" rows="30" cols="420"><c:out value="${content}"/></TEXTAREA>
EditorName就是texterea1了
// 获取编辑器中HTML内容
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
// 获取编辑器中文字内容
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
// 设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}
4.兼容问题
升级到 IE 9后，fckeditor在IE 9里的弹出浮动层会出现bug，里面的内容不会出现。所以无论是想在页面编辑器里粘贴内容，还是上传图片等凡是需要弹出窗口操作的东西都会有问题，想要进行其它的操作也只能重新刷新页面。原因是 IE 9 不支持var $=document.getElementById;这样的写法了。
解决方法可以这么来做：
打开这个文件， fckeditor/editor/js/fckeditorcode_ie.js ，找到第 38行的这个方法：FCKTools.RegisterDollarFunction
将原来的
FCKTools.RegisterDollarFunction=function(A){A.$=A.document.getElementById;};
修改方法为：
FCKTools.RegisterDollarFunction=function(A){A.$=function(v){return A.document.getElementById(v);}};
亲自做了实验，结果理想。
在IE10中会遇到不支持selectSingleNode属性的问题，解决方法是在fckeditorcode_ie.js文件中的B.open(“GET", A, false); 和 B.send(null);这两句之间加上try { B.responseType = ‘msxml-document’; } catch (e) { }，可以解决问题，本人亲自验证。
4653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
