Configure and use fckeditor2.4 in JSP

1. Download
Fckeditor2.3 (fckeditot for Java)
Fckeditor2.4 (FCKeditor basic file)
The following are:
Http://www.fckeditor.net/download/default.html

2. Create a project:
Create a project tomcat/webapps/testfckeditor.

3. Decompress fckeditor2.4
Decompress fckeditor2.4, copy the entire FCKeditor directory to the root directory of the project, and rename the decompressed folder FCKeditor to FCKeditor.
Directory structure: tomcat/webapps/testfckeditor/FCKeditor
Then copy the two jar files in the/web/WEB-INF/lib/directory of the fckeditor-2.3.zip (Java) Compressed package to the/WEB-INF/lib/directory of the project. Copy the FCKeditor. TLD file under the src directory to testfckedit/WEB-INF /.

4. Merge web. xml:
Merge the Web. xml file in the/web/WEB-INF/directory of the fckeditor-2.3.zip package into the web. xml file under the/WEB-INF/directory of the project.

5. Modify the merged web. xml file
Modify the merged web. xml file and change the enabled parameter value of the servlet named simpleuploader to true,
To allow upload. The basedir parameter value of servlet ctor servlet is used to set the location where the uploaded files are stored.
Add Tag definitions at the end of Web. xml:

<Taglib>
<Taglib-Uri>/testfckeditor </taglib-Uri>
<Taglib-location>/WEB-INF/FCKeditor. TLD </taglib-location>
</Taglib>

The current web. xml file does not have the <taglib> label, should be used directly in the JSP file: <% @ taglib uri = "http://fckeditor.net/tags-fckeditor" prefix = "fck" %>

 

6. ing:
The mappings between the two servlets in the above file are:/Editor/filemanager/Browser/default/connectors/JSP/connector.
And/Editor/filemanager/upload/simpleuploader, you need to add/FCKeditor before the two mappings,
Change to/FCKeditor/Editor/filemanager/Browser/default/connectors/JSP/connector and
/FCKeditor/Editor/filemanager/upload/simpleuploader.
The two names depend on the name of the FCKeditor folder in the project ..

7. Modify the skin folder
Go to the skin folder. If you want to use the default FCKeditor milk yellow,
Delete the other two folders except the default folder. (We recommend that you do not delete them. You will need to use one of them later)

8. Delete useless files
Delete all files except fckconfig. JS, FCKeditor. JS, fckstyles. XML, and fcktemplates. XML in the/FCKeditor/directory, and keep the folder Editor
Delete directory/Editor/_ source,
Delete all files under/Editor/filemanager/Browser/default/connectors/
Delete all files under/Editor/filemanager/upload/
Delete all files under/Editor/lang/except fckjavasagemanager. js (I downloaded this file not), en. JS, Zh. JS, zh-cn.js 4 files

9. Modify the Configuration:
Open/FCKeditor/fckconfig. js
Modify fckconfig. defaultlanguage = 'zh-cn ';
Replace the values of fckconfig. linkbrowserurl with the following:
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 ';

10. Others
Fckconfig. js configuration file, which can be opened in the log book. After modification, the file will be saved as UTF-8 encoding format. Find:

Change fckconfig. tabspaces = 0; To fckconfig. tabspaces = 1; that is, you can use the tab key in the editor.

If your editor is still used at the front-end of the website, for example, when it is used for message book or diary reply, you have to consider security,
Do not use the default toolbar on the front-end, either customize the function or use the basic defined by the system,
That is, the basic toolbar. Find:
Fckconfig. toolbarsets ["Basic"] = [
['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-',/* 'link', */'unlink ', '-', 'style', 'fontsize', 'textcolor', 'bgcolor ','-',
'Smilil', 'specialchar ', 'replace', 'preview'];
This is a modified basic. Remove the image function and the Add link function, because the image and link and flash and image button add function can make the foreground
Page to directly access and upload files. FCKeditor also supports the right-click function in the editing area.

Fckconfig. contextmenu = ['generic',/* 'link', */'anchor ',/* 'image', */'flash', 'select', 'textarea ', 'checkbox', 'Radio ', 'textfield', 'hiddenfield ',
/* 'Imagebutton ', */'button', 'bulletedlist', 'numberedlist', 'tablecell ', 'table', 'form'];

This is also a change to remove the "link, image, Flash, image button" function of the right mouse button.

Find: fckconfig. fontnames = 'arial; Comic Sans MS; Courier New; tahoma; Times New Roman; verdana ';
Add several common Fonts
Fckconfig. fontnames
= '; _ Gb2312; Arial; Comic Sans MS; Courier New; tahoma; Times New Roman; verdana ';

11. Add a file
Add the file/testfckeditor/test. jsp:
<% @ Page Language = "Java" Import = "com. fredck. FCKeditor. *" %>
<% @ Taglib uri = "/testfckeditor" prefix = "fck" %>
<SCRIPT type = "text/JavaScript" src = "/testfckeditor/FCKeditor. js"> </SCRIPT>

<% --
Three methods to call FCKeditor
1. FCKeditor custom tag (header file must be added <% @ taglib uri = "/testfckeditor" prefix = "fck" %>)
2. Script Language call (the script file <SCRIPT type = "text/JavaScript" src = "/testfckeditor/FCKeditor. js"> </SCRIPT> must be referenced)
3. FCKeditor API call (header files must be added <% @ page Language = "Java" Import = "com. fredck. FCKeditor. *" %>)
-- %>

// Tag call Method
<% --
<Form action = "show. jsp" method = "Post" target = "_ blank">
<Fck: Editor id = "content" basepath = "/testfckeditor/FCKeditor /"
Width = "700"
Height = "500"
Skinpath = "/testfckeditor/FCKeditor/Editor/skins/silver /"
Toolbarset = "default"
>
Input
</Fck: Editor>
<Input type = "Submit" value = "Submit">
</Form>
-- %>

// JS call Method
<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 = "/testfckeditor/FCKeditor /";
Ofckeditor. Height = 400;
Ofckeditor. toolbarset = "default ";
Ofckeditor. replacetextarea ();
</SCRIPT>
<Input type = "Submit" value = "Submit">
</TD> </tr> </table>
</Form>

// FCKeditor API call
<% --
<Form action = "show. jsp" method = "Post" target = "_ blank">
<%
FCKeditor ofckeditor;
Ofckeditor = new FCKeditor (request, "content ");
Ofckeditor. setbasepath ("/testfckeditor/FCKeditor /");
Ofckeditor. setvalue ("input ");
Out. println (ofckeditor. Create ());
%>
<Br>
<Input type = "Submit" value = "Submit">
</Form>
-- %>

Add file/testfckeditor/show. jsp:
<%
String content = request. getparameter ("content ");
Out. Print (content );
%>

 

12. Test
Browse http: // localhost: 8080/testfckeditor/test. jsp

Last note .. Variable names of different versions may be different. Please refer to your API documentation

Configuration Options:

Autodetectlanguage = true/false automatic language Detection
Basehref = "" Relative Link base address
Contentlangdirection = "LTR/RTL" default text direction
Contextmenu = string array, right-click the menu content
Customconfigurationspath = "" custom configuration file path and name
DEBUG = true/false whether to enable debugging. In this way, when fckdebug. Output () is called, the content is output in the debugging window.
Defaultlanguage = "" default language
Editorareacss = "" style table file in the editing area
When enablesourcexhtml = true/false is true, when the code page is switched from the visual interface to the code page, the HTML is processed as XHTML.
Enablexhtml = true/false: Can I use XHTML to replace HTML?
Fillemptyblocks = true/false use this function to replace empty block-level elements with spaces.
Fontcolors = "" sets the text color list when the color picker is displayed
Fontformats = "" set the name displayed in the text format list
Fontnames = "" fontnames
Fontsizes = "" font size in the font size list
Forcepasteasplaintext = true/false force paste to plain text
Forcesimpleampersand = true/false do not convert & symbol to XML Entity
Formatindentator = "" specifies the characters used to indent the code in the source code format.
Formatoutput = true/false: whether to automatically format the code when output content
Formatsource = true/false whether to automatically format the code when switching to the Code view
Fullpage = true/false: whether to allow editing of the entire HTML file or only the content between the bodies
Geckousespan = true/false: whether to allow the span flag to replace the B, I, u flag
Iespelldownloadurl = "" download the spelling checker URL
Imagebrowser = true/false: whether to allow browsing of server functions
Imagebrowserurl = "" the URL that runs when browsing the server
Imagebrowserwindowheight = "" image browser window height
Imagebrowser1_wwidth = "" image browser window width
Linkbrowser = true/false: whether to allow browsing the server when a link is inserted
Linkbrowserurl = "" browsing the server URL when inserting a link
Linkbrowserwindowheight = "" link target browser window height
Linkbrowserdomainwwidth = "" link target browser window width
Plugins = Object Registration plug-in
Pluginspath = "" plug-in folder
Showborders = true/false merge border
Skinpath = "" skin folder location
Smileycolumns = 12 Number of columns in the graphic operator window
Smileyimages = String Array array of image file names in the graphic character window
Smileypath = "" folder path
Smileywindowheight tumbler window height
Smiley1_wwidth tumbler window width
Spellchecker = "iespell/spellerpages" set the spelling checker
When startupfocus = true/false is enabled, focus to the editor.
Stylesxmlpath = "" set the location of the XML file that defines the CSS style list
Tabspaces = 4 Number of space characters generated by the tab key
Toolbarcancollapse = true/false: whether to enable or disable the toolbar.
Toolbarsets = the toolbar set can be used for objects.
Toolbarstartexpanded = true/false enable indicates whether to expand a toolbar.
Usebroncarriagereturn = true/false when you press enter, whether to generate a br mark or a P or Div mark

Solve upload garbled characters:
In the simpleuploaderservlet. Java and connectorservlet. java files, find
Diskfileupload upload = new diskfileupload ();
Add upload. setheaderencoding ("UTF-8 ");
This solves the problem of Chinese garbled characters during file upload.
However, the Chinese content displayed on the console is garbled, but it doesn't matter. We don't have to look at the Chinese content in the console.

------------------------------------------------------------------ Another
Fckeditor2.4.2 Java
For basic configuration, see: http://hi.baidu.com/wain19/blog/item/c33fb0fab74f24dfb48f312d.html

My development environment is ubuntu7.04, and the default system encoding is UTF-8,
During this period, I encountered the following problems:

Problem 1: XML request error: internel server error (500)

The error occurs when you insert an image at: click, and click the Browse button:
XML request error: integer server error (500)

Find information: http://lamono.javaeye.com/blog/49135
Copy xalan. jar and serialize. jar to/WEB-INF/lib to solve the problem.

FCKeditor-Java does not solve Chinese problems very well. We need to modify its source code and re-compile and package it. The packaging process is as follows:
1. Create a new webproject named fckeditor-java-2.3. Copy the decompressed code of fckeditor-2.3-java.zip to the project directory.
2. For eclipse, press Ctrl + Shift + R.
In the simpleuploaderservlet. Java and connectorservlet. java files, find
Diskfileupload upload = new diskfileupload ();
Add upload. setheaderencoding ("UTF-8 ");
If you run the ant task directly, the following error is reported:
Taskdef class org. Apache. Catalina. Ant. deploytask cannot be found

3. Copy the catalina-ant.jar under the tomcat installation directory/Server/lib to the/WEB-INF/lib directory.
4. Open build. xml
Find
<Property name = "Catalina. Home"
Change to your own tomcat installation directory
<Property name = "Catalina. Home" value = "/home/uniquejava/tool/tomcat5028/"/>
Find
<Taskdef name = "deploy"
Modify to the following content:
<Taskdef name = "deploy" classname = "org. Apache. Catalina. Ant. deploytask">
<Classpath refID = "compile. classpath">
</Classpath>
</Taskdef>
<Taskdef name = "list" classname = "org. Apache. Catalina. Ant. listtask">
<Classpath refID = "compile. classpath">
</Classpath>
</Taskdef>
<Taskdef name = "reload" classname = "org. Apache. Catalina. Ant. reloadtask">
<Classpath refID = "compile. classpath">
</Classpath>
</Taskdef>
<Taskdef name = "undeploy" classname = "org. Apache. Catalina. Ant. undeploytask">
<Classpath refID = "compile. classpath">
</Classpath>
</Taskdef>

Run the ant task DIST to generate a new FCKeditor-2.3.jar package

Question 3: All newly created Chinese directories are garbled during upload. Although the file name uploaded to the server is normal, the file name cannot be downloaded due to garbled characters when you click the download link on the JSP page.

Find information: Garbled troubleshooting when Tomcat link parameters are in Chinese
Http://hi.baidu.com/jadestone/blog/item/7564deefc9192d36acafd5be.html
Modify tomcat-home/CONF/server. xml
Method 1:
Add uriencoding = "UTF-8" in two places ":
<Connection Port = "8080"
Maxthreads = "150" minsparethreads = "25" maxsparethreads = "75"
Enablelookups = "false" redirectport = "8443" acceptcount = "100"
DEBUG = "0" connectiontimeout = "20000"
Disableuploadtimeout = "true" uriencoding = "UTF-8"/>

<Connection Port = "8009"
Enablelookups = "false" redirectport = "8443" DEBUG = "0"
Protocol = "AJP/1.3" uriencoding = "UTF-8"/>

Method 2:
Use usebodyencodingforuri = "true". This method is suitable for running multiple encoding programs in your Tomcat instance. (A little skeptical ?!)
<... Maxthreads = "150" minsparethreads = "25" maxsparethreads = "75"
Enablelookups = "false" redirectport = "8443" acceptcount = "100"
Connectiontimeout = "20000" disableuploadtimeout = "true" usebodyencodingforuri = "true"/>

Enablelookups = "false" redirectport = "8443" protocol = "AJP/1.3" usebodyencodingforuri = "true "/

I only tried method 1 to solve the problem!

In this way, FCKeditor can finally be used normally ...................................
========================================================== ======================================
The following is my original article: http://blog.csdn.net/nickshen3/? I can find myself here]
How to Use fckeditor2.4 in your own web.
1. Create the test folder in webapps. Webapps/test
2. decompress the downloaded fckeditor2.3java package fckeditor-2.3.zip, and copy the two folders _ samples and WEB-INF under the webapps/test you just created. Copy FCKeditor. TLD in the SRC folder to the WEB-INF.
3. Create a folder FCKeditor under webapps/test.
4. decompress the downloaded fckeditor_2.4.3.zip file, and then extract the Editor (folder), fckconfig. JS, FCKeditor. JS, fckstyles. XML, and fcktemplates. xml in the FCKeditor folder. Copy the four files to the created folder FCKeditor.
5. Modify the test/_ samples/JSP/sample02.jsp file
<Fck: Editor id = "editordefault" basepath = "/FCKeditor /"
Change to <fck: Editor id = "editordefault" basepath = "/test/FCKeditor /". In the future, you only need to replace test with the project name.
6. Open tomcat. Test http: // localhost: 8080/test/_ samples/JSP/sample02.jsp.
OK.