Ckeditor configuration in. Net Environment

Source: http://licheng3222.blog.163.com/blog/static/6109936720101145839330/

 

FCKeditor is an open website dedicated for use.Source codeWYSIWYG text editor. It is lightweight and can be used without complicated installation steps. It can be used on multiple platforms, such as ASP, Asp.net, PHP, and JSP, and supports most browsers. Therefore, it became the most popular text editor in the past six years.

With the development of technology, many updates are more convenient for developers. In this case, the FCKeditor team released a rewritten version of FCKeditor-ckeditor.

The new version of ckeditor is faster to load and more convenient to use. On the basis of the new version, another new user interface can even allow users to precisely customize colors. Ckeditor is rewritten to provide rich and powerful APIs for integration and interaction. The editor is fully plug-in-based and can be expanded to meet all requirements.

The new version of ckeditor only provides basic text editing functions. The upload module is composed of ckfinder, another component. If you need the upload feature at the same time, you need to download ckfinder (http://www.ckfinder.com /).

Ckeditor Configuration

The following describes how to use the new ckeditor and ckfinder versions in the Asp.net environment.

Ckeditor configuration is relatively simple compared with FCKeditor. Copy the folder to yourProgramDirectory, And then you only need to add JS references to the page:

<MCE: Script Type = "text/javasExport "src =" ckeditor/ckeditor. js "mce_src =" ckeditor/ckeditor. js "> </MCE: SCRIPT>

Then you can use:

<Textarea class = "ckeditor" Cols = "80" id = "editor1" name = "editor1" rows = "10"> you can use the content here.

In Asp.net, if you want to use the background to retrieve the data in the editor, you can do this:

<Asp: textbox id = "txtcontent" runat = "server" textmode = "multiline">

</ASP: textbox> <MCE: Script Type = "text/javasOther ">

<! -- Ckeditor. Replace ('<% = txtcontent. clientid %>'); // -->

</MCE: SCRIPT>

<% = Txtcontent. clientid %> is the ID name displayed in HTML after the server control is compiled. In this way, you can call the data in the editor in the background.

To reduce the size of the editor, you can delete unnecessary files, such as deleting the _ samples, _ source, and _ tests folders to enter the Lang file directory and retain en. JS, Zh. JS, zh-cn.js three files, other language files if you can not use, you can delete.

Ckfinder Configuration:

1. Copy the decompressed/ckfinder/folder to your web directory, and copy the DLL files in the bin directory to your own bin directory.

2. Create a directory for uploading files. In the default configuration,/ckfinder/userfiles/is the upload directory. to modify the upload directory, modify config. baseurl = "/uploads/" in the ascx file. Here, the root directory is used as the absolute path directory. Note that it ends with a backslash.

3. Make sure that your folder can be written by network access. In Windows, write permissions are granted to IUSR _ <servername> users. ckfinder can use session to determine whether users have the permission to upload files. If user authentication is not required, modify the checkauthentication () function in the config. ascx file and return true directly. This function also needs to be modified for authentication.

4. Edit the config. ascx file. Make sure that you have correctly set the settings in the file and make sure ckfinder is in it.

Then test whether it is available and run the following page:

/Ckfinder/_ samples/aspx/standalone. aspx

You should be able to use it unless unexpected.

PS: In some online tutorials, it is said that ckfinder requires a payment to upload files. Non-registered ckfinder can still use all functions, but only put a logo in the editor.

Integration with ckeditor:

After the above configuration, ckeditor and ckfinder should be used theoretically. However, ckeditor does not have the upload function yet. You must integrate the two items.CodeRelatively simple:

C # code

 

1 < ASP: textboxid = " Txtcontent " Runat = " Server " Textmode = " Multiline " > </ ASP: textbox >
2 < MCE: scripttype = " Text/JavaScript " > <! --
3 // This call can be placed at any point after
4 // <Textarea>, or inside a 5 // Window. onload event handler.
6
7 // Replace the <textareaid = "Editor"> with an ckeditor
8 // Instance, using default invocations.
9 Ckeditor. Replace ( ' <% = Txtcontent. clientid %> ' ,
10 {
11 Filebrowserbrowseurl: ' ../Ckfinder/ckfinder.html ' ,
12 Filebrowserimagebrowseurl: ' ../Ckfinder/ckfinder.html? Type = Images ' ,
13 Filebrowserflashbrowseurl: ' ../Ckfinder/ckfinder.html? Type = flash ' ,
14 Filebrowseruploadurl: ' ../Ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = files ' ,
15 Filebrowserimageuploadurl: ' ../Ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = Images ' ,
16 Filebrowserflashuploadurl: ' ../Ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = flash '
17 }
18 );
19 // --> </MCE: SCRIPT>
20

 

 

<Asp: textboxid = "txtcontent" runat = "server" textmode = "multiline"> </ASP: textbox> <MCE: scripttype = "text/javas Success "> <! -- // This call can be placed at any point after the // <textarea>, or inside a Load event handler. // Replace the <textareaid = "Editor"> with an ckeditor // instance, using default deployments. ckeditor. replace ('<% = txtcontent. clientid %> ', {filebrowserbrowseurl :'.. /ckfinder/ckfinder.html ', filebrowserimagebrowseurl :'.. /ckfinder/ckfinder.html? Type = images ', filebrowserflashbrowseurl:' ../ckfinder/ckfinder.html? Type = flash ', filebrowseruploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = files ', filebrowserimageuploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = images ', filebrowserflashuploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = flash '}); // --> </MCE: SCRIPT>

 

If the path is not configured incorrectly, congratulations! Enjoy the new ckeditor!