Install and deploy FCKeditor in. Net (latest arrangement)

Source: Internet
Author: User

FCKeditorAn open-source HTML text editor.The general installation and use methods in ASP. NET are as follows:

1. Download FCKeditor 2.4, which mainly includes core files.

2. Download FCKeditor 2.2. net, including ASP. net dll files, and decompress them to any directory.

3. decompress the FCKeditor 2.4 package and copy the FCKeditor folder to the root directory of the website. asp is used here. for example, copy the test project of NET 2.0 to the root directory of test, and create a new uploads directory under the root directory to store the files uploaded by the editor.

4. Modify JS configurations. open fckconfig in the FCKeditor directory. JS file, set fckconfig. change the defaultlanguage value to ZH-CN to change the interface language to simplified Chinese, and change the values of _ filebrowserlanguage and _ quickuploadlanguage to Aspx. The optional modifications are as follows. You can modify the editor's skin and set the default value of fckconfig. skinpath = fckconfig. basepath + 'Skins/default/'to office2003 or silver. Save the changes and close the file.

5. Configure web. config.
Open the Web. config file of the project and modify the deleettings element. The configuration is as follows:

<Deleetask>

<Add key = "FCKeditor: basepath" value = "~ /FCKeditor/"/>

<Add key = "FCKeditor: userfilespath" value = "/your project name/uploads"/>
// For example, if my solution is named test, it is "/test/uploads ".

</Appsettings>

After FCKeditor: basepath is set, you no longer need to specify the basepath attribute every time you use the FCKeditor instance. FCKeditor: userfilespath is the directory where all uploaded files are located. You may ask why you want to set/Test/uploadsInstead~ /UploadsFCKeditor uses this value to return the relative path of the uploaded file to the client ,~ /Uploads can be compiled and interpreted in the form of ASP. NET in the service, but the static state on the client does not understand what this is. If you use ~ /After uploads, the returned paths of all uploaded files are ~ /Uploads, you will get this linkHttp ://~ /Uploads/image/logo.gifThe path is found. So we need to set it like above. This is in the development stage.Remember to change/test/uploads to/uploads after the project is released.In the development stage, the URL of vs2005 when running the project isHttp: // localhost/Project name/After the release, you can create a site on the server.Http://www.abc.com/So it must be changed after the release. These are common errors that occur when fckeditor2.2 + ASP. net2.0 is used, and the cloud is unknown.

6. Reference The fredck. fckeditorv2.dll file in the decompressed FCKeditor. Net package in the project. The specific location is FCKeditor. net_2.2/bin/release/fredck. fckeditorv2.dll.

7. register the user control. Open the default. aspx page of the test project and go

ProgramCode
<% @ Page Language = "C #" masterpagefile = "~ /Weblog. Master "autoeventwireup =" true "codefile =" article. aspx. cs "inherits =" article "Title =" test FCKeditor "%>

Add the following code:

Program code
<% @ Register Assembly = "fredck. fckeditorv2" namespace = "fredck. fckeditorv2" tagprefix = "fckeditorv2" %>

Then you can use this control on the default. aspx page:

Program code
<Fckeditorv2: FCKeditor id = "FCKeditor" runat = "server" width = "580px" enablexhtml = "true" enablesourcexhtml = "true" basepath = "~ /FCKeditor/"Height =" 500px "> </fckeditorv2: FCKeditor>

8. How to obtain the text in the editor.
This control has a property of value, which is used to obtain the text in the editor.

9. properties and events of the FCKeditor Control.
The attributes are listed as follows:

Autodetectlanguage
Basehref
Basepath
Contentlangdirection
Customconfigurationspath
Debug
Defaultlanguage
Editorareacss
Enablesourcexhtml
Enableviewstate
Enablexhtml
Fillemptyblocks
Fontcolors
Fontformats
Fontnames
Fontsizes
Forcepasteasplaintext
Forcesimpleampersand
Formatindentator
Formatoutput
Formatsource
Fullpage
Geckousespan
Height
ID
Imagebrowserurl
Linkbrowserurl
Pluginspath
Runat
Skinpath
Startupfocus
Stylesxmlpath
Tabspaces
Toolbarcancollapse
Toolbarset
Toolbarstartexpanded
Usebroncarriagereturn
Value
Visible
Width

The specific event list is as follows:

Ondatabinding
Ondisposed
Oninit
Onload
Onprerender
OnUnload

10. Others

As mentioned in support on the official website, if Asp.net 2.0 and theme are used, you need to enable \ editor \ filemanager \ upload \ aspx \ upload. aspx and \ editor \ filemanager \ browser \ Default \ connectors \ aspx \ connector. and add theme = "" to the first line "". For example

Program code
<% @ Page Language = "C #" inherits = "fredck. fckeditorv2.filebrowserconnector" autoeventwireup = "false" theme = "" %>

Official Website:
Http://www.fckeditor.net/

For more information, see:
Http://www.cnblogs.com/dsclub/archive/2006/05/06/392337.html

Bytes -----------------------------------------------------------------------------------------Currently, FCKeditor only provides JavaScript-based integration, so here we only show how to apply JavaScript to integrate FCKeditor into the site. Of course, the integration of other languages, you can refer to the example in the _ samples folder to complete
1. If the editor has been installed in the/FCKeditor/folder of your site. so, the first step we need to do is to add the script tag in the header segment of the page to introduce the Javascript integration module. for example:
<SCRIPT type = "text/JavaScript" src = "/FCKeditor. js"> </SCRIPT> The path is changeable. 2. Now, the FCKeditor class can be used. There are two ways to create a FCKeditor editor on the page:
Method 1: inline (recommended): Insert the following code to the place where the editor needs to be inserted in the form tag of the page:
Script Type = "text/JavaScript">
VaR ofckeditor = new FCKeditor ('fckeditor1 ');
Ofckeditor. Create ();
</SCRIPT> Method 2: textarea tag replacement method (not recommended): In the onload event on the page, add the following code to replace an existing textarea tag. <HTML>
<Head>
<SCRIPT type = "text/JavaScript">
Window. onload = function ()
{
VaR ofckeditor = new FCKeditor ('mytextarea ');
Ofckeditor. replacetextarea ();
}
</SCRIPT>
</Head>
<Body>
<Textarea id = "mytextarea" name = "mytextarea"> This is <B> the </B> initial value. </textarea>
</Body>
</Html> 3. Now, the editor can be used. FCKeditor class reference:
The following describes the FCKeditor class used to create an editor on the page. Constructor:
FCKeditor (InstanceName [, width, height, toolbarset, value])
InstanceName: Unique name of the Editor (equivalent to ID)
Width: width
Height: Height
Toolbarset: name of the toolbar set
Value: the initialization content of the editor. Attribute:
InstanceName: Editor Instance name
Width: width. The default value is 100%.
Height: height. The default value is 200.
Toolbarset: tool set name. For details, refer to fckconfig. js. The default value is default.
Value: Initialize the HTML code of the editor. The default value is null.
Basepath: The base path of the editor. The default path is/FCKeditor/folder. Be sure not to use the relative path. It is best to use the Representation Method Relative to the root path of the site and end /.
Checkbrowser: whether to check the browser compatibility before the editor is displayed. The default value is true.
Displayerrors: Indicates whether an error is displayed. The default value is true; Set:
Config [Key] = value;
This set is used to change the value of a configuration item, as shown in figure
Ofckeditor. config ["defaultlanguage"] = "Pt-Br "; Method:
Create ()
Create and output an editor Repacetextarea (textareaname)
Replace the text box with the editor How to configure FCKeditor?
FCKeditor provides a set of settings for customizing its appearance, characteristics, and behavior. The main configuration file name is fckconfig. js.
You can edit the main configuration file or define a separate configuration file. The configuration file uses the Javascript syntax. After modification, you can use the following syntax when creating an Editor:
VaR ofckeditor = new FCKeditor ('fckeditor1 ');
Ofckeditor. config ['customconfigurationspath'] = '/myconfig. js ';
Ofckeditor. Create (); Reminder: After you modify the configuration, clear the browser cache to view the effect. 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 How do I customize the style list?
The FCKeditor style toolbar provides predefined styles defined by the XML file. The default XML style file exists in the fckstyls. xml file in the FCKeditor root folder.
The structure of the XML file is analyzed as follows:
<? XML version = "1.0" encoding = "UTF-8"?>
<Styles>
<Style name = "my image" element = "IMG">
<Attribute name = "style" value = "padding: 5px"/>
<Attribute name = "border" value = "2"/>
</Style>
<Style name = "italic" element = "em"/>
<Style name = "title" element = "span">
<Attribute name = "class" value = "title"/>
</Style>
<Style name = "title H3" element = "H3"/>
</Styles> Each STYLE tag defines a style. Name is the style name displayed in the drop-down list. The element attribute specifies the objects applicable to this style, because the style in FCKeditor is context sensitive, that is, select different objects. Only the styles defined for these objects are displayed. Spelling check FCKeditor comes with two spell checking tools, iespell, which is used by default. This method requires the customer to download and install the small software iespell. In addition, spellpager is also provided for spelling checks. However, since spellpager is a server-side script compiled by PHP, your web server must support the PHP scripting language.
For more information about how to change the spelling checker, see the configuration file. Compression script To improve the efficiency of Script Loading, FCKeditor uses the following methods to compress the script as much as possible to reduce the script size:
1. Remove the comments from the script.
2. Remove the meaningless blank in the script.
In addition, FCKeditor provides a tool specifically used to compress scripts so that you can reduce the file size during release,
You can copy fckeditor.packager.exe in the _packagerfolder to the FCKeditor root folder to run and compress the script. Localized FCKeditor
If FCKeditor does not provide all the languages you need (actually all of them are available), you can create a new language by yourself.
, You only need to copy the en. JS. in addition, the language name and the corresponding script file name must follow the RFC 3066 standard, but must be in lower case. For example, the script file name corresponding to Portuguess language must be PT. JS
If you want to target a certain country, you can add a horizontal line and a country abbreviation after the abbreviation. During use, the system automatically detects the client language and country and uses the appropriate interface language. After creating a new language, you must create an entry for it in "Edit/lang/fcklanguagemanager. js", as shown below:
Fck1_agemanager. availablelanguages =
{ En: 'English ',
PT: 'portranges'
} Note that the file must be saved in UTF-8 format How can I interact with server scripts?
Please check the example to get the relevant content In addition, use the following steps in ASP. NET:
1. Add FCKeditor to the toolbox
2. Drag the FCKeditor Control to the page
3. Specify a name for it
4. all attributes of the FCKeditor class can be used not only in code, but also directly as attributes of the FCKeditor Control. For example, to change the skin, you can specify skinpath = "/FCKeditor/Editor/skins/office2003" on the UI page. net version can be better, you can find FCKeditor ASP. net 2.1 source file, then modify the control design, expose more useful properties for it, and re-compile it.
5. Use the Value Attribute of the FCKeditor Control to obtain the PostBack data.
6. By default, ASP. NET does not allow the submission of HTML and JavaScript content. Therefore, you must set validaterequest to false for pages using FCKeditor. (< % @ Page Validterequest = "false" %>) -------------------------------------------------------- Appendix: I. How to set the language for uploading files In the fckconfig. js file under the root directory of FCKeditor VaR _ filebrowserlanguage = 'asp '; // ASP | aspx | CFM | lasso | Perl | PHP | py
VaR _ quickuploadlanguage = 'asp '; // ASP | aspx | CFM | lasso | PHP The two lines are changed to the editor language you need to call. If Asp.net is used, it is changed to aspx; 2. Solve Chinese problems:
Add the following to Web. config:
<Globalization requestencoding = "gb2312" responseencoding = "gb2312"/>
In this way, Chinese files can be displayed, but the URL address is also Chinese;
If the server does not parse the Chinese address properly, the image may not be browsed;
So modify: Editor \ filemanager \ browser \ Default \ frmresourceslist.html
In openfile function
Window. Top. opener. seturl (fileurl );
To:
Window. Top. opener. seturl (escape (fileurl )); 3. Set the upload directory:
1: Set in Web. config:
<Deleetask>
<Add key = "FCKeditor: userfilespath" value = "/fck/upload/"/>
</Appsettings> 2: Set in session:
Add the following code to editor \ filemanager \ browser \ Default \ connectors \ aspx \ connector. aspx:
<SCRIPT runat = "server" Language = "C #">
Protected override void oninit (eventargs E)
{
Session ["FCKeditor: userfilespath"] = "/fck/upload1 /";
}
</SCRIPT> Appendix: How do I dynamically set the path of the uploaded image in Asp.net? 1. Modify the value of fckconfig. imagebrowserurl in Javascript as follows:
fckconfig. imagebrowserurl + = "? Path = path of the file to be uploaded ";
for example, to upload the file to the uploadfile folder in the root directory of the site, set it to:
fckconfig. imagebrowserurl + = "? Path =/uploadfile ";
2. in "editor \ filemanager \ browser \ Default \ connectors \ aspx \ connector. add the following program to the end of the aspx file:

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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