Home > Others

Detailed instructions on using the HTML editor FCKeditor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. Introduction
Function: WYSIWYG. Images and Flash are supported. The toolbar is configurable and easy to use.
Compatibility: IE 5.5 +, Firefox 1.5 +, Safari 3.0 +, Opera 9.50 +, Netscape 7.1 +, and Camino 1.0 +
Maturity: widely used and used by Baidu and CSDN
Ii. Download
Official download homepage: http://www.fckeditor.net/download/. the current homepage is 2.5.1.
Download FCKeditor 2.5.1(fckeditor_2.5.1.zip)and fckeditor.java(fckeditor-2.3.zip)
Iii. Deployment
In this example, WebRoot is used as the application root path. The directory structure after deployment is shown in:

1. Decompress FCKeditor_2.5.1.zip and copy the fckeditor folder to/WebRoot /.
2. Unzip the FCKeditor-2.3.zip and copy the 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 codeThe Code is as follows: <servlet>
<Servlet-name> Connector </servlet-name>
<Servlet-class> com. fredck. FCKeditor. connector orservlet </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 as follows: Copy codeThe Code 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 configure file browsing and uploading. The Servlet <url-pattern> in web. xml must be consistent with the URL reference in fckconfig. js;
(2) the premise of normal operation in this example is that WebRoot is deployed as the root path. If a virtual path is set, the servlet cannot be found.
Iv. Use
This example uses the most direct JS formula. For API and taglibformula, see the example in _ samples after decompressing fckeditor-2.3.zip.
Fckdemo. jsp:Copy codeThe Code is as follows: <Head>
<Title> FCKeditor Test </title>
<Script type = "text/javascript" src = "/fckeditor. js"> </script>
</Head>
<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'); // The input parameter is the name of the form element (input or textarea generated by FCKeditor ).
OFCKeditor. BasePath = '/fckeditor/'; // specifies the root path of FCKeditor, that is, the path of fckeditor. js.
OFCKeditor. Height = '20140901 ';
OFCKeditor. ToolbarSet = 'Demo'; // specifies 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> </tr>
<Tr> <td> values (saved to the database): </td> </tr>
<Tr> <td style = "padding: 10px;"> <% = content %> </td> </tr>
</Table>
</Form>
</Body>
</Html>

:

5. configuration file fckconfig. js
1. DefaultLanguage: default language, which can be changed to "zh-cn"
2. Custom toolbar: 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: line feed of "Carriage Return" and "Shift + carriage return". The optional mode is prompted for comments.
4. EditorAreaCss: editing area Style File
5. Other parameters:Copy codeThe Code is as follows: 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.
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

6. Custom styles
The Style option in the toolbar is generated by the configuration file specified by fckconfig. js:Copy codeThe Code is as follows: FCKConfig. StylesXmlPath = FCKConfig. EditorPath + 'fckstyles. xml ';

You can modify the fckstyles. xml custom style.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html editor html tags instructions for browser how to create website using html on notepad pdf using nano editor using vi editor in ubuntu html gui editor 1st page html editor

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More