First, Introduction
Features: WYSIWYG, support pictures and Flash, toolbar free configuration, easy to use
Compatibility: IE 5.5+, Firefox 1.5+, Safari 3.0+, Opera 9.50+, Netscape 7.1+, Camino 1.0+
Maturity: Widely used, by Baidu, Csdn and other selected
Second, download
Official Downloads Home: http://www.fckeditor.net/download/, current version is 2.5.1
Need to download FCKeditor 2.5.1 (fckeditor_2.5.1.zip) and Fckeditor.java (Fckeditor-2.3.zip)
Third, deployment
This example uses Webroot as the root path and the deployed directory structure as shown in the following illustration:
1. Fckeditor_2.5.1.zip decompression, copy FCKeditor folder to/webroot/
2. Fckeditor-2.3.zip decompression, copy Commons-fileupload.jar and Fckeditor-2.3.jar to/webroot/web-inf/lib/
3. Modify the/webroot/web-inf/web.xml file and add the following:
Copy Code code as follows:
<servlet>
<servlet-name> Connector </servlet-name>
<servlet-class> Com.fredck.FCKeditor.connector.ConnectorServlet </servlet-class>
<init-param>
<param-name> BaseDir </param-name>
<param-value>/userfiles/</param-value>
</init-param>
<init-param>
<param-name> Debug </param-name>
<param-value> true </param-value>
</init-param>
<load-on-startup> 1 </load-on-startup>
</servlet>
<servlet>
<servlet-name> Simpleuploader </servlet-name>
<servlet-class> Com.fredck.FCKeditor.uploader.SimpleUploaderServlet </servlet-class>
<init-param>
<param-name> BaseDir </param-name>
<param-value>/userfiles/</param-value>
</init-param>
<init-param>
<param-name> Debug </param-name>
<param-value> true </param-value>
</init-param>
<init-param>
<param-name> enabled </param-name>
<param-value> true </param-value>
</init-param>
<init-param>
<param-name> Allowedextensionsfile </param-name>
<param-value> </param-value>
</init-param>
<init-param>
<param-name> Deniedextensionsfile </param-name>
<param-value> php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi </param-value>
</init-param>
<init-param>
<param-name> Allowedextensionsimage </param-name>
<param-value> jpg|gif|jpeg|png|bmp </param-value>
</init-param>
<init-param>
<param-name> Deniedextensionsimage </param-name>
<param-value> </param-value>
</init-param>
<init-param>
<param-name> Allowedextensionsflash </param-name>
<param-value> Swf|fla </param-value>
</init-param>
<init-param>
<param-name> Deniedextensionsflash </param-name>
<param-value> </param-value>
</init-param>
<load-on-startup> 1 </load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name> Connector </servlet-name>
<url-pattern>/fckeditor/connector </url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name> Simpleuploader </servlet-name>
<url-pattern>/fckeditor/simpleuploader </url-pattern>
</servlet-mapping>
4. Modify the/webroot/fckeditor/fckconfig.js, and revise the section as follows:
Copy Code code as follows:
Fckconfig.linkbrowserurl = Fckconfig.basepath + ' filemanager/browser/default/browser.html? Connector=/fckeditor/connector ';
Fckconfig.imagebrowserurl = Fckconfig.basepath + ' filemanager/browser/default/browser.html? Type=image&connector=/fckeditor/connector ';
Fckconfig.flashbrowserurl = Fckconfig.basepath + ' filemanager/browser/default/browser.html? Type=flash&connector=/fckeditor/connector ';
Fckconfig.linkuploadurl = '/fckeditor/simpleuploader? Type=file ';
Fckconfig.imageuploadurl = '/fckeditor/simpleuploader? Type=image ';
Fckconfig.flashuploadurl = '/fckeditor/simpleuploader? Type=flash ';
Attention:
(1) Steps 3 and 4 set the configuration of file browsing and uploading, and the <url-pattern> of the servlet in Web.xml is consistent with the URL reference in Fckconfig.js;
(2) The premise of the normal operation of this example is that Webroot is deployed as the root path, and if a virtual path is set, the servlet cannot be found.
Four, use
This example uses the most direct JS method, API and Taglib method to see the example of Fckeditor-2.3.zip after decompression _samples.
FCKDEMO.JSP:
Copy Code code as follows:
<title> FCKeditor Test </title>
<script type= "Text/javascript" src= "/fckeditor/fckeditor.js" > </script>
<body>
<form action= "fckdemo.jsp" method= "POST"
<%
String content=request.getparameter ("content");
if (content!= null) {
Content = Content.replaceall ("\ r \ n", "");
Content = Content.replaceall ("\ R", "");
Content = Content.replaceall ("\ n", "");
Content = Content.replaceall ("\" "," "");
}else{
Content = "";
}
%>
<table width=100%>
<tr>
<TD colspan=4 style= ' text-align:center ' width=100% height=50px>
<span>
<script type= "Text/javascript"
var ofckeditor = new FCKeditor (' content ');//incoming parameter is the name of the form element (input or textarea generated by FCKeditor)
Ofckeditor.basepath= '/fckeditor/'//Specifies the FCKeditor root path, which is the path where Fckeditor.js is located
ofckeditor.height= ' 100% ';
ofckeditor.toolbarset= ' Demo '; Specify the toolbar
Ofckeditor.value= "<%=content%>";//Default value
Ofckeditor.create ();
</script>
</span>
</td>
</tr>
<tr> <td align=center><input type= "Submit" value= "submitted" > </td> </tr>
<tr> <td> </td> </tr>
<tr> <td> value (can be saved directly to the database): </td> </tr>
<tr> <td style= "padding:10px;" > <%=content%> </td> </tr>
</table>
</form>
</body>
Effect Chart:
v. Configuration file Fckconfig.js
1. DefaultLanguage: Default language, can be changed to "ZH-CN"
2. Custom toolbars: You can modify or add toolbarsets, for example:
fckconfig.toolbarsets["Demo"] = [[' Bold ', ' Italic ', '-', ' orderedlist ', ' unorderedlist ', '-', ' Link ', ' Unlink ', '-', ' TextColor ', ' bgcolor ', '-', ' Style ', '-', ' Image ', ' Flash ', ' Table '];
3. Entermode and Shiftentermode: NewLine behavior of "carriage return" and "shift+ carriage return", note prompts for optional mode
4. Editorareacss: Edit Area Style file
5. Other parameters:
Copy Code code as follows:
Autodetectlanguage=true/false Automatic Detection language
basehref= "" relative to the base address of the link
contentlangdirection= "Ltr/rtl" Default text direction
contextmenu= string array, right-click the contents of the menu
Customconfigurationspath= "" Custom profile path and name
Debug=true/false whether debugging is turned on, so that when Fckdebug.output () is invoked, the contents are output in the debug window
When Enablesourcexhtml=true/false is true, HTML is processed as XHTML when switched from a visual interface to a code page
Enablexhtml=true/false whether to allow XHTML to be used instead of HTML
Fillemptyblocks=true/false uses this feature to replace empty block-level elements with empty cells
fontcolors= Set the text color list when the color picker is displayed
Fontformats= the name of the display in a list of text formats
fontnames= the font name in the Font list
fontsizes= a list of font sizes in the font size
Forcepasteasplaintext=true/false forced Paste as plain text
Forcesimpleampersand=true/false whether to convert & symbols to XML entities
Formatindentator= "" When you indent code in source format using characters
Formatoutput=true/false whether the code is automatically formatted when the content is output
Formatsource=true/false automatically format code when switching to Code view
Fullpage=true/false whether to allow editing of the entire HTML file, or only to edit the content between the body
Geckousespan=true/false whether span markers are allowed instead of b,i,u tags
Iespelldownloadurl= "" Download the address of the spelling checker
Imagebrowser=true/false whether to allow browsing of server features
Imagebrowserurl= the URL to run when browsing the server
imagebrowserwindowheight= "" Image browser window height
Imagebrowserwindowwidth= "" Image browser window width
Linkbrowser=true/false whether the server is allowed to browse when the link is inserted
Linkbrowserurl= the URL of the server when inserting a link
linkbrowserwindowheight= "" Link target browser window height
Linkbrowserwindowwidth= "" Link target browser window width
Plugins=object Registration Plugin
Pluginspath= "" Plug-in folder
Showborders=true/false merge borders
Skinpath= "" Skin folder location
smileycolumns=12 Number of Chart window columns
Array of picture filenames in smileyimages= character array
Smileypath= "" "" "" "" "" "
Smileywindowheight Picture Window Height
Smileywindowwidth Picture Window width
Spellchecker= "Iespell/spellerpages" to set the spelling checker
Focus to editor when Startupfocus=true/false Open
Stylesxmlpath= "" Setting the location of the XML file that defines the list of CSS styles
Number of space characters produced by the Tabspaces=4 tab key
Toolbarcancollapse=true/false whether to allow expansion/collapse of toolbars
Toolbarsets=object allow use of toolbar collection
Toolbarstartexpanded=true/false Open is toolbar whether to unfold
Usebroncarriagereturn=true/false whether to generate a BR mark or a P or div tag when carriage return
Six, custom style
The toolbar's style option is generated by the configuration file specified by Fckconfig.js:
Copy Code code as follows:
Fckconfig.stylesxmlpath = Fckconfig.editorpath + ' fckstyles.xml ';
You can modify fckstyles.xml to customize the style.
