FCKEditor使用

  

  本采用的FCKEditor的版本为2.4

 1.在原文件中添加feckeditor.properties的屬性文件.classpath路徑添加commons-fileupload.jar 和commons-io.jar 和feckeditor的jar文件.

 

2.在webRoot目录中添加fckeditor组件的文件.

3.在web.xml添加映射的Servlet.

<servlet>
  <servlet-name>Connector</servlet-name>
  <servlet-class>
   net.fckeditor.connector.ConnectorServlet
  </servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
  <servlet-name>Connector</servlet-name>
  <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
  <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
 </servlet-mapping>

在fckeditor中的配置文件是:

fckeditor.js 配置FCKEditor的各种信息.

如下:

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * Editor configuration settings.
 *
 * Follow this link for more information:
 * http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options
 */

FCKConfig.CustomConfigurationsPath = '' ;

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
FCKConfig.EditorAreaStyles = '' ;
FCKConfig.ToolbarComboPreviewCSS = '' ;

FCKConfig.DocType = '' ;

FCKConfig.BaseHref = '' ;

FCKConfig.FullPage = false ;

// The following option determines whether the "Show Blocks" feature is enabled or not at startup.
FCKConfig.StartupShowBlocks = false ;

FCKConfig.Debug = false ;
FCKConfig.AllowQueryStringDebug = true ;
//组件的样式模板，好确定你到底需要使用哪中样式，这个根据你自己的喜好更改,
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
FCKConfig.SkinEditorCSS = '' ; // FCKConfig.SkinPath + "|<minified css>" ;
FCKConfig.SkinDialogCSS = '' ; // FCKConfig.SkinPath + "|<minified css>" ;

FCKConfig.PreloadImages = [ FCKConfig.SkinPath + 'images/toolbar.start.gif', FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif' ] ;

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;

// FCKConfig.Plugins.Add( 'autogrow' ) ;
// FCKConfig.Plugins.Add( 'dragresizetable' );
FCKConfig.AutoGrowMax = 400 ;

// FCKConfig.ProtectedSource.Add( /<%[\s\S]*?%>/g ) ; // ASP style server side code <%...%>
// FCKConfig.ProtectedSource.Add( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
// FCKConfig.ProtectedSource.Add( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ; // ASP.Net style tags <asp:control>

FCKConfig.AutoDetectLanguage = true ;
//设置需要使用的语言的FCKConfig.DefaultLanguage = 'zh-cn' ;
FCKConfig.DefaultLanguage  = 'en' ;
FCKConfig.ContentLangDirection = 'ltr' ;

FCKConfig.ProcessHTMLEntities = true ;
FCKConfig.IncludeLatinEntities = true ;
FCKConfig.IncludeGreekEntities = true ;

FCKConfig.ProcessNumericEntities = false ;

FCKConfig.AdditionalNumericEntities = ''  ;  // Single Quote: "'"

FCKConfig.FillEmptyBlocks = true ;

FCKConfig.FormatSource  = true ;
FCKConfig.FormatOutput  = true ;
FCKConfig.FormatIndentator = '    ' ;

FCKConfig.EMailProtection = 'encode' ; // none | encode | function
FCKConfig.EMailProtectionFunction = 'mt(NAME,DOMAIN,SUBJECT,BODY)' ;

FCKConfig.StartupFocus = false ;
FCKConfig.ForcePasteAsPlainText = false ;
FCKConfig.AutoDetectPasteFromWord = true ; // IE only.
FCKConfig.ShowDropDialog = true ;
FCKConfig.ForceSimpleAmpersand = false ;
//设置是否在FCKEditor中是否开启Tab间
//FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。
FCKConfig.TabSpaces  = 0 ;
FCKConfig.ShowBorders = true ;
FCKConfig.SourcePopup = false ;
FCKConfig.ToolbarStartExpanded = true ;
FCKConfig.ToolbarCanCollapse = true ;
FCKConfig.IgnoreEmptyParagraphValue = true ;
FCKConfig.FloatingPanelsZIndex = 10000 ;
FCKConfig.HtmlEncodeOutput = false ;

FCKConfig.TemplateReplaceAll = true ;
FCKConfig.TemplateReplaceCheckbox = true ;

FCKConfig.ToolbarLocation = 'In' ;
//如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全
//了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar，找到

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','CreateDiv'],
 ['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']
] ;

FCKConfig.EnterMode = 'p' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

FCKConfig.Keystrokes = [
 [ CTRL + 65 /*A*/, true ],
 [ CTRL + 67 /*C*/, true ],
 [ CTRL + 70 /*F*/, true ],
 [ CTRL + 83 /*S*/, true ],
 [ CTRL + 84 /*T*/, true ],
 [ CTRL + 88 /*X*/, true ],
 [ CTRL + 86 /*V*/, 'Paste' ],
 [ CTRL + 45 /*INS*/, true ],
 [ SHIFT + 45 /*INS*/, 'Paste' ],
 [ CTRL + 88 /*X*/, 'Cut' ],
 [ SHIFT + 46 /*DEL*/, 'Cut' ],
 [ CTRL + 90 /*Z*/, 'Undo' ],
 [ CTRL + 89 /*Y*/, 'Redo' ],
 [ CTRL + SHIFT + 90 /*Z*/, 'Redo' ],
 [ CTRL + 76 /*L*/, 'Link' ],
 [ CTRL + 66 /*B*/, 'Bold' ],
 [ CTRL + 73 /*I*/, 'Italic' ],
 [ CTRL + 85 /*U*/, 'Underline' ],
 [ CTRL + SHIFT + 83 /*S*/, 'Save' ],
 [ CTRL + ALT + 13 /*ENTER*/, 'FitWindow' ],
 [ SHIFT + 32 /*SPACE*/, 'Nbsp' ]
] ;

FCKConfig.ContextMenu = ['Generic','Link','Anchor','Image','Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form','DivContainer'] ;
FCKConfig.BrowserContextMenuOnCtrl = false ;
FCKConfig.BrowserContextMenu = false ;

FCKConfig.EnableMoreFontColors = true ;
FCKConfig.FontColors = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,808080,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF' ;

FCKConfig.FontFormats = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
//设置常用字体的名称FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS; Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontNames  = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontSizes  = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

FCKConfig.StylesXmlPath  = FCKConfig.EditorPath + 'fckstyles.xml' ;
FCKConfig.TemplatesXmlPath = FCKConfig.EditorPath + 'fcktemplates.xml' ;

FCKConfig.SpellChecker   = 'ieSpell' ; // 'ieSpell' | 'SpellerPages'
FCKConfig.IeSpellDownloadUrl = 'http://www.iespell.com/download.php' ;
FCKConfig.SpellerPagesServerScript = 'server-scripts/spellchecker.php' ; // Available extension: .php .cfm .pl
FCKConfig.FirefoxSpellChecker = false ;

FCKConfig.MaxUndoLevels = 15 ;

FCKConfig.DisableObjectResizing = false ;
FCKConfig.DisableFFTableHandles = true ;

FCKConfig.LinkDlgHideTarget  = false ;
FCKConfig.LinkDlgHideAdvanced = false ;

FCKConfig.ImageDlgHideLink  = false ;
FCKConfig.ImageDlgHideAdvanced = false ;

FCKConfig.FlashDlgHideAdvanced = false ;

FCKConfig.ProtectedTags = '' ;

// This will be applied to the body element of the editor
FCKConfig.BodyId = '' ;
FCKConfig.BodyClass = '' ;

FCKConfig.DefaultStyleLabel = '' ;
FCKConfig.DefaultFontFormatLabel = '' ;
FCKConfig.DefaultFontLabel = '' ;
FCKConfig.DefaultFontSizeLabel = '' ;

FCKConfig.DefaultLinkTarget = '' ;

// The option switches between trying to keep the html structure or do the changes so the content looks like it was in Word
FCKConfig.CleanWordKeepsStructure = false ;

// Only inline elements are valid.
FCKConfig.RemoveFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var' ;

// Attributes that will be removed
FCKConfig.RemoveAttributes = 'class,style,lang,width,height,align,hspace,valign' ;

FCKConfig.CustomStyles =
{
 'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
};

// Do not add, rename or remove styles here. Only apply definition changes.
FCKConfig.CoreStyles =
{
 // Basic Inline Styles.
 'Bold'   : { Element : 'strong', Overrides : 'b' },
 'Italic'  : { Element : 'em', Overrides : 'i' },
 'Underline'  : { Element : 'u' },
 'StrikeThrough' : { Element : 'strike' },
 'Subscript'  : { Element : 'sub' },
 'Superscript' : { Element : 'sup' },

 // Basic Block Styles (Font Format Combo).
 'p'    : { Element : 'p' },
 'div'   : { Element : 'div' },
 'pre'   : { Element : 'pre' },
 'address'  : { Element : 'address' },
 'h1'   : { Element : 'h1' },
 'h2'   : { Element : 'h2' },
 'h3'   : { Element : 'h3' },
 'h4'   : { Element : 'h4' },
 'h5'   : { Element : 'h5' },
 'h6'   : { Element : 'h6' },

 // Other formatting features.
 'FontFace' :
 {
  Element  : 'span',
  Styles  : { 'font-family' : '#("Font")' },
  Overrides : [ { Element : 'font', Attributes : { 'face' : null } } ]
 },

 'Size' :
 {
  Element  : 'span',
  Styles  : { 'font-size' : '#("Size","fontSize")' },
  Overrides : [ { Element : 'font', Attributes : { 'size' : null } } ]
 },

 'Color' :
 {
  Element  : 'span',
  Styles  : { 'color' : '#("Color","color")' },
  Overrides : [ { Element : 'font', Attributes : { 'color' : null } } ]
 },

 'BackColor'  : { Element : 'span', Styles : { 'background-color' : '#("Color","color")' } },

 'SelectionHighlight' : { Element : 'span', Styles : { 'background-color' : 'navy', 'color' : 'white' } }
};

// The distance of an indentation step.
FCKConfig.IndentLength = 40 ;
FCKConfig.IndentUnit = 'px' ;

// Alternatively, FCKeditor allows the use of CSS classes for block indentation.
// This overrides the IndentLength/IndentUnit settings.
FCKConfig.IndentClasses = [] ;

// [ Left, Center, Right, Justified ]
FCKConfig.JustifyClasses = [] ;

// The following value defines which File Browser connector and Quick Upload
// "uploader" to use. It is valid for the default implementaion and it is here
// just to make this configuration file cleaner.
// It is not possible to change this value using an external file or even
// inline when creating the editor instance. In that cases you must set the
// values of LinkBrowserURL, ImageBrowserURL and so on.
// Custom implementations should just ignore it.
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

// Don't care about the following two lines. It just calculates the correct connector
// extension to use for the default File Browser (Perl uses "cgi").
var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;

//是否启用文件浏览的功能
FCKConfig.LinkBrowser = true ;
//设置文件浏览的路径：
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
//设置文件浏览窗体的大小
FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ;  // 70%
FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

//图片和文件上传功能的使用
FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;

FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;   // empty for all
FCKConfig.LinkUploadDeniedExtensions = "" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ;  // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one
//设置flash的上传
FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|flv)$" ;  // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth  = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;

FCKConfig.BackgroundBlockerColor = '#ffffff' ;
FCKConfig.BackgroundBlockerOpacity = 0.50 ;

FCKConfig.MsWebBrowserControlCompat = false ;

FCKConfig.PreventSubmitHandler = false ;

 

FCKEditor的三种使用方式:

(1)以Java脚本的形式导入使用:

导入的类:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8" import="net.fckeditor.*" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

FCKEditor的引入:

<script type="text/javascript">
   function FCKeditor_OnComplete(editorInstance) {
    window.status = editorInstance.Description;
   }
  </script>
 </head>
 <%
  FCKeditor fckEditor = new FCKeditor(request, "EditorDefault");
 %>
 <body>
  <h1>FCKeditor - JSP - Sample 1</h1>
  <p>This sample displays a normal HTML form with an FCKeditor with
  full features enabled.</p>
  <p>Basic FCKeditor informations:</p>
  <ul>
   <li><FCK:check command="CompatibleBrowser" /></li>
   <li><FCK:check command="FileBrowsing" /></li>
   <li><FCK:check command="FileUpload" /></li>
  </ul>
  <hr />
  <form action="sampleposteddata.jsp" method="post" target="_blank">
  <%
   fckEditor.setValue("This is some <strong>sample text</strong>. You are using <a href=\"http://www.fckeditor.net\">FCKeditor</a>.");
   out.println(fckEditor);
  %>
  <br />
  <input type="submit" value="Submit" /></form>

 

(2)以JSP标签格式使用:

 

<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

 

<script type="text/javascript">

   function FCKeditor_OnComplete(editorInstance) {
    window.status = editorInstance.Description;
   }
  </script>

 

<form action="sampleposteddata.jsp" method="post" target="_blank">
   <FCK:editor instanceName="EditorDefault">
    <jsp:attribute name="value">This is some <strong>sample text
     </strong>. You are using <a href="http://www.fckeditor.net">
     FCKeditor</a>.
    </jsp:attribute>
   </FCK:editor>
   <br />
   <input type="submit" value="Submit" />
  </form>

 

(3)
javaScript脚本格式使用:

<script type="text/javascript">
<!--
  var editor=new FCKEditor();
  editor.BasePath="/FCKEditor/";
  editor.Heght=400;
  editor.ToolbarSet="Default";
  editor.ReplaceTextarea();
//-->
</script>