FCKeditor笔记

一、简介
功能：

是一个专门使用在网页上的所见即所得文字编辑器，支持图片和Flash，工具栏可自由配置，使用简单(开放源代码)
兼容性：

IE 5.5+、Firefox 1.5+、Safari 3.0+、Opera 9.50+、Netscape 7.1+、 Camino 1.0+
成熟度：

使用广泛，被Baidu、CSDN等选用. 它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。

二、下载
官方下载首页： http://www.fckeditor.net/download/，当前版本为2.5.1
需要下载FCKeditor 2.5.1（FCKeditor_2.5.1.zip）和FCKeditor.Java（FCKeditor-2.3.zip）

三、部署
3.1解压FCKeditor.Java(for java):
将commons-fileupload.jar, FCKeditor-2.3.jar放到你项目中的WEB-INF/lib中;
FCKeditor.tld,放到你项目中的WEB-INF下.
3.2
解压FCKeditor 2.5.1:
把目录/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件copy到你的项目根目录中.
3.3
可作如下的简化:
删除目录/editor/_source,
删除/editor/filemanager/browser/default/connectors/下的所有文件
删除/editor/filemanager/upload/下的所有文件
删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

3.4
打开/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：
FCKConfig.LinkBrowserURL =
    FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL =
    FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL =
    FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
设置了文件浏览和上传的配置

3.5
修改web.xml:
<taglib>
<taglib-uri>/FCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>
调用时,如下: <%@ taglib uri="/FCKeditor" prefix="FCK"%>
也可不采用上面的方式,直接调用: <%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK"%>

四,应用:
三种方法调用FCKeditor
1.
FCKeditor自定义标签

(必须加头文件 <%@ taglib uri="/FCKeditor" prefix="FCK" %> )
2.
script脚本语言调用
(必须引用 脚本文件 <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script> )
3.
FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %>

(1)
<%@ taglib uri="/FCKeditor" prefix="FCK" %>

  <FCK:editor id="mess1" basePath="/BBSCS_8_0_3/" width="670" height="300"
               skinPath="/BBSCS_8_0_3/editor/skins/default/"  toolbarSet="Default">
      j do the test ,可以输入表情,能正常被index获取.
   </FCK:editor>

   <FCK:editor id="mess2" basePath="" width="500" height="100"
               skinPath="/BBSCS_8_0_3/editor/skins/office2003/" toolbarSet="Basic">
      j do the test 2
   </FCK:editor>

   自定义的工具栏:
   <FCK:editor id="mess3" basePath="" width="500" height="400"
               skinPath="/BBSCS_8_0_3/editor/skins/silver/" toolbarSet="Bbscs">
      j do the test 3
   </FCK:editor>

(2)
<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>

<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

(3)
<%@ page language="java" import="com.fredck.FCKeditor.*" %>

<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>

添加文件/FCKeditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>

1.配置语言包。有英文、繁体中文等，这里我们使用简体中文。 修改
FCKConfig.DefaultLanguage = 'en' ;
为
FCKConfig.DefaultLanguage = 'zh-cn' ;

2.配置皮肤。有default、office2003、silver风格等，这里我们可以使用默认。
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

3.在编辑器域内可以使用Tab键。（1为是，0为否）
FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;

4.加上几种我们常用的字体的方法
修改
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
为
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier

New;Tahoma;Times New Roman;Verdana'

5.删除我们不需要的文件：
进入FCKeditor文件夹，把所有“_”开头的文件和文件夹删掉，这些都是一些范例，只保留editor文件

夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了；
　　进入editor文件夹，删掉“_source”文件夹，里面放的同样是源文件；
　　退回上一级目录进入filemanager文件夹，有browser和upload两个文件夹。进入

browser\default\connectors，只保留aspx文件夹，其余的删掉；mcpuk目录亦可删除；upload也一样，只保留aspx文件夹；
　　退到editor再进入images文件夹，smiley里面放的是表情图标，有msn和fun两个系列，如果你想用自己的表情图标，可以把它们都删除；如果你想用这里的表情图标那就不要删了；
　　lang里面放的是语言包，如果只是用简体中文，那么只保留fcklanguagemanager.js、zh-cn.js两个文件就行了，建议也保留 en.js（英文）、zh.js（繁体中文）两个文件，fcklanguagemanager.js是语言配置文件，有了它才能和 fckconfig.js里的设置成对，对应上相应的语言文件，一定要保留！
　　再退出lang文件夹，进入skins文件夹，如果你想使用FCKeditor默认的奶黄色，那就把除了default文件夹外的另两个文件夹直接删除，如果想用别的，那就看你自己的喜好了。

 

6.要设置更多请参考一下属性表：
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称   
FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区

的样式表文件   
FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格   
FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS   
FCKConfig.DocType = '' ;//文档类型   
FCKConfig.BaseHref = ''; // 相对链接的基地址   
FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容   
FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"   
FCKConfig.Debug = false ;//是否开启调试功能   
FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径   
FCKConfig.PreloadImages=... //预装入的图片   
FCKConfigFCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径   
FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言   
FCKConfig.DefaultLanguage   = 'zh-cn' ; //默认语言   
FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到

左   
FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体   
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文   
FCKConfig.IncludeGreekEntities = true ;//包括希腊文   
FCKConfig.ProcessNumericEntities = false ;//处理数字实体   
FCKConfig.AdditionalNumericEntities = '' ;   //附加的数字实体   
FCKConfig.FillEmptyBlocks = true ; //是否填充空块   
FCKConfig.FormatSource   = true ; //在切换到代码视图时是否自动格式化代码   
FCKConfig.FormatOutput   = true ; //当输出内容时是否自动格式化代码   
FCKConfig.FormatIndentator = '    ' ; //当在源码格式下缩进代码使用的字符   
FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在

fckeditor上   
FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容   
FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE   
FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单   
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体   
FCKConfig.TabSpaces   = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格   
FCKConfig.ShowBorders = true ;//合并边框   
FCKConfig.SourcePopup = false ;//弹出   
FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开   
FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏   
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值   
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引   
FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出   
FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板   
FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,   
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称   
FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区

的样式表文件   
FCKConfig.BaseHref = ''; // 相对链接的基地址   
FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中

输出内容   
FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤   
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言   
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言   
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右   
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代   
FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码   
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码   
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符   
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记   
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器   
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本   
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体   
FCKConfig.TabSpaces = 0/1; // TAB是否有效   
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数   
FCKConfig.ShowBorders = true/false; // 是否合并边框   
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏

”时才出现   
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏   
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏 

 
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br   
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br   
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容   
FCKConfig.FontColors = ""; // 文字颜色列表   
FCKConfig.FontNames = ""; // 字体列表   
FCKConfig.FontSizes = ""; // 字号列表   
FCKConfig.FontFormats = ""; // 文字格式列表   
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置   
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置   
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器   
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址   
FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放

路径   
FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置   
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数   
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整 

 
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整

  
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容