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

FCKEditor使用说明的更多相关文章

  1. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  2. awk使用说明

    原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...

  3. “我爱背单词”beta版发布与使用说明

    我爱背单词BETA版本发布 第二轮迭代终于画上圆满句号,我们的“我爱背单词”beta版本已经发布. Beta版本说明 项目名称 我爱背单词 版本 Beta版 团队名称 北京航空航天大学计算机学院  拒 ...

  4. Oracle 中 union 和union all 的简单使用说明

    1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...

  5. Map工具系列-02-数据迁移工具使用说明

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  6. Map工具系列-03-代码生成BySQl工具使用说明

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. ecshop编辑器FCKeditor修改成KindEditor编辑批量上传图片

    ecshop一直使用的编辑器是fck,这个不用多说,相信很多朋友用的很悲剧吧,特别是图片不能批量上传图片.     今天小编就分享一下怎么换掉fck,放上实用的kindeditor,最新ecshop版 ...

  9. gdbsever 使用说明

    gdbsever 使用说明 在新塘N3292x平台下 编译 gdbsever ./configure --target=arm-linux --host=arm-linux arm-linux-gdb ...

随机推荐

  1. [Locked] Shortest Distance from All Buildings

    Shortest Distance from All Buildings You want to build a house on an empty land which reaches all bu ...

  2. Eucalyptus安装包的功能列表

    aoetools    是一个用来在以太网上运行 ATA 存储协议的软件,相当于一个网络存储功能.euca2ools  eucalpytus客户端杜昂管理工具axis2c       SOAP引擎,同 ...

  3. java MessageFormat 应用 和 疑惑

    先来个demo String string = "{0}\"{1}\""; System.out.println(MessageFormat.format(st ...

  4. python面向对象【进阶篇】

    静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类变量 ...

  5. merge into 语法缺陷

    merge into 语法缺陷? test001

  6. Spring Boot(spring mvc升级版)

    周末挤出了一些时间,学了点东西,总结了一下,可能还有自己理解不到位的地方,希望大家一起交流学习,好东西要大家一起分享嘛~.时间有点紧张,所以样式没有来及做很好的调整,大家就凑活着看吧. Spring ...

  7. java随机数与数组的使用。

    java随机数与数组的使用.    一:题目 二 代码:  public class Students {    int number;  // 学号    int State ;   // 年级   ...

  8. Android基础笔记（十四）- 内容提供者读取联系人

    利用内容提供者读取联系人 利用内容提供者插入联系人 内容观察者的原理 利用内容观察者监听系统应用数据库或者自己应用数据库的变化 利用内容提供者读取联系人 读取联系人相对于读取短信来说就复杂非常多了,我 ...

  9. java 新建文件夹保存

    String Txtname = field.getText();                File file3 =new File("D:\\MATP_robot"+&qu ...

  10. [Angular 2] Controlling how Styles are Shared with View Encapsulation

    Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and Non ...