关闭

FCKEditor使用说明

110人阅读 评论(0) 收藏 举报
分类:
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"?>
<!-- 
    注意: 除了手动编辑此文件以外,您还可以使用 
    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>

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:752581次
    • 积分:8455
    • 等级:
    • 排名:第2321名
    • 原创:50篇
    • 转载:791篇
    • 译文:0篇
    • 评论:40条
    最新评论