FCKEditor使用说明

1.基本设置

先看看效果是什么样的：

效果图:

那么为什么说是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"?>

<configuration>
<appSettings>

</appSettings>

说明：BasePath是fckeditor所在路径，fckeditor由于我们直接放网站目录下这样写就可以，如果您的网站多放几层适当调整即可。
UserFilesPath是所有上传的文件的所在目录。为什么要设置成/Files这样而不是~/Files，因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端。否则的话客户访问的时候就会取客户的机器目录而不是http形式的目录。

建议：Files要单独做wwwroot目录下的一个站点比较好，和我们的站点FCKEditor平行。不要把它放FCKEditor里，为什么呢？因为Files是要让客户有写的权限的，如果放FCKEditor下很危险。

8.Files目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User实际中你可能用ASP.NET帐号更合理。

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

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;

oFCKeditor.ToolbarSet = 'MyToolbar' ;

oFCKeditor.Create() ;

</script>

PHP

$oFCKeditor->ToolbarSet = 'MyToolbar';

JSP (Java)

<FCK:editor id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>

ASP

oFCKeditor.ToolbarSet = "MyToolbar"

ASP.NET

<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />

ColdFusion

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) { }，可以解决问题，本人亲自验证。

posted @ 2013-04-20 19:22 nd 阅读(29761) 评论(3) 编辑收藏举报

刷新页面返回顶部

FCKEditor使用说明

公告