Ckeditor3.0 uploads file configuration in the Asp.net environment and integrates ckfinder

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:

View plaincopy to clipboardprint?

2. <MCE: script Type="Text/JavaScript" SRC="Ckeditor/ckeditor. js" Mce_src="Ckeditor/ckeditor. js"></MCE: script>
4. Then you can use:
6. <Textarea Class="Ckeditor" Cols="80" ID="Editor1" Name="Editor1" Rows="10">
8. Here is the content

<MCE: Script Type = "text/JavaScript" src = "ckeditor/ckeditor. JS "mce_src =" ckeditor/ckeditor. JS "> </MCE: SCRIPT> <br/> on the page, you can use: <br/> <textarea class = "ckeditor" Cols = "80" id = "editor1" name = "editor1" rows = "10"> <br/> content <br/>

 

In this way, you can use it.

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

View plaincopy to clipboardprint?

2. <ASP: textbox ID="Txtcontent" Runat="Server" Textmode="Multiline"></ASP: textbox>
4. <MCE: script Type="Text/JavaScript"><! --
8. Ckeditor. Replace ('<% = Txtcontent. clientid %>');
10. //--></MCE: script>

<Asp: textbox id = "txtcontent" runat = "server" textmode = "multiline"> </ASP: textbox> <br/> <MCE: script Type = "text/JavaScript"> <! -- </P> <p> ckeditor. Replace ('<% = txtcontent. clientid %>'); <br/> // --> </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:

View plaincopy to clipboardprint?

2. <ASP: textbox ID="Txtcontent" Runat="Server" Textmode="Multiline"></ASP: textbox>
4. <MCE: script Type="Text/JavaScript"><! --
6. // This call can be placed at any point after
8. //<Textarea>, Or inside<Head><Script>In
10. // Window. onload event handler.
14. // Replace<Textarea ID="Editor">With an ckeditor
16. // Instance, using default deployments.
18. Ckeditor. Replace ('<% = Txtcontent. clientid %>',
20. {
22. Filebrowserbrowseurl: '../ckfinder/ckfinder.html ',
24. Filebrowserimagebrowseurl: '../ckfinder/ckfinder.html?Type=Images',
26. Filebrowserflashbrowseurl: '../ckfinder/ckfinder.html?Type=Flash',
28. Filebrowseruploadurl: '../ckfinder/CORE/connector/aspx/connector. aspx?Command=Quickupload&Type=Files',
30. Filebrowserimageuploadurl: '../ckfinder/CORE/connector/aspx/connector. aspx?Command=Quickupload&Type=Images',
32. Filebrowserflashuploadurl: '../ckfinder/CORE/connector/aspx/connector. aspx?Command=Quickupload&Type=Flash'
34. }
36. );
38. //--></MCE: script>

<Asp: textbox id = "txtcontent" runat = "server" textmode = "multiline"> </ASP: textbox> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> // This call can be placed at any point after the <br/> // <textarea>, or inside a <pead> <SCRIPT> In A <br/> // window. onload event handler. </P> <p> // Replace the <textarea id = "Editor"> with an ckeditor <br/> // instance, using default deployments. <br/> ckeditor. replace ('<% = txtcontent. clientid %> ', <br/>{< br/> filebrowserbrowseurl :'.. /ckfinder/ckfinder.html ', <br/> filebrowserimage Browseurl: '../ckfinder/ckfinder.html? Type = images ', <br/> filebrowserflashbrowseurl:' ../ckfinder/ckfinder.html? Type = flash ', <br/> filebrowseruploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = files ', <br/> filebrowserimageuploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = images ', <br/> filebrowserflashuploadurl:' ../ckfinder/CORE/connector/aspx/connector. aspx? Command = quickupload & type = flash '<br/>}< br/>); <br/> // --> </MCE: SCRIPT> <br/>

 

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