CKEditor is a new generation of FCKeditor, a newly-developed version. CKEditor is one of the best online text editors in the world, and is widely used in all major websites for its amazing performance and scalability. And Ckfinder is a powerful Ajax file manager. Its simple user interface makes all kinds of users, whether from senior professionals, or Internet beginners, are enough intuitive, fast learning to use it.
Url:
ckeditor:http://ckeditor.com/
ckfinder:http://ckfinder.com/
The use of CKEditor
Preparatory work
1. Download CKEditor and unzip it to the Web root directory
2. Compact directory:
_samples folder (sample file, can be deleted)
_source folder (source program file, can be deleted)
changes.html (update list, can be deleted)
install.html (installation point, can delete)
license.html (use permission, can delete)
CKEditor configuration (config.js file)
Detailed API parameters See: http://docs.cksource.com/ckeditor_api/, my default configuration
Copy Code code as follows:
Custom CKEditor Style
Ckeditor.editorconfig = function (config) {
Configure default configuration
Config.language = ' ZH-CN '; Configure language
Config.uicolor = ' #FFF '; Background color
Config.width = 400; Width
Config.height = 400; Height
Config.skin = ' v2 '; Editor Skin style
Cancel the drag to resize feature
config.resize_enabled = false;
Using the Base toolbar
Config.toolbar = "Basic";
Use the Almighty toolbar
Config.toolbar = "full";
Using custom toolbars
Config.toolbar =
// [
[' Source ', ' Preview ', '-'],
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword ',],
[' Undo ', ' Redo ', '-', ' find ', ' Replace ', '-', ' selectall ', ' Removeformat '],
[' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' Smiley ', Specialchar ', ' pagebreak '],
// '/',
[' Bold ', ' italic ', ' underline ', '-', ' subscript ', ' superscript '],
[' Numberedlist ', ' bulletedlist ', '-', ' outdent ', ' Indent ', ' Blockquote '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
[' Link ', ' Unlink ', ' Anchor '],
// '/',
[' Format ', ' Font ', ' fontsize '],
[' TextColor ', ' bgcolor '],
[' Maximize ', ' showblocks ', '-', ' about ']
// ];
};
The application of CKEditor
1. Load ckeditor.js in aspx page or master template page <!--load CKEditor JS file-->
<script type= "Text/javascript" src= "Ckeditor/ckeditor.js" ></script>
2. Modify page instruction validaterequest= "false"
<%@ Page language= "C #" validaterequest= "false"%>
3. Use of CKEditor in <body> tags:
<!--use ckeditor must define class= "CKEditor"-->
<asp:textbox id= "txtcontent" class= "CKEditor" textmode= "MultiLine"
Text= ' <%# Bind ("info")%> ' runat= ' server ></asp:TextBox>
4. Get or set the contents of the editor
Get the contents of the editor
Lblview.text=server.htmlencode (This.txtContent.Text);
Setting the contents of the editor
Txtcontent.text = Server.htmldecode ("
The use of Ckfinder
Preparatory work
1. Download Ckfinder's asp.net version and unzip it to the Web root directory
2. Copy the Ckfinder.dll file in the/bin/release directory to the site Bin directory
3. Compact directory:
_samples folder (sample file, can be deleted)
_source folder (source program file, can be deleted)
Configuration of Ckfinder
1. Open "\ckfinder\config.ascx" to specify the default path for the BaseURL in the Setconfig method, such as:
Userfiles as the default path, the directory will automatically generate images, flash and other subdirectories.
BaseURL = "~/ckfinder/userfiles/";
Note: Pay attention to "~/".
2. Integration with CKEditor
Open the Config.js file in the CKEditor directory in the function function
Copy Code code as follows:
Custom CKEditor Style
Ckeditor.editorconfig = function (config) {
......
};
Add the following content:
Copy Code code as follows:
Integrate Ckfinder in CKEditor, and note that Ckfinder's path selection is correct.
Config.filebrowserbrowseurl = Location.hash + '/ckfinder/ckfinder.html ';
Config.filebrowserimagebrowseurl = Location.hash + '/ckfinder/ckfinder.html? Type=images ';
Config.filebrowserflashbrowseurl = location.hash+ '/ckfinder/ckfinder.html? Type=flash ';
Config.filebrowseruploadurl = Location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=quickupload &type=files ';
Config.filebrowserimageuploadurl = Location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command= Quickupload&type=images ';
Config.filebrowserflashuploadurl = Location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command= Quickupload&type=flash ';
Config.filebrowserwindowwidth = ' 800 ';
Config.filebrowserwindowheight = ' 500 ';
The application of Ckfinder
1. Add the Ckfinder.dll control in the site root bin directory to the toolbar
2. Drag and drop controls to a Web page
3. Modify the Ckfinder control property BasePath as the relative path of the Ckfinder directory
Problems
1. Symptom: File is not browsable for security reasons. Contact your system administrator and check the Ckfinder configuration file.
Reason: User authentication is not set or the user is not logged in.
Statement:
Copy Code code as follows:
public override bool Checkauthentication ()
{
return false;
}
Workaround: Modify the public override bool Checkauthentication () to join the user authentication method in the Ckfinder config.ascx file.
2. Symptom: Unknown error
Reason: The settings are not user authenticated, but the BaseURL path is incorrect.
Statement:
Copy Code code as follows:
public override bool Checkauthentication ()
{
return true;
}
WORKAROUND: public override void Setconfig () modification in Ckfinder's Config.ascx file
Userfiles as the default path, the directory will automatically generate images, flash and other subdirectories.
BaseURL = "~/ckfinder/userfiles/";
Note: Pay attention to "~/".
3. Symptom: Access to Ckfinder page times wrong "HTTP error 404-not Found"
Workaround: Modify the BasePath property of the Ckfinder control to the relative path of the Ckfinder directory
