Web page Text editor (FCKEditor) FCKEditor usage Instructions

FCKeditor use instructions 1. FCKeditor Introduction FCKeditor This open-source HTML text Editor allows Web programs to have powerful editing features such as Ms Word. FCKeditor supports current popular browsers such as IE 5.5+, Firefox 1.0+, Mozilla 1 .3+ and Netscape 7+.

FCKeditor Lawsuit Party website: http://www.fckeditor.net/

FCKeditor Online Demo:http://www.fckeditor.net/demo

FCKeditor Download Direct site: Http://www.fckeditor.net/download The latest version is already 2.4.

2.fckeditor.java Introduction

Can not be used directly in the JSP project, you need to Fckeditor.java library support. Java

Fckeditor.java is a Java implementation of FCKeditor that is developed by the Simone Chiaretta for use in Java FCKeditor.

3. Use the FCKeditor online editor in your project

Development environment: JDK5.0 +<!--[if!supportlists]--> Eclipse3.2.1 + WTP1.5.2

(1) Create a new Web project:

(2) Extract the Fckeditor_2.3.2.zip package, edit the folder to the WebRoot directory in the project

(3) Extract the Fckeditor_2.3.2.zip package, Fckconfig.js, Fckeditor.js, Fckstyles.xml, Fcktemplates.xml folder to the WebRoot directory in the project

(4) Extract the Fckeditor.java-2.3.zip package,/web/web-inf/lib the two jar files under the Webroot/web-inf/lib directory of the Project

(5) Extract the Fckeditor.java-2.3.zip package,/src the Fckeditor.tld file under the Webcontent/web-inf directory of the Project

(6) Delete the _source folder in the Webcontent/edit directory (Files starting with "_", useless in the project)

After the completion of the directory structure, such as:

Description: The input.jsp and display.jsp in the figure two are the JSP files I wrote for the test integration FCKeditor.

Modify the Webcontent/web-inf/web.xml file to add FCKeditor configuration information, as follows: XML code XML version= "1.0" encoding= "UTF-8"?>   < Web-app id= "webapp_id" version= "2.4"        xmlns= "HTTP://JAVA.SUN.COM/XML/NS/J2EE"         xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"        xsi : schemalocation= "Http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >        <display-name>FCKeditor<!--</span-->display-name>        <servlet>           <servlet-name>connector <!--</span-->servlet-name>           <servlet-class >                com.fredck.fckeditor.connector.connectorservlet           <!-- </span-->servlet-class>           <init-param>                <param-name>baseDir<!--</span--> param-name>               <!--This is the file browsing path-- >               <param-value>/ userfiles/<!--</span-->param-value>           <!-- </span-->init-param>           <init-param>                <param-name>debug<!--</ span-->param-name>               < param-value>true<!--</span-->param-value>           <!--</span-->init-param>           <load-on-startup>1<!--</ span-->load-on-startup>       <!--</span-->servlet>        <servlet>           <servlet-name> simpleuploader<!--</span-->servlet-name>           < servlet-class>                com.fredck.fckeditor.uploader.simpleuploaderservlet           <! --</span-->servlet-class>           <init-param>                <param-name>baseDir<!-- </span-->param-name>               <!--This is the file upload path, you need to create a new Userfiles folder in the Webroot directory-->                <!--Depending on the type of file you need to create a new related folder Image, Flash-->                <param-value>/UserFiles/<!--</span-->param-value>            <!--</span-->init-param>            <init-param>               <param-name>debug<!--</span-->param-name>                <param-value>true<!--</span-->param-value>            <!--</span-->init-param>            <init-param>                <!--This parameter is to turn on upload function-->               < param-name>enabled<!--</span-->param-name>                <param-value>false<!--</span-->param-value>            <!--</span-->init-param>            <init-param>                <param-name>AllowedExtensionsFile<!--</span-->param-name>                <param-value><!--</span-->param-value>            <!--</span-->init-param>            <init-param>                <!--This parameter is a file filter and the following file types cannot be uploaded-->                <param-name>DeniedExtensionsFile<!--</span-->param-name>                <param-value>                     php|php3|php5|phtml|asp|aspx| ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi                <!--</span-->param-value>           <!-- </span-->init-param>           <init-param>                <param-name> allowedextensionsimage<!--</span-->param-name>               <param-value>jpg|gif|jpeg|png|bmp<!--</span-->param-value>            <!--</span-->init-param>            <init-param>               < param-name>deniedextensionsimage<!--</span-->param-name>                <param-value><!--</span-->param-value>           <!--</span-->init-param>            <init-param>                <param-name>AllowedExtensionsFlash<!--</span-->param-name>                <param-value>swf|fla<!--</span--> Param-value>           <!--</span-->init-param>            <init-param>                <param-name>DeniedExtensionsFlash<!--</span-->param-name>                <param-value><!--</span-- >param-value>           <!--</span-->init-param>            <load-on-startup>1<!--</span--> load-on-startup>       <!--</span-->servlet>        <servlet-mapping>           <servlet-name> connector<!--</span-->servlet-name>           < url-pattern>               /editor/filemanager/browser/default/ connectors/jsp/connector           <!--</span--> url-pattern>       <!--</span-->servlet-mapping>        <servlet-mapping>           <servlet-name> simpleuploader<!--</span-->servlet-name>           < url-pattern>               /editor/ filemanager/upload/simpleuploader           <!--</span--> url-pattern>       <!--</span-->servlet-mapping>   <!--</ span-->web-app>  

Note: A description of some common configurations has been added to the web.xml.

Create a new input.jsp file that reads as follows: (Note the "TESTFCK" ID in the content)

(above can not directly post HTML code, so can only post a picture, if you know how to post HTML code friend, please tell me, thank you) Note: Integrated FCKeditor <!--in JSP [Endif]-->javascript integration:

As shown in the above, by creating a new FCKeditor object and then calling the object's setting method to set the FCKeditor properties, the last call to FCKeditor Replacetextarea () replaces the <textarea in the HTML page > tags. Alternatively, FCKeditor can call its create () method to embed the FCKeditor editor directly in the JSP.

Note: Note that the above Ofckeditor.basepath = ""; In this way FCKeditor will look for fckeditor.html files in its editor directory, since I copied the editor folder directly to the WebContent directory. So set its basepath to "", and if you copy editor to another directory, set the corresponding BasePath property. FCKeditor the default is to place it in the FCKeditor directory

(2) <!--[endif]--> Use a custom label this method must complete the step: Extract Fckeditor.java-2.3.zip package,/src the Fckeditor.tld file under it to the project webcontent/ Web-inf Directory

First add the FCKeditor tag to the JSP:

<%@ taglib uri= "/web-inf/fckeditor.tld" prefix= "FCK"%>

       JSP page, add the following code, integrated fckeditor editor: JS code      id= "TESTFCK" <!- --Note here-->        basepath= "/fckeditor/"           height= "60%"         skinpath= "/fckeditor/editor/skins/default/"           toolbarset= "Default"         imagebrowserurl= " Fckeditor/editor/filemanager/browser/default/browser.html? Type=image&connector=connectors/jsp/connector "        linkbrowserurl="/ Fckeditor/editor/filemanager/browser/default/browser.html? Connector=connectors/jsp/connector "        flashbrowserurl="/fckeditor/editor/ Filemanager/browser/default/browser.html? Type=flash&connector=connectors/jsp/connector "        imageuploadurl="/ Fckeditor/editor/filemanager/upload/simpleuploader? Type=image "        linkuploadurl= "/fckeditor/editor/filemanager/upload/simpleuploader? Type=file "        flashuploadurl="/fckeditor/editor/filemanager/upload/ Simpleuploader? Type=flash ">     

(10) New file, this file is relatively simple, but simply display from the online editor to pass over the content, as follows:

<%=request.getparameter ("TESTFCK")%>

Notice the getparameter here ("TESTFCK"), this "TESTFCK" is the ID set in input.jsp.

4. FCKeditor class Description

The following is a description of the FCKeditor class used to create the editor in the page

(1) Constructor:

FCKeditor (Instancename[,width,height,toolbarset,value])

InstanceName: Unique name of editor (equivalent to ID)

Width: Breadth

Height: Altitude

ToolbarSet: The name of the tool bar collection

Value: Editor initialization content

(2) Properties:

InstanceName: Editor Instance Name

Width: The default value is 100%

Height: The default value is 200

ToolbarSet: Tool Set name, reference Fckconfig.js, default is defaults

Value: Initializes the editor's HTML code with an empty default value

BasePath: The base path of the editor, default to/fckeditor/folder, note, try not to use a relative path. The most use relative to the site root path of the representation method, to end

Checkbrowser: Check browser compatibility before displaying the editor, default to True

Displayerrors: Do you want to display a prompt error with the default true

(3) Collection:

Config[key]=value

This collection is used to change the value of an item in the configuration, as

ofckeditor.config["DefaultLanguage"]= "PTBR"

(4) Methods:

Create ()

Create and output an editor

Repacetextarea (Textareaname)

Replace the corresponding text box with the editor

5. How to configure FCKeditor

FCKEDITOR provides a set of settings for customizing its appearance, characteristics, and behavior. The primary profile name is Fckconfig.js you can edit either the master configuration file or the individual profile. The configuration file uses JavaScript syntax. When you create an editor, You can use the following syntax:

Varofckeditor=newfckeditor (' FCKeditor1 ')

ofckeditor.config[' Customconfigurationspath ']= '/myconfig.js '

Ofckeditor.create ()

Reminder: When you modify the configuration, empty the browser cache to see the effect

Configuration options: Autodetectlanguage=true/false automatically detects language basehref= "" relative to the base address of the link contentlangdirection= "ltr/rtl" Default text direction contextmenu= An array of strings, the contents of the right menu customconfigurationspath= the custom profile path and name Debug=true/false whether debugging is turned on, so that when Fckdebug.output () is invoked, When you switch from the visual interface to the code page when the style sheet file in the defaultlanguage= "default language editorareacss=" edit area is enablesourcexhtml=true/false to True when you output the content in the Debug window, Processing HTML into XHTML enablexhtml=true/false whether to allow XHTML to replace HTML fillemptyblocks=true/false using this feature, you can replace empty block-level elements with empty cells fontcolors = "" Sets the text color list fontformats= when displaying the color picker setting the font name fontsizes= "" Font Size list in the name fontnames= font list that appears in the list of text formats Forcepasteasplaintext=true/false is forced to paste as plain text forcesimpleampersand=true/false