Detailed explanation of the use of HTML editor FCKeditor

1. Introduction
Function: What you see is what you get, supports pictures and Flash, the toolbar can be freely configured, and is 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, selected by Baidu, CSDN, etc.
2. Download
Official download homepage: http://www.fckeditor.net/download/, the current version is 2.5.1
You need to download FCKeditor 2.5.1 (FCKeditor_2.5.1.zip) and FCKeditor.Java (FCKeditor-2.3.zip)
3. Deployment
In this example, WebRoot is used as the application root path. The directory structure after deployment is as shown below:

1. FCKeditor_2.5.1. Unzip the zip, copy the fckeditor folder to /WebRoot/
2. Unzip FCKeditor-2.3.zip, 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 content:
＜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 /WebRoot/fckeditor/ fckconfig.js, the modified part is 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';
Note:
(1) Steps 3 and 4 set up the configuration of file browsing and uploading. The of the Servlet in web.xml must be consistent with the URL reference in fckconfig.js;
(2) Prerequisites for the normal operation of this example WebRoot is deployed as the root path. If a virtual path is set, the servlet will not be found.
4. Use
This example uses the most direct js method. For API and TagLib methods, please refer to the example under _samples after decompression of FCKeditor-2.3.zip.
fckdemo.jsp:
＜%@ page contentType="text/html;charset=GBK"%＞
＜html＞
＜head＞
＜title＞FCKeditor Test＜/title＞
＜script type="text/javascript " src="/fckeditor/fckeditor.js"＞＜/script＞
＜/head＞
＜body＞
＜form action="fckdemo.jsp" method="post"＞
＜%
String content=request. getParameter("content");
if (content != null) {
content = content.replaceAll("rn", "");
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');//The incoming parameter is the name of the form element (input or textarea generated by FCKeditor)
oFCKeditor.BasePath='/fckeditor/ ';//Specify 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="Submit"＞＜/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＞
＜/html＞
Rendering:

5. Configuration file fckconfig.js
1. DefaultLanguage: Default language, can be changed to "zh-cn"
2. Custom toolbar: can be modified or added ToolbarSets, for example:
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink
', '-','TextColor','BGColor','-','Style','-','Image','Flash','Table']
] ;
3. EnterMode and ShiftEnterMode: "Enter" and "Shift+Enter" line-breaking behavior, the comment prompts the optional mode
4. EditorAreaCss: editing area style file
5. Other parameters:
AutoDetectLanguage=true/false automatically detects the language
BaseHref="" The base address of the relative link
ContentLangDirection="ltr/rtl" Default text direction
ContextMenu=String array, content of the right-click menu
CustomConfigurationsPath="" Custom configuration file path and name
Debug=true/false Whether to enable debugging, so that when calling FCKDebug .Output(), the content will be output in the debugging window
EnableSourceXHTML=true/false When TRUE, when switching from the visual interface to the code page, HTML will be processed into XHTML
EnableXHTML=true/false Whether to allow the use of XHTML instead of HTML
FillEmptyBlocks=true/false Using this function, you can replace empty block-level elements with spaces
FontColors="" Set the text color list when displaying the color picker
FontFormats="" Set the name displayed in the text format list
FontNames="" Font name in the font list
FontSizes="" Font size list in the font size
ForcePasteAsPlainText=true/false Force pasting to plain text
ForceSimpleAmpersand=true/false Whether to not convert the & symbol into an XML entity
FormatIndentator= "" Characters used when indenting code in source code format
FormatOutput=true/false Whether to automatically format code when outputting content
FormatSource=true/false Whether to automatically format code when switching to code view
FullPage=true/ false Whether to allow editing of the entire HTML file, or only the content between the BODY
GeckoUseSPAN=true/false Whether to allow SPAN tags to replace B, I, U tags
IeSpellDownloadUrl="" URL to download the spell checker
ImageBrowser=true/false Whether to allow browsing server function
ImageBrowserURL="" URL running when browsing the server
ImageBrowserWindowHeight="" Image browser window height
ImageBrowserWindowWidth="" Image browser window width
LinkBrowser=true/false Whether to allow browsing the server when inserting a link
LinkBrowserURL="" The URL of the browsing server when inserting a link
LinkBrowserWindowHeight="" Link target browser window height
LinkBrowserWindowWidth="" Link target browser window width
Plugins=object Register plug-in
PluginsPath="" Plug-in folder
ShowBorders =true/false Merge borders
SkinPath="" Skin folder location
SmileyColumns=12 Icon window column number
SmileyImages=Character array Image file name array in the icon window
SmileyPath="" Icon folder path
SmileyWindowHeight Icon window height
SmileyWindowWidth Icon window width
SpellChecker="ieSpell/Spellerpages" Set the spell checker
StartupFocus=true/false FOCUS to the editor when turned on
StylesXmlPath="" Set the location of the XML file that defines the CSS style list
TabSpaces=4 The number of space characters generated by the TAB key
ToolBarCanCollapse=true/false Whether to allow expansion/collapse of the toolbar
ToolbarSets=object allows the use of the TOOLBAR set
ToolbarStartExpanded=true /false turns on whether TOOLBAR is expanded
UseBROnCarriageReturn=true/false When entering, whether to generate a BR mark or a P or DIV mark
6. Custom style
The Style option of the toolbar is generated by the configuration file specified by fckconfig.js ：
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;

The above is the detailed explanation of the use of HTML editor FCKeditor. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!