Application of Asp.net ckeditor and ckfinder

Source: Internet
Author: User

Ckeditor is a new generation of FCKeditor, which is a redevelopment version. Ckeditor is one of the world's best online web text editors. It is widely used in various websites for its amazing performance and scalability. Ckfinder is a powerful Ajax File Manager. Its simple user interface enables all types of users to learn and use it intuitively and quickly, whether from senior professionals or Internet beginners.

URL:
Ckeditor: http://ckeditor.com/
Ckfinder: http://ckfinder.com/
Use of ckeditor
Preparations
1. Download ckeditor and decompress it to the Web root directory.
2. Simplified directory:
_ Samples folder (the sample file can be deleted)
_ Source folder (Source Program File, which can be deleted)
Changes.html (update list, which can be deleted)
Install.html (Installation Point, which can be deleted)
License.html (license, can be deleted)
Ckeditor configuration (config. js file)
For more information about API parameters, see http://docs.cksource.com/ckeditor_api /. CopyCode The Code is as follows: // customize the ckeditor Style
Ckeditor. editorconfig = function (config ){
// Configure the default configuration
Config. Language = 'zh-cn'; // configuration language
// Config. uicolor = '# fff'; // background color
// Config. width = 400; // width
// Config. Height = 400; // height
// Config. Skin = 'v2'; // editor skin Style
// Cancel the "drag to change the size" Function
// Config. resize_enabled = false;
// Use the basic Toolbar
// Config. toolbar = "Basic ";
// Use the all-around Toolbar
Config. toolbar = "full ";
// Use the custom Toolbar
// Config. toolbar =
//[
// ['Source', 'preview', '-'],
// ['Cut ', 'copy', 'paste', 'pastetext ', 'pastefromword',],
// ['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
// ['Image', 'flash', 'table', 'horizontalrule', 'smilil', specialchar, 'pagebreak'],
//'/',
// ['Bold ', 'italic', 'underline', '-', 'subscript', 'superscript'],
// ['Numberlist', 'bulletedlist', '-', 'outdent ', 'indent', 'blockquote'],
// ['Justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
// ['Link', 'unlink', 'anchor '],
//'/',
// ['Format', 'font', 'fontsize'],
// ['Textcolor', 'bgcolor'],
// ['Delimiter', 'showbucket', '-', 'about']
//];
};

ckeditor application
1. Load ckeditor. JS:


2. modify the page command validaterequest = "false"
<% @ page Language = "C #" validaterequest = "false" %>
3. use ckeditor in the label:

text = '<% # BIND ("info ") %> 'runat = "server">
4. obtain or set the content in the Editor
// obtain the content in the Editor
lblview. TEXT = server. htmlencode (this.txt content. text);
// set the content in the Editor
// txtcontent. TEXT = server. htmldecode ("

Settings

");

Ckfinder usage
Preparations
1. Download ASP. Net of ckfinder and decompress it to the Web root directory.
2. Copy the ckfinder. dll file under the/bin/release directory to the site bin directory.
3. Simplified directory:
_ Samples folder (the sample file can be deleted)
_ Source folder (source program files can be deleted)
Ckfinder Configuration
1. Open "\ ckfinder \ config. ascx" and specify the default path for baseurl in the setconfig method, for example:
// Use userfiles as the default path. subdirectories such as images and Flash are automatically generated under the directory.
Baseurl = "~ /Ckfinder/userfiles /";
// Note: Pay attention to "~ /".

2. Integration with ckeditor
Open the config. js file in the ckeditor directory in the function.Copy codeThe Code is as follows: // customize the ckeditor Style
Ckeditor. editorconfig = function (config ){
......
};

Add the following content: copy Code the code is as follows: // integrate ckfinder in ckeditor. Make sure that the ckfinder path is selected correctly.
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. filebrowser1_wwidth = '000000';
// config. filebrowser1_wheight = '000000';

Ckfinder applications
1. Add the ckfinder. dll Control in the bin directory of the site root directory in the toolbar.
2. Drag and Drop controls to the web page
3. Modify the ckfinder control attribute basepath to the relative path of the ckfinder directory.
FAQs
1. Symptoms: files cannot be viewed due to security reasons. Contact the system administrator and check the ckfinder configuration file.
Cause: user authentication is not set or the user is not logged on.
Statement:Copy codeThe Code is as follows: public override bool checkauthentication ()
{
Return false;
}

Solution: Modify public override bool checkauthentication () in the config. ascx file of ckfinder to add the user identity permission verification method.
2. Symptoms: Unknown error
Cause: user authentication is not performed, but the baseurl path is incorrect.
Statement:Copy codeThe Code is as follows: public override bool checkauthentication ()
{
Return true;
}

Solution: Modify public override void setconfig () in the config. ascx file of ckfinder.

// Use userfiles as the default path. subdirectories such as images and Flash are automatically generated under the directory.
Baseurl = "~ /Ckfinder/userfiles /";
// Note: Pay attention to "~ /".

3. symptom: An error "HTTP Error 404-not found" is reported when you access a page with ckfinder.
solution: Modify the basepath attribute of the ckfinder control to the relative path of the ckfinder directory.

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.