Use FCKeditor online editor configuration in Asp.net

Source: Internet
Author: User

======================= The method for extracting data from the Internet: ======================================

FCKeditor is currently the best HTML text editor. If you still don't understand it, you will understand it.
:

Why is FCKeditor cold? This is not a big bang, it is a little troublesome to use, the following details how to deal with this stuff.

1. FCKeditor official website is: http://www.fckeditor.net/download
FCKeditor 2.4.2 is the latest version.
Please download on this page: http://sourceforge.net/project/showfiles.php? Group_id = 75348
:

Download two zip packages, fckeditor2.4.2.zip and FCKeditor. net.

Note:
Fckeditor2.4.2.zip is the latest Javascript file and image;
Fckeditor.net.zip is the DLL called by ASP. NET.

2.Copy the FCKeditor directory in fckeditor2.4.2.zip to the website.

3.Decompress the fckeditor.net.zip package and find fredck. fckeditorv2.dll in the FCKeditor. net_2.2 \ bin \ DEBUG directory. Other files are useless. Copy fredck. fckeditorv2.dll to our website and create a bin directory.

4. Reference fredck. fckeditorv2.dll.
Step 1:

Step 2:

5. Import the toolbox.
Right-click the toolbox

Click "select item ". Pop-up window:

Click Browse to find the dll Directory.

The FCKeditor Control is displayed in the toolbox.

6. Drag FCKeditor to the page.

7. Configure webconfig
<? XML version = "1.0"?>
<! --
Note: In addition to manually editing this file, you can also use
Web management tools to configure applicationsProgram. You can use
"Website"-> "ASP. NET configuration" option.
The complete list of settings and comments is displayed in
In machine. config. Comments, this file is usually located in
\ Windows \ Microsoft. NET \ framework \ v2.x \ config
-->
<Configuration>
<Deleetask>

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

<Add key = "FCKeditor: userfilespath" value = "/files/"/>

</Appsettings>

<Connectionstrings/>
<System. Web>

Note: basepath is the path where FCKeditor is located. FCKeditor can be written in this way directly under the website directory. If your website has more layers, make appropriate adjustments.
Userfilespath is the directory of all uploaded files. Why set to/files?This is not ~ /FilesBecauseFCKeditorUse this value to return the relative path of the uploaded file to the client. Otherwise, the user will retrieve the user's machine directory instead of the HTTP directory during access.

Suggestion: it is better to separate files into a site under the wwwroot Directory, which is parallel to our site FCKeditor. Don't put it in FCKeditor. Why? Because files requires the user to have the write permission, it is dangerous to put the files in FCKeditor.

8. The files directory must have the write permission. You can set the account based on your website requirements. This document makes it more reasonable to use an ASP. NET account to set the user conveniently.

 

9. Modify the FCKeditor/fckconfig. js file.
At the position of Row 3
VaR _ filebrowserlanguage = 'asp '; // ASP | aspx | CFM | lasso | Perl | PHP | py
VaR _ quickuploadlanguage = 'asp '; // ASP | aspx | CFM | lasso | PHP
Change
VaR _ filebrowserlanguage = 'aspx '; // ASP | aspx | CFM | lasso | Perl | PHP | py
VaR _ quickuploadlanguage = 'aspx '; // ASP | aspx | CFM | lasso | PHP

10.FCKeditor slimming. All headers starting with _ are sample files or source files, but we recommend that you be careful.

11. The following example shows how to use the image,

Click Browse server ".

An error is easily reported in the pop-up window.

If an error is reportedXML request error: internal server error (500), probably because the directory path is incorrect and the write permission is not available.

Select Image



Final Effect

Front-endCode:

<% @ Page Language = "C #" validaterequest = false autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>

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

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> FCKeditor Text Editor </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Fckeditorv2: FCKeditor id = "fckeditor1" runat = "server" defaultlanguage = "ZH-CN" Height = "400px" width = "660px"
> </Fckeditorv2: FCKeditor>

</Div>
</Form>
</Body>
</Html>

How can I get the results? Fckeditor1.value is.

12. There is also a similar control freetextbox which is also very useful. If you are interested, you can find it on the Internet. It is much better than this one, but it doesn't feel better, and its latest version seems to be charged.

 

 

FCKeditor Lite version (attached ).

Go to the FCKeditor folder and delete all files and folders starting with "_". These are examples. Only the Editor folder and fckconfig are retained. JS, FCKeditor. JS, fckstyles. XML, fcktemplates. XML is enough;

Go to the Editor folder and delete the "_ source" folder, which also contains the source file;

Go back to the upper-level directory and enter the filemanager folder. There are two folders: browser and upload. Go to browser \ Default \ connectors. Only the aspx folder is retained, and the rest are deleted. The mcpuk directory can also be deleted. The same is true for upload, and only the aspx folder is retained;

Return to the editor and enter the images folder. The smiley folder contains emoticon icons, including MSN and fun. If you want to use your own emoticon icons, you can delete them; if you want to use the emojis here, do not delete them;

Lang contains a Language Pack. If only simplified Chinese characters are used, only fck1_agemanager is retained. JS, zh-cn.js two files on the line, it is recommended to keep en. JS (English), Zh. JS (Traditional Chinese) files, fck1_agemanager. JS is a language configuration file. With it, it can be used with fckconfig. JS settings are paired, corresponding to the corresponding language file, must be retained!

Exit the Lang folder and enter the skins folder. If you want to use the default FCKeditor milk yellow, delete the other two folders except the default folder. If you want to use other folders, it depends on your preferences.

So far, the file has been streamlined, from the original 2.55m to the current 797k. Then modify the settings.

PS:
Note that when you run into XML request 500, check:
1. Whether your upload directory is fully controlled by everyone.
2. Check whether your configuration file is correct. By default, it should be your/virtual directory/folder name/
3. Check whether the page has the validaterequest = false attribute.
The above method is absolutely feasible.

 

 

=============================== My own summary method: ========================

1. Download:( Http://www.fckeditor.net/download)

So I plan to make this example so that you can get started immediately when using this component. We need to use it. First, we need to have this component first (download fckeditor_2.5.1 ). Because I learned. NET and it is becoming more and more popular, my example is mainly ASP. NET. To enable FCKeditor to support. net, you must download fckeditor_net. This is not the latest version. The latest version is fckeditor2.6. The version is different, but the usage is the same. The versions are the same. In my example

I use fckeditor2.5.
Attachment:
Fckeditor_2.5.1: http://jaist.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.5.1.zip
Fckeditor_net: http://jaist.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor.Net_2.5.zip
Fckeditor2.6: http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6b.zip

Ii. Sorting:

Because FCKeditor supports multiple languages and platforms, we now use ASP. NET, so we only need to find out what we need, and we can remove other ones. First, the files and folders with "_" can be omitted. They are examples. Next we will continue to slim down. In the FCKeditor folder, only the editor, fckconfig. JS, FCKeditor. JS, fckstyles. XML, and fcktemplates. xml files are left. All the other files are removed. In CSS, the style used by this component is not supported. In dialog, do not touch some pop-up dialog boxes, or do not touch DTA. Under editor \ filemanager \ connectors, we only need Aspx. Here we provide the management of uploaded files. Lang we only need to Zh-cn.js this is simplified Chinese, it is all the languages that can support. JS is the core of this component, and we cannot do anything about it. Some plug-ins are plug-ins, so we don't have to worry about it. In this example, we will use the upload image plug-in, instead of using its default upload function. Skin contains three skins: Default, office2003, and silver. By now, the folder size is reduced a lot. Finally, copy the FCKeditor folder to the root directory of your website.

Below. After everything is done, configure web. config and fckconfig. js to use them like our commonly used custom controls.

 

Iii. Configuration:

1. In beibeifckeditor.net_2.6.3.zip, "FCKeditor. net_2.6.3" bin "release" 2.0 "fredck. fckeditorv2.dll" is included in the bin directory of the site. Copy the "fckeditor_2.6.3" FCKeditor "folder to the site root directory;

2. Open the FCKeditor/fckconfig. js file in the text editor and configure the editor;

VaR _ filebrowserlanguage = 'asp ';

VaR _ quickuploadlanguage = 'asp ';

Change

VaR _ filebrowserlanguage = 'aspx ';

VaR _ quickuploadlanguage = 'aspx ';

3. Configure the Web. config Option

<Deleetask>
<Add key = "FCKeditor: basepath" value = "~ /FCKeditor/"/>
<Add key = "FCKeditor: userfilespath" value = "~ /Uploadfiles/"/>
</Appsettings>

4. Set Language
Fckconfig. autodetectlanguage = true; // whether to automatically detect the language. Display the language of the browser based on the language settings of the user's browser.
Fckconfig. defaultlanguage = 'zh-cn'; // set the output language.

4. Use on the page:

Add page commands: <% @ register Assembly = "fredck. fckeditorv2" namespace = "fredck. fckeditorv2" tagprefix = "fckeditorv2" %>
Add a control: <fckeditorv2: FCKeditor id = "fckeditor2" runat = "server"> </fckeditorv2: FCKeditor>

Alternatively, you can import fredck. fckeditorv2.dll in the toolbox> Add tab. You can drag it in where you need it.

 

5. upload images or files:

FCKeditor error "this connector is disabled please check the" Editor/filemanager/connectors/aspx/config. aspx "SOLUTION
I recently integrated fck, and I also encountered this problem.

Solution:

Open Editor/filemanager/connectors/aspx/config. ascx and modify the checkauthentication () method. True is returned.

C # code

Private bool checkauthentication ()
{
// Warning: do not simply return "true". By doing so, you are allowing
// "Anyone" to upload and list the files in your server. You must implement
// Some kind of session validation here. Even something very simple...
//
// Return (session ["isauthorized"]! = NULL & (bool) session ["isauthorized"] = true );
//
//... Where session ["isauthorized"] is set to "true" as soon as
// User logs in your system.

Return true;
}

In addition, FCKeditor adds subdirectories for image, Flash, file, and media upload types:

Typeconfig ["Flash"]. filespath = "% userfilespath % Flash /";

......

Typeconfig ["Media"]. filespath = "% userfilespath % media /";

You can also expand the code above. For example, you can automatically create sub-directories for different users to isolate and separate user files. Sample Code

As follows:

String ImagePath = "% userfilespath %" + m_username + "/image /";

Typeconfig ["image"]. filespath = ImagePath;

Typeconfig ["image"]. filesabsolutepath = (userfilesabsolutepath = ""? "": "% Userfilesabsolutepath % image /");

Typeconfig ["image"]. quickuploadpath = ImagePath;

Typeconfig ["image"]. quickuploadabsolutepath = (userfilesabsolutepath = ""? "": "% Userfilesabsolutepath % ");

Finally, you need to modify the fckconfig. js configuration file under FCKeditor:

Find: fckconfig. defaultlanguage = 'en' and change it to fckconfig. defaultlanguage = 'zh-cn'

Find VaR _ filebrowserlanguage = 'php' and change it to VaR _ filebrowserlanguage = 'aspx'

Find VaR _ quickuploadlanguage = 'php' and change it to VaR _ quickuploadlanguage = 'aspx'

Fckconfig. fontnames = '; _ gb2312; Arial; Comic Sans MS; Courier New; tahoma; Times New Roman; verdana ';

 

Vi. Security Settings

In this way, you can use the default function. The upload function is used to browse the directory, and the uploadfiles directory is writable, which is not safe for the server. If you want to customize the upload function and insert Source code . Then you will continue to read it.
Open fckconfig. js and modify fckconfig. toolbarsets ["default"] with the following values:
Fckconfig. toolbarsets ["default"] = [
['Source', 'docprops', '-', 'save', 'newpage', 'preview', '-', 'templates'],
['Cut ', 'copy', 'paste', 'pastetext ', 'pasteword','-', 'print', 'spellcheck'],
['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
/* ['Form', 'checkbox', 'Radio ', 'textfield', 'textta', 'select', 'click', 'imagebutton ', 'hidenfield'] */,
'/',
['Bold ', 'italic', 'underline', 'strikethangout', '-', 'subscript', 'superscript'],
['Orderedlist', 'unorderedlist', '-', 'outdent ', 'indent', 'blockquote'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyfull'],
['Link', 'unlink', 'anchor '],
[/* 'Image', 'flash', */'insertcode', 'insertimage', 'table', 'rule', 'smiley ', 'specialchar ', 'pagebreak'],
'/',
['Style', 'fontformat', 'fontname', 'fontsize'],
['Textcolor', 'bgcolor'],
['Fitwindow', 'showbuckets', '-', 'about'],
We commented on the original image, Flash, and so on, and added insertcode and insertimage. This is what we want. Now we have to register these two functions.

Add the following sentence at the end of the file:
Fckconfig. plugins. Add ('insertcodecommands', null, fckconfig. basepath + 'ins INS /');
Fckconfig. plugins. Add ('insertimage', null, fckconfig. basepath + 'ins INS /');
And set fckconfig. linkbrowser = true; fckconfig. imagebrowser = true;
Change fckconfig. flashbrowser = true; to false.

At this point, it is finished. But there are still some problems with this component. I found it in the garden and it was not solved. I hope to have a high finger:

This component has not been able to upload flash and media.

If the XML request error: internal server error (500) is reported (when uploading images), consider the following points:
1. Whether the folder to be uploaded exists. <addkey = "FCKeditor: userfilespath" value = "/fck_test/files/"/>
2. Whether the relative position of the FCKeditor folder is correct. <addkey = "FCKeditor: basepath" value = "~ /FCKeditor/"/>
3. Does the FCKeditor/fckconfig. js file modify?
4. Create a virtual directory in IIS and open "Write Permission"

Related Article

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.